传递动态值以从flatList项React Native模态视图

8yparm6h  于 2022-11-17  发布在  React
关注(0)|答案(1)|浏览(141)

我有一个平面列表,如... <FlatList data={data} keyExtractor={(item, index) => index.toString()}renderItem={({item,index}) =>(<NewView id={item.id} index={index}/>) }/>现在用于渲染项const NewView = ({id, index}) =>{return(<TouchablOpacity onPress={()=> openModal()}> <Text>{id}</Text></TouchableOpacity><Modal animationType='fade' transparent={true}visible={userOptionShowModal}onRequestClose={() =>setUserOptionShowModal(false)}}><Text>{?? ==>id}</Text></Modal>); }现在,当我想显示模态时,按下每个平面列表项,它的工作,但当按下一个平面列表项显示模态,但在模态项中,我无法显示索引或id或任何动态值传递(如何?)的特定平面列表项...请帮助如何实现它?

bvjveswy

bvjveswy1#

你可以用很多方法来实现这个行为,最简单的方法之一是创建一个状态来保存这个信息,然后在模式关闭时重置它的值。
首先,添加以下useState:

const [passedData, setPassedData] = useState({});

然后在调用onPress时,添加所需的所有信息:

<TouchablOpacity onPress={()=> openModal({id, index})}>...</TouchablOpacity>

PS:openModal({id,index})与openModal({id:标识,索引:索引})
然后在openModal函数中添加以下内容:

const openModal = ({id, index}) => {
...
setPassedData({id, index})
}

然后,您可以在您的模态中访问它(不要忘记在关闭请求时或任何关闭模态的时候重置传递的数据):

<Modal
  animationType="fade"
  transparent={true}
  visible={userOptionShowModal}
  onRequestClose={() =>{
  setUserOptionShowModal(false)
  setPassedData({})
 }}>
  <Text>id : {passedData.id}, index: {passedData.index}</Text>
</Modal>

相关问题