Comment rendre des éléments de carte à partir d'un tableau dans NativeBase?

Mon code ne fonctionne pas. Je voudrais rendre des cartes à partir du tableau d'objets. Cependant, il semble assez difficile avec NativeBase.Comment rendre des éléments de carte à partir d'un tableau dans NativeBase?

CardsScreen.js:

import React, { Component } from 'react'; 
import { Image } from 'react-native'; 
import { Container, Header, Content, Card, CardItem, Thumbnail, Text, Button, Icon, Left, Body, Right } from 'native-base'; 

class CardsScreen extends Component { 
    props:Props; 


    DATA = [ 
{ id: 1, title: 'Lorem ipsum dolor sit amet, everti rationibus his cu', views:'200', comments:'9', published:'4h ago' image: require('../img/img1.jpeg') }, 

{ id: 2, title: 'Lorem ipsum dolor sit amet, everti rationibus his ', Views:'700', comments:'16', published:'9h ago' image: require ('../img/img2.jpg') }, 

{ id: 3, title: 'Lorem ipsum dolor sit amet, everti rationibus hi', Views:'698', comments:'8', published:'14h ago' image:require ('../img/img3.jpeg') }, 

]; 

    render() { 

    let renderpostTypes =() => { 

     let post = []; 


     this.DATA.map((item)=> { 

     post.push(

      <Content key={item.id}> 

      <Card> 
      <CardItem> 
       <Left> 
       <Thumbnail source={require(item.image)} /> 
       <Body> 
        <Text>item.title</Text> 
        <Text note>GeekyAnts</Text> 
       </Body> 
       </Left> 
      </CardItem> 
      <CardItem cardBody> 
       <Image source={require(item.image)} style={{height: 200, width: null, flex: 1}}/> 
      </CardItem> 
      <CardItem> 
       <Left> 
       <Button transparent> 
        <Icon active name="thumbs-up" /> 
        <Text>item.views</Text> 
       </Button> 
       </Left> 
       <Body> 
       <Button transparent> 
        <Icon active name="chatbubbles" /> 
        <Text>item.comments</Text> 
       </Button> 
       </Body> 
       <Right> 
       <Text>item.published</Text> 
       </Right> 
      </CardItem> 
      </Card> 
      </Content> 
     ); 
     }); 

     return post; 
    }; 

    return (
     <Container> 

     <Content > 
      {renderpostTypes()} 
     </Content> 
     </Container>); 
    } 
} 
export default CardsScreen;

Comment puis-je le faire fonctionner et rendre les cartes de ce tableau d'objets? Y at-il un exemple qui résout ce problème?

Source

2017-07-31 Syuzanna

toute erreur dans la console? – abdul

à l'heure actuelle erreur de syntaxe dans le tableau que je ne peux pas trouver, mais je ne pense pas que ce code est correct. – Syuzanna

J'ai essayé votre code, mais il fonctionne bien dans mon appareil :) –

class MyComponent extends Component { 
    constructor() { 
    super(); 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.state = { 
     dataSource: ds.cloneWithRows(yourDataArray), 
    }; 
    } 

    render() { 
    return (
     <ListView 
     dataSource={this.state.dataSource} 
     renderRow={(rowData) => <card></card>} 
     /> 
    ); 
    } 
}

Utilisez la liste Vue de réactif natif avec la disposition de la carte en son sein. Le lien ci-dessous vous sera utile. http://facebook.github.io/react-native/releases/0.46/docs/listview.html#listview

Source

2017-07-31 08:40:37

Voici un exemple qui peut corriger votre code. Ci-dessous tous ce été utilisés de BASE NATIVE

export default class DynamicListExample extends Component { 
    render() { 
     var items = ['Simon Mignolet','Nathaniel Clyne','Dejan']; 
    return ( 
     <Container> 
     <Content> 
      <List dataArray={items} 
      renderRow={(item) => 
       <ListItem> 
       **YOU CAN PUT YOUR HOLE CARD COMPONENT IN BETWEEN THESE LIST** 
       </ListItem> 
      }> 
      </List> 
     </Content> 
     </Container> 
    ); 
    } 
}

Source

2017-07-31 09:42:58

merci Pang pour la suggestion, comme je suis nouveau à flux de stackover, juste essayer d'améliorer les choses –

Il montre l'erreur nécessite le module '11' et détruit instantanément l'application simulateur intérieur – Syuzanna

j'ai essayer votre code, et qui fonctionne dans mon appareil. mais j'ai un exemple de code si vous voulez carte rendre utilisation du tableau dans la base native, c'est le code:

import React, { Component } from 'react'; 
import { AppRegistry, Image } from 'react-native'; 
import { Container, Header, Content, Card, CardItem, Thumbnail, Text, Button, Icon, Left, Body, Right } from 'native-base'; 

class CardsScreen extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
     DATA : [ 
      { id: 1, title: 'Lorem ipsum dolor sit amet, everti rationibus his cu', views:'200', comments:'9', published:'4h ago', image: '../img/img1.jpeg' }, 

      { id: 2, title: 'Lorem ipsum dolor sit amet, everti rationibus his ', Views:'700', comments:'16', published:'9h ago', image: '../img/img1.jpeg' }, 

      { id: 3, title: 'Lorem ipsum dolor sit amet, everti rationibus hi', Views:'698', comments:'8', published:'14h ago', image: '../img/img1.jpeg' }, 
     ], 
     } 
    } 
    render() { 
    return (
     <Container> 
     <Content> 
     {this.state.DATA.map((item, index) => { 
      return(
      <Card key={index} > 
       <CardItem> 
       <Left> 
        <Thumbnail source={require(item.image)}/> 
        <Body> 
        <Text>{item.title}</Text> 
        <Text note>GeekyAnts</Text> 
        </Body> 
       </Left> 
       </CardItem> 
       <CardItem cardBody> 
       <Image source={require(item.image)} style={{height: 200, width: null, flex: 1}} /> 
       </CardItem> 
       <CardItem> 
       <Left> 
        <Button transparent> 
        <Icon active name="thumbs-up" /> 
        <Text>{item.views}</Text> 
        </Button> 
       </Left> 
       <Body> 
        <Button transparent> 
        <Icon active name="chatbubbles" /> 
        <Text>{item.comments}</Text> 
        </Button> 
       </Body> 
       <Right> 
        <Text>{item.published}</Text> 
       </Right> 
       </CardItem> 
      </Card> 
     ); 
     })} 
     </Content> 
     </Container>); 
    } 
} 

AppRegistry.registerComponent('ExampleApps',() => CardsScreen);

L'espoir peut vous aider :)

Source

2017-07-31 10:15:16

Merci pour le code. Il montre une erreur de syntaxe à l'intérieur de la première ligne {objets} du tableau. – Syuzanna

Il montre une erreur nécessite le module '11' et détruit instantanément l'application à l'intérieur du simulateur. – Syuzanna

Parce que la clé de l'objet est différente, pouvez-vous changer la clé 'Views' en' views'? –

Comment rendre des éléments de carte à partir d'un tableau dans NativeBase?

Répondre

Questions connexes