如何在 NativeBase 中从数组中渲染卡片项目？答案

【问题标题】：How do I render card items from array in NativeBase?如何在 NativeBase 中从数组中渲染卡片项目？
【发布时间】：2017-07-31 07:14:48
【问题描述】：

我的代码不起作用。我想从对象数组中渲染卡片。但是，使用 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;

如何使它工作并从该对象数组中渲染卡片？有没有解决这个问题的例子？

【问题讨论】：

控制台有什么错误吗？
目前仅在数组中出现语法错误，我无法找到，但我认为这段代码不正确。
我已经尝试过您的代码，但它在我的设备中运行良好 :)

标签： reactjs react-native react-native-android react-native-ios native-base

【解决方案1】：

我已经尝试过您的代码，并且可以在我的设备中使用。但我有一个示例代码，如果你想在本机基础中使用数组渲染卡，这是代码：

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

希望能帮到你:)

【讨论】：

感谢您的代码。它在数组的第一行 { objects} 内显示语法错误。
它显示错误需要模块'11'并立即破坏模拟器内的应用程序。
导致object的key不一样，可以把Viewskey改成views吗？
代替 AppRegistry.registerComponent('ExampleApps', () => CardsScreen);我正在使用导出默认 CardsScren；同样在更改视图后，它显示相同的需要模块“11”并立即销毁应用程序。
我能看到你的import 吗？

【解决方案2】：

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

使用带有卡片布局的 react native 列表视图。下面的链接会有所帮助。 http://facebook.github.io/react-native/releases/0.46/docs/listview.html#listview

【讨论】：

【解决方案3】：

这是一个可以更正您的代码的示例。下面的每一个都是从 NATIVE BASE 中使用的

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

【讨论】：

感谢 Pang 的建议，因为我是 stackover 流的新手，只是想改进一下
它显示错误需要模块'11'并立即破坏模拟器内的应用程序

【解决方案4】：

这是一个示例，例如使用本机基础并处理此问题的代码示例。

const result = this.props.articles.map((item, index) => (
    <Card key={index}>
      <CardItem header bordered>
        <Text>{item.title}</Text>
      </CardItem>
      <CardItem bordered>
        <Body>
          <Text>{item.body}</Text>
        </Body>
      </CardItem>
      <CardItem footer bordered>
        <Text>GeekyAnts</Text>
      </CardItem>
    </Card>
  ));

  return (
    <Container>
      <Content>{result}</Content>
    </Container>
  );

【讨论】：