反应本机 ListView 键

Question

我在我的应用程序上收到一条困扰我的警告。反应一直说我需要为每一行添加键，但无论如何我都不能添加这些键。

我的代码如下所示：

 <ListView
   style={styles.listView}
   dataSource={this.state.favs}
   renderSeparator={() => <View style={styles.listSeparator}/>}
   renderRow={(rowData,i) => <Card data={rowData} 
            onPress={this.onCardPress.bind(this,rowData)} /> }
/>

我尝试像这样在我的组件上添加密钥 <Card key={rowData.id}/>/ 而且我还尝试从我的组件内的道具中获取密钥并将其添加到组件的第一个元素中我的情况是 TouchbleOpacity

<TouchableWithoutFeedback
        key={this.props.key}
        style={styles.cardBtn}>

有人可以给我提示吗？还是我应该忽略这个警告？

Answer 1

实际上 renderRow 有四个参数 (rowData, sectionID, rowID, highlightRow) ，您需要第三个而不是第二个。

renderRow={(rowData, sectionID, rowID) => <Card key={rowID} data={rowData} 
            onPress={this.onCardPress.bind(this,rowData)} /> }

参考：facebook.github.io/react-native/docs/listview.html#renderrow

Answer 2

正如 Gabriel Lopes 在他的中所述，一个常见的错误是忘记向分隔符添加键。

因此请确保添加了它们。您可以从传递给分隔符函数的参数构建它们：

renderSeparator(sectionId, rowId, adjacentRowHighlighted) {
  return (<View key={`sep:${sectionId}:${rowId}`} />);
}

反应本机 ListView 键

React-native ListView keys

javascript

listview

key

reactjs

react-native