Question

所以我的数据是：

[
  {"id_categories":1,"name":"One"},
  {"id_categories":2,"name":"Two"},
  {"id_categories":3,"name":"Three"}
]

我的班级显示列表是：

import React, { Component } from 'react';
import { Text } from 'react-native';
import { Container, Content, Card, CardItem, Body, Left, 
         Right, List, ListItem, } from 'native-base';

export default class ListData extends Component {
    render(){

        let articles = this.props.data.map(function(items, index){
            return(
            <List dataArray={items}
                renderRow={(item) =>
                  <ListItem>
                    <Text>{item}</Text>   // this displays the id also
                    <Text>{item.name}</Text>   // this does not display anything
                    //Only using one of the two <Text> above at a time
                  </ListItem>
                }>
            </List>
          )
        });

        return(
        <Content>
            {articles}
        </Content>      

        )
    }
}

我希望只能在列表中显示name并将其设为TouchableOpacity，并将点击的id_categories的值传递给另一个屏幕。但我无法展示唯一的name

Answer 1

如果使用本机基本列表，则无需映射数组 dataArray包含数组数据，renderrow包含组件或自定义组件。

Enter a number: 7
Enter a number: 2
Enter a number: bob
Invalid input
Enter a number: 10
Enter a number: 4
Enter a number: done
Smallest is 2
Largest is 10

Answer 2

您的item内部map功能已经是您要处理的功能：{"id_categories":1,"name":"One"}。

因此，在map循环内，您可以name访问item.name，如下所示：

＆＃13;

let articles = this.props.data.map(function(item, index) {
  // item ={"id_categories":1,"name":"One"},
  return(
    <List dataArray={"I will skip this one"}
      renderRow={(item) =>
        <ListItem>
          <Text>{item.name}</Text>
        </ListItem>
      }>
    </List>
  )
});

＆＃13;

修改

只需查看NativeBase List，我认为这应符合您的要求

＆＃13;
＆＃13;
let articles = ( <List dataArray={this.props.data} renderRow={(item) => <ListItem><Text>{item.name}</Text></ListItem>}> </List> ) });
＆＃13;
＆＃13;
＆＃13;

NativeBase无法仅列出数组的某些部分

2 个答案: