如何解决React Native:将数据也从平面列表引入到已分配的模式中
我的Flatlist中的每个项目都有一个打开模式的按钮,我想将该项目中的唯一数据显示到我的模式中,到目前为止,下面的代码是到这里为止。我似乎无法正常工作!当前,当模式加载时,它带有关闭按钮为空。
有人可以让我知道我想念什么或需要做些什么吗?
感谢您的帮助!
cmd.exe
解决方法
您不需要多个状态来传递所选项目的详细信息,而是坚持使用一个变量selectedItem和另一个变量来控制模态的可见性。 并且您可以选择存储项目或所选状态的项目。另外,由于renderItem中没有任何逻辑,因此不需要单独的函数,因此可以内联进行。您可以在下面看到代码。
export default function StretchesScreen() {
const [modalVisible,setModalVisible] = useState(false);
const [currentItem,setCurrentItem] = useState({});
const Item = ({ item }) => (
<View style={styles.item}>
<Image source={item.image} style={styles.exerciseImage} />
<View style={styles.detailSection}>
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.section}>{item.section}</Text>
</View>
<TouchableOpacity
style={styles.viewButton}
onPress={() => {
openSettingsModal(item);
}}>
<Text style={styles.viewText}>View</Text>
</TouchableOpacity>
</View>
);
const openSettingsModal = (item) => {
setCurrentItem(item);
setModalVisible(!modalVisible);
};
return (
<SafeAreaView style={styles.container}>
<View style={styles.tabBackground}>
<Text style={styles.subTitle}>EXERCISES: STRETCHES</Text>
</View>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
}}>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<Text style={styles.modalText}>{currentItem.modalTitle}</Text>
<Text style={styles.modalText}>{currentItem.modalDesc}</Text>
<TouchableHighlight
style={{ ...styles.openButton,backgroundColor: '#2196F3' }}
onPress={() => {
setModalVisible(!modalVisible);
}}>
<Text style={styles.textStyle}>Hide Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
<FlatList
data={DATA}
renderItem={({ item }) => <Item item={item} />}
keyExtractor={(item) => item.id}
/>
</SafeAreaView>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。