如何从NativeBase中的数组呈现卡片项目？

我的代码无法使用。我想从对象数组中提取卡片。但是，NativeBase似乎很难。如何从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;

我怎样才能使它发挥作用，并从对象的数组呈现出牌？有没有解决这个问题的例子？

来源

2017-07-31 Syuzanna

任何错误？ – abdul

目前语法错误内部数组只有我无法找到，但我不认为这段代码是正确的。 – Syuzanna

我试过你的代码，但它在我的设备中工作得很好:) –

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>} 
     /> 
    ); 
    } 
}

使用列表查看原始卡片布局内的反应。下面的链接将有所帮助。 http://facebook.github.io/react-native/releases/0.46/docs/listview.html#listview

来源

2017-07-31 08:40:37

下面是一个可以更正您的代码的示例。低于每本从天然碱基

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> 
    ); 
    } 
}

来源

2017-07-31 09:42:58

感谢Pang的建议，因为我是新的stackover流程，只是想改进的东西 –

它显示错误需要模块'11'，并立即销毁应用程序模拟器内部 – Syuzanna

我有尝试你的代码，并在我的设备，工程中使用。但我有一个示例代码，如果你想使用数组中的本地基地渲染卡，这是代码：

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);

希望可以帮到你:)在控制台

来源

2017-07-31 10:15:16

感谢您的代码。它在数组的第一行{objects}中显示语法错误。 – Syuzanna

它显示错误需要模块'11'，并立即销毁模拟器内的应用程序。 – Syuzanna

它导致从对象的关键有不同，你可以更改'Views'键到'views'？ –

如何从NativeBase中的数组呈现卡片项目？

回答

相关问题