如何从React Native FlatList项向Modal传递动态值？

问题根源 #

你当前的写法存在两个核心问题：

1. 每个NewView都渲染了独立的Modal，且所有Modal共用同一个全局状态userOptionShowModal，导致点击任意项时所有Modal都会触发显示，但实际只会呈现最后渲染的那个，无法关联对应项的专属数据。
2. Modal内未绑定当前项的id/index，自然无法展示动态值。

修复方案（两种可选） #

方案一：父组件统一管理Modal状态与选中项数据（推荐）

将Modal的显示逻辑和选中项数据移至FlatList所在的父组件，避免子组件重复渲染冗余Modal实例：

// 父组件代码
import { useState } from 'react';
import { FlatList, Modal, TouchableOpacity, Text, View } from 'react-native';

const ParentComponent = () => {
  const [data] = useState([/* 你的数据源数组 */]);
  const [selectedItem, setSelectedItem] = useState(null);
  const [modalVisible, setModalVisible] = useState(false);

  const handleItemPress = (item, index) => {
    setSelectedItem({ ...item, index });
    setModalVisible(true);
  };

  return (
    <View>
      <FlatList
        data={data}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item, index }) => (
          <NewView
            id={item.id}
            index={index}
            onPress={() => handleItemPress(item, index)}
          />
        )}
      />
      {/* 全局唯一的Modal */}
      <Modal
        animationType="fade"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => setModalVisible(false)}
      >
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.5)' }}>
          <View style={{ backgroundColor: 'white', padding: 20, borderRadius: 10 }}>
            <Text>选中ID：{selectedItem?.id}</Text>
            <Text>选中索引：{selectedItem?.index}</Text>
            <TouchableOpacity onPress={() => setModalVisible(false)} style={{ marginTop: 10 }}>
              <Text>关闭</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </View>
  );
};

// 子组件NewView
const NewView = ({ id, index, onPress }) => {
  return (
    <TouchableOpacity onPress={onPress} style={{ padding: 15, borderBottomWidth: 1 }}>
      <Text>{id}</Text>
    </TouchableOpacity>
  );
};

方案二：子组件独立管理自身Modal状态

如果每个项的Modal内容差异较大，可让NewView单独维护自身的显示状态：

// NewView组件代码
import { useState } from 'react';
import { TouchableOpacity, Text, Modal, View } from 'react-native';

const NewView = ({ id, index }) => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const openModal = () => {
    setIsModalVisible(true);
  };

  return (
    <>
      <TouchableOpacity onPress={openModal} style={{ padding: 15, borderBottomWidth: 1 }}>
        <Text>{id}</Text>
      </TouchableOpacity>
      <Modal
        animationType="fade"
        transparent={true}
        visible={isModalVisible}
        onRequestClose={() => setIsModalVisible(false)}
      >
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.5)' }}>
          <View style={{ backgroundColor: 'white', padding: 20, borderRadius: 10 }}>
            <Text>ID：{id}</Text>
            <Text>索引：{index}</Text>
            <TouchableOpacity onPress={() => setIsModalVisible(false)} style={{ marginTop: 10 }}>
              <Text>关闭</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </>
  );
};

额外注意点 #

• 修正了原代码中TouchablOpacity的拼写错误，正确写法为TouchableOpacity。
• 方案一性能更优，适合多数通用场景；方案二适合需要为每个项定制Modal内容的场景。

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