Reactjs 如何从NativeBase中的阵列渲染卡项目？_Reactjs_React Native_React Native Android_React Native Ios_Native Base

Reactjs 如何从NativeBase中的阵列渲染卡项目？

reactjs react-native

Reactjs 如何从NativeBase中的阵列渲染卡项目？,reactjs,react-native,react-native-android,react-native-ios,native-base,Reactjs,React Native,React Native Android,React Native Ios,Native Base,我的代码不起作用。我想从对象数组中渲染卡片。然而，与NativeBase合作似乎相当困难 cardscreen.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 '

我的代码不起作用。我想从对象数组中渲染卡片。然而，与NativeBase合作似乎相当困难

cardscreen.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;

import React，{Component}来自'React'；
从“react native”导入{Image}；
从“本机基础”导入{容器、标题、内容、卡片、卡片项、缩略图、文本、按钮、图标、左侧、正文、右侧}；
类cardscreen扩展组件{
道具：道具；
数据=[
{id:1，标题：'Lorem ipsum dolor sit amet，everti Rationalibus his cu'，观点：'200'，评论：'9'，发表：'4h ago'图片：require（'../img/img1.jpeg'），
{id:2，标题：'Lorem ipsum dolor sit amet，everti Rationalibus his'，观点：'700'，评论：'16'，出版：'9h前'图片：require（'../img/img2.jpg'），
{id:3，标题：'Lorem ipsum dolor sit amet，everti Rationalibus hi'，视图：'698'，注释：'8'，发布：'14h前'图像：require（'../img/img3.jpeg'），
];
render（）{
让renderpostTypes=（）=>{
让post=[]；
此.DATA.map（（项）=>{
后推(
项目名称
极客
项目视图
项目.评论
项目.已出版
);
} );
回程站；
};
返回(
{renderpostTypes（）}
);
}
}
导出默认卡片屏幕；

我如何使它工作并从该对象阵列渲染卡？有没有解决此问题的示例？

类MyComponent扩展组件{
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>}
      />
    );
  }
}

构造函数（）{
超级（）；
const ds=new ListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）；
此.state={
数据源：ds.cloneWithRows（yourDataArray），
};
}
render（）{
返回(
}
/>
);
}
}

使用react 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>
    );
  }
}

导出默认类DynamicListExample扩展组件{
render（）{
var项目=['Simon Mignolet'、'Nathaniel Clyne'、'Dejan']；
报税表（
**您可以将孔卡组件放在这些列表之间**
}>
);
}
}

我已经尝试了你的代码，这在我的设备上运行。但我有一个示例代码，如果您希望在本机base中使用数组渲染卡，则代码如下：

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

import React，{Component}来自'React'；
从“react native”导入{AppRegistry，Image}；
从“本机基础”导入{容器、标题、内容、卡片、卡片项、缩略图、文本、按钮、图标、左侧、正文、右侧}；
类cardscreen扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[
{id:1，标题：'Lorem ipsum dolor sit amet，everti Rationalibus他的cu'，观点：'200'，评论：'9'，出版：'4h ago'，图片：'../img/img1.jpeg'}，
{id:2，标题：'Lorem ipsum dolor sit amet，everti Rationalibus his'，观点：'700'，评论：'16'，出版：'9h前'，图片：'../img/img1.jpeg'}，
{id:3，标题：'Lorem ipsum Door sit amet，everti Rationalibus hi'，视图：'698'，评论：'8'，出版：'14h前'，图片：'../img/img1.jpeg'}，
],
}
}
render（）{
返回(
{this.state.DATA.map（（项，索引）=>{
返回(
{item.title}
极客
{item.views}
{item.comments}
{item.published}
);
})}
);
}
}
AppRegistry.registerComponent（'ExampleApps'，（）=>CardsScreen）；

希望可以帮助您：）

下面是一个示例，例如您使用本机base并处理此问题的代码示例

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

const result=this.props.articles.map（（项目，索引）=>(
{item.title}
{item.body}
极客
));
返回(
{result}
);

控制台中有错误吗？目前只有数组中的语法错误，我找不到，但我认为这段代码不正确。我已经尝试了你的代码，但它在我的设备中运行良好：）谢谢彭日成的建议，因为我是stackover flow的新手，只是尝试改进一下，这表明错误需要模块“11”，并立即销毁模拟器库中的应用程序以获取代码。它显示数组的第一行{objects}内的语法错误。它显示错误需要模块“11”，并立即破坏模拟器内的应用程序。它导致来自对象的键具有不同的属性，您能否将

视图键更改为视图？而不是AppRegistry.registerComponent（'ExampleApps'，（）=>Cardscreen）；我使用的是导出默认卡；此外，在更改视图后，它会显示相同的模块“11”，并立即销毁该应用程序。我可以查看您的导入吗？