React Native Expo中如何将FlatList数据传入Modal

步骤1：修改FlatList项的点击事件，传递选中的菜单名称 #

在FlatList的TouchableOpacity点击回调里，同时更新选中名称的状态并打开Modal：

onPress={() => {
  setName(item.name);
  setModalVisible(true);
}}

步骤2：让renderForm函数访问组件状态 #

把renderForm函数移到Home组件内部，这样它就能直接读取name、modalVisible状态，以及调用setModalVisible方法。

步骤3：在Modal中展示选中的菜单名称 #

在Modal的合适位置插入显示name的文本，比如修改标题或者补充说明：

<Text
  style={{
    ...FONTS.h2,
    color: COLORS.black,
    fontWeight: '800'
  }}
>
  Donation Form - {name}
</Text>

修改后的完整代码示例 #

const Home = ({ navigation }) => {
  const [modalVisible, setModalVisible] = useState(false)
  const [name, setName] = React.useState("")

  // 将renderForm移至组件内部，直接访问状态
  function renderForm() {
    return (
      <Modal
        animationType="slide"
        visible={modalVisible}
        transparent={true}
        onRequestClose={() => {
          setModalVisible(!modalVisible);
        }}
      >
        <View
          style={{
            flex: 1,
            marginTop: SIZES.radius,
            backgroundColor: COLORS.gray3,
            borderRadius: SIZES.radius2,
          }}
        >
          <TouchableOpacity
            onPress={() => setModalVisible(!modalVisible)}
            style={{
              padding: SIZES.radius
            }}
          >
            <Image 
              source={icons.cross}
              style={{
                height: 23,
                width: 23,
                tintColor: COLORS.darkGray2
              }}
            />
          </TouchableOpacity>
          <View 
            style={{
              marginTop: -SIZES.radius,
              padding: SIZES.base,
              marginBottom: SIZES.padding
            }}
          >
            <Text
              style={{
                ...FONTS.h2,
                color: COLORS.black,
                fontWeight: '800'
              }}
            >
              Donation Form - {name}
            </Text>
            <Text
              style={{
                ...FONTS.body3,
                color: COLORS.gray2,
              }}
            >
              Please fill in the required information for {name}..
            </Text>
          </View>
        </View>
      </Modal>
    )
  }
  
  return (
    <View style={style.body}>
      {/*background to style the curve*/}
      <View
        style={{
          ...StyleSheet.absoluteFillObject,
          backgroundColor: COLORS.primary
        }}
      />
      {/*View to style the Bottom curve*/}
      <View
        style={{
          flex: 1,
          backgroundColor: COLORS.gray3,borderTopLeftRadius: SIZES.padding2
        }}
      >
        <View
          style={{
            height: 330,
            marginTop: SIZES.radius,
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <FlatList 
            scrollEnabled={false}
            showsVerticalScrollIndicator={false}
            data={donateType}
            keyExtractor={item => `${item.id}`}
            numColumns={2}
            renderItem={({ item, index }) => {
              return (
                <TouchableOpacity
                  style={{
                    height: 111,
                    width: 180,
                    borderRadius: SIZES.radius2,
                    paddingHorizontal: 4,
                    justifyContent: 'center',
                    alignItems: 'center'
                  }}
                  onPress={() => {
                    setName(item.name);
                    setModalVisible(true);
                  }}
                >
                  <ImageBackground
                    source={item.photo} 
                    resizeMode='cover'
                    style={{
                      height: 100,
                      width: '100%',
                      alignItems: 'center',
                    }}
                    imageStyle={{ 
                      borderRadius: SIZES.radius    
                    }}
                  >          
                    <Image
                      source={item.icon}
                      style={{
                        height: 50,
                        width: 50,
                        marginTop: SIZES.base,
                        tintColor: COLORS.gray3,
                      }}
                    />
                    <Text
                      style={{
                        ...FONTS.h3,
                        color: COLORS.gray3,
                        fontWeight: 'bold'
                      }}
                    >
                      {item.name}
                    </Text>
                  </ImageBackground>
                </TouchableOpacity>
              )
            }}
          />
        </View>
      </View>
      {/* 渲染Modal */}
      {renderForm()}
    </View>
  )
}

核心逻辑说明 #

• 点击菜单项时，先通过setName把选中的名称存入状态，再打开Modal
• renderForm放在组件内部后，可直接读取组件的状态变量
• 在Modal中通过{name}插入选中的名称，可根据需求调整显示位置和样式

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