如何解决如何在React Native中为<TouchableOpacity>组件添加唯一键?
我正在尝试为我想传递的<TouchableOpacity>
的某些onPress
组件生成唯一键,但是并没有选择key
变量。
const options = ["pic1","pic2","pic2"];
export default function ColourScreen() {
const handlePress = (key) => {
...do something wity key...
}
return (
<View>
<TouchableOpacity onPress={key => handlePress(key)}>
<Image
style={styles.icon}
source={require('../../../assets/icons/icon_1.jpg')}
/>
</TouchableOpacity>
<TouchableOpacity onPress={key => handlePress(key)}>
<Image
style={styles.icon}
source={require('../../../assets/icons/icon_2.jpg')}
/>
</TouchableOpacity>
<TouchableOpacity onPress={key => handlePress(key)}>
<Image
style={styles.icon}
source={require('../../../assets/icons/icon_3.jpg')}
/>
</TouchableOpacity>
</View>
)
}
我尝试手动将其设置为:
<TouchableOpacity
key = {1}
onPress={key => handlePress(key)}>
<Image
style={styles.icon}
source={require('../../../assets/icons/icon_1.jpg')}
/>
</TouchableOpacity>
或:
{options.map((option,key) =>
<TouchableOpacity
key = {key}
onPress={() => handlePress(key)}>
<Image
style={styles.icon}
source={require('../../../assets/icons/icon_1.jpg')}
/>
</TouchableOpacity>,...
)}
但这只会创建多个组件。
我如何成功做到这一点?
解决方法
您可以拿钥匙并将其映射到您的图标。
const icons = [
require(`../../../assets/icons/icon_1.jpg`),reqiuire(`../../../assets/icons/icon_2.jpg`),require(`../../../assets/icons/icon_3.jpg`),require(`../../../assets/icons/icon_4.jpg`),]
{options.map((option,key) =>
<TouchableOpacity
key = {key}
onPress={() => handlePress(key)}>
<Image
style={styles.icon}
source={icons[key]}
/>
</TouchableOpacity>
)}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。