如何從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中的數組呈現卡片項目？

回答

相關問題