Question

我制作了一个包含一些数据的平面列表。我想为 flatlist 中的每个项目制作一个弹出信息。所以我尝试将 Modal 放入 renderItem 函数中，但是当它设置模态状态可见时，它将显示我的平面列表中的所有信息。我认为它应该通过 id 或类似的东西设置模态可见状态，但我不知道该怎么做。有什么建议吗？

我的渲染项：

 function RenderItem({ item }) {
    return (
        <View>
            <Modal
                animationType='slide'
                transparent={true}
                visible={infoModal}>
                <View style={styles.informationContainer}>
                    <View style={styles.informationBox}>
                        <Text>{item.file.displayName}</Text>
                        <Button title='         OK         ' onPress={() => setInfoModal(false)} />

                    </View>
                </View>
            </Modal>
            <TouchableOpacity style={styles.listBox} onPress={() => setInfoModal(true)}>
                <View>
                    <Text numberOfLines={1} style={styles.listText}>{item.file.displayName}</Text>
                    <Text style={{ width: 200, color: 'rgba(0, 0, 0, 0.5)' }}>{item.certificateName}</Text>
                </View>
                <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
                    <TouchableOpacity>
                        <Icon name='search' color='black' size={25} />
                    </TouchableOpacity>
                    <Text>       </Text>
                    <TouchableOpacity onPress={() => handleDownload(item)}>
                        <Icon name='download' color='black' size={25} />
                    </TouchableOpacity>
                    <Text>   </Text>
                </View>
            </TouchableOpacity>
        </View>
    )
}

Answer 1

不是设置一个关于是否应该出现 Modal 的简单布尔值，您可以设置某种可识别的值，告诉它要加载什么项目（否则保留 undefined）。

基本示例：


const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

export default function App() {
  const [modalInfo, setModalInfo] = React.useState(undefined);
  
const renderItem = ({ item }) => (
    <TouchableOpacity onPress={() => setModalInfo(item.title)}><Text>{item.title}</Text></TouchableOpacity>
  );

  return (
    <View style={styles.container}>
          <Modal visible={modalInfo !== undefined}>
            <View style={[{borderWidth: 1},styles.centeredView]}>
              <Text>{modalInfo}</Text>
              <TouchableOpacity onPress={() => setModalInfo(undefined)}><Text>Close</Text></TouchableOpacity>
            </View>
          </Modal>
       <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

React Native：如何将弹出式模态放入平面列表

1 个答案: