React Native中如何将列表项数据传入Modal组件？

你完全不需要依赖Navigation来实现这个需求，用React的useState就能优雅地把对应条目的数据传递给ModalBasic组件，而且可以优化一下当前的实现逻辑，让代码更简洁：

优化方案：直接存储选中的完整条目数据 #

当前你只存储了条目的id，其实可以直接存储整个选中的item对象，这样不需要再根据id去数组里查找数据，更高效：

1. 修改状态定义：

   const [isModal, setModal] = useState(false);
   // 替换原来的idBasic，直接存选中的item
   const [selectedItem, setSelectedItem] = useState(null);
   

2. 更新显示模态框的函数：

   const showModalBasic = (item) => {
     setModal(true);
     setSelectedItem(item); // 直接传入完整的item对象
   };
   

3. 修改FlatList的点击事件：

   <TouchableOpacity
     // ... 其他样式属性
     onPress={() => showModalBasic(item)} // 把当前item传给函数
   >
     // ... 内部渲染内容
   </TouchableOpacity>
   

4. 传递数据给ModalBasic：

   <ModalBasic visible={isModal} item={selectedItem} />
   

之后在你的ModalBasic组件里，就可以通过props.item拿到完整的条目数据，比如props.item.name、props.item.desc来展示详情了。

备选方案：如果坚持通过id传递数据 #

如果你还是想通过id来传递，那需要在ModalBasic里根据id从你的data数组中找到对应条目：

• 首先修正当前的Modal传递错误：你现在传的是setIdBasic（这是状态更新函数），应该传idBasic变量：

  <ModalBasic visible={isModal} id={idBasic} data={data} />
  

• 然后在ModalBasic组件内部查找数据：

  // 在ModalBasic组件里
  const selectedItem = props.data.find(item => item.id === props.id);
  

不过这种方式需要把data也传递给Modal，不如直接传完整item来得直接。

关于Navigation的疑问 #

完全不需要用Navigation来展示这个模态框，React Native里的Modal组件就是通过visible状态来控制显示/隐藏的，配合useState管理选中的数据是最常规的实现方式，Navigation更多用于页面之间的跳转，这种弹窗类的组件用状态控制就足够了。

内容的提问来源于stack exchange，提问作者zainal abidin