Jac*_*pia 2 reactjs react-native react-native-flatlist react-native-elements
我正在尝试在 React Native 中检索 FlatList 上单击元素的索引。正如文档所说,我将索引传递给 renderItem 道具。我的代码如下:
/**
* Goes to the show view of a container
* @param {*} index
*/
showContainer = (index) => {
console.log(index);
}
render() {
return (
<DefaultScrollView style={styles.container}>
<FlatList
data={this.props.containers}
renderItem={(data, index) => (
<ListItem
containerStyle={{borderBottomWidth: 1, borderBottomColor: "#000"}}
key={data.item.id}
leftAvatar={Image}
onPress={() => {this.showContainer(index)}}
rightIcon={{ name: "ios-eye", type: "ionicon" }}
subtitle={
`${data.item.dummy === true? 'Por favor configura tu dispositivo' : 'Contenido actual: '}`
}
subtitleStyle={(data.item.dummy == true)? [styles.configurationText, styles.subtitule] : styles.subtitule}
title={data.item.name}
titleStyle={styles.title}
/>
)}/>
</DefaultScrollView>
);
}
Run Code Online (Sandbox Code Playgroud)
它工作的唯一方法是,如果我将一个数字作为索引传递,例如:
renderItem={(data, index = 0),但是如何传递索引变量以始终具有正确的索引?
提前致谢
您需要解构你的数据,它传递给前renderItem。
所以改变:
renderItem={(data, index) => ( ...
Run Code Online (Sandbox Code Playgroud)
到:
renderItem={({item, index}) => (...
Run Code Online (Sandbox Code Playgroud)
然后您可以访问您的数据,item.id例如。
简化的工作演示:
https://snack.expo.io/B1AONkehN
| 归档时间: |
|
| 查看次数: |
2560 次 |
| 最近记录: |