Native Base 如何获取 List dataArray 的 ListItem 索引？

Question

我想访问使用 dataArray 生成的索引。例如：

<List dataArray={this.props.groceries} renderRow={(groceryListItem, index) =>
    <ListItem>  
        <Text>{index}</Text>
    </ListItem>
    }
>
</List>

但是，这不起作用。我怎样才能访问这个动态索引？谢谢！

Answer 1

React Native FlatList 与您的 List 组件具有相似的结构，React Native 社区强烈建议使用 FlatList 因为效率，index 渲染项目很容易到达。这是您想要的简单用法：

render() {
  return (
    <FlatList
      data={[
        {title: "title1"},
        {title: "title2"},
        {title: "title3"},
        {title: "title4"},
        {title: "title5"},
        {title: "title6"},
        {title: "title7"},
        {title: "title8"},
      ]}
      renderItem={(item) => <Text>{item.index}</Text>}
      keyExtractor={(item, index) => index.toString()}/>
  );
}

item参数在renderItem中有两个重要的属性.

index：正在呈现的项目的索引
data：你提供给平面列表的数据，在这个例子中是传递给平面列表的 data 道具的数组对象之一，例如{title: "title1"} 我不在 renderItem 方法中使用此数据。你可以像这样用你的方式做你想做的事：data={this.props.groceries}

Answer 2

什么是List 是ListView 吗？ İf 是你可以获得索引 3.prop

<ListView 
renderRow={(rowData, sectionID, index) => // you can get the index from 3.
...

Answer 3

我正在使用以下内容：

<List dataArray={this.props.groceries} renderItem={({item, index}) =>
    <ListItem key={index}>  
        <Text>{item}</Text>
    </ListItem>
    }
>
</List>

Native Base 如何获取 List dataArray 的 ListItem 索引？

Native Base how can I get ListItem index of List dataArray?

javascript

reactjs

react-native

native-base