Javascript 如何在选择列表项并显示其详细信息时添加弹出模式

正如标题所说，我需要为要显示的选定尺寸的每个列表项创建一个模式弹出窗口。我正在使用react native弹出对话框，但没有结果。你能帮我吗？这是我的密码：

step1 = () => {
        return (
            <View style={{ flex: 8}}>
                <Text h3 style={{ ...styles.title, marginVertical: 10.0 }}>{this.state.user=="User"?"Size":"CargoSize"}</Text>
                <ScrollView>
                    <View style={{ marginHorizontal: 16.0 }}>{
                        this.state.size.map((l, i) => (
                            <ListItem key={i}  onPress={() => this.setState({sizeSelected: i, sizeName: l.title, sizeId: l.id})} underlayColor='transparent'
                            containerStyle={{backgroundColor: this.state.sizeSelected==i?'#F76858':'white', borderWidth: 1.0,
                            borderColor: '#707070', marginBottom: 10.0, paddingVertical: 5.0, paddingHorizontal: 40.0}}>
                                <ListItem.Content>
                                    <View style={{
                                        flexDirection: 'row', alignItems: 'center',
                                        justifyContent: 'center'
                                    }}>
                                        <Text style={styles.textSize}>{l.title}</Text>
                                        <Text style={{ fontSize: 16 }}>{l.example}</Text>
                                    </View>
                                </ListItem.Content>
                            </ListItem>
                        ))
                    }</View>
                </ScrollView>
            </View>
        );
    }

step1=（）=>{
返回(
{this.state.user==“user”？“Size”：“CargoSize”}
{
this.state.size.map（（l，i）=>(
this.setState（{sizeSelected:i，sizeName:l.title，sizeId:l.id}）underlayColor='transparent'
containerStyle={{backgroundColor:this.state.sizeSelected==i？'#F76858'：'white'，borderWidth:1.0，
边框颜色：'#707070'，边框底部：10.0，填充垂直：5.0，填充水平：40.0}>
{l.title}
{l.example}
))
}
);
}

我相信您可以在列表组件中声明一个模式，并在用户按下listItem时显示或隐藏该模式。此外，将按下的项目激活，并将项目传递给您的模态，以便模态可以显示激活项目的详细信息

App.js

export default function App() {
  const [modalVisible, setModalVisible] = React.useState(false);
  const [activeItem, setActiveItem] = React.useState(null);

  const onPress = (item) => {
    setActiveItem(item)
    setModalVisible(true)
  }

  const renderItem = ({ item }) => (
    <TouchableOpacity onPress={()=>onPress(item)}>
      <Item title={item.title} />
    </TouchableOpacity>
  );

  return (
    <View style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
      <Popup modalVisible={modalVisible} setModalVisible={setModalVisible} activeItem={activeItem} />
    </View>
  );
}

导出默认函数App（）{
const[modalVisible，setModalVisible]=React.useState（false）；
const[activeItem，setActiveItem]=React.useState（null）；
const onPress=（项目）=>{
setActiveItem（项目）
setModalVisible（真）
}
常量renderItem=（{item}）=>(
onPress（项目）}>
);
返回(
项目id}
/>
);
}

Modal.js

export default function Popup({modalVisible, setModalVisible, activeItem}) {
  return (
    <View style={styles.centeredView}>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert('Modal has been closed.');
        }}>
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>{activeItem?.title}</Text>

            <TouchableHighlight
              style={{ ...styles.openButton, backgroundColor: '#2196F3' }}
              onPress={() => {
                setModalVisible(!modalVisible);
              }}>
              <Text style={styles.textStyle}>Hide Modal</Text>
            </TouchableHighlight>
          </View>
        </View>
      </Modal>
    </View>
  );
}

导出默认函数弹出窗口（{modalVisible，setModalVisible，activeItem}）{
返回(
{
警报。警报（'模式已关闭'）；
}}>
{activeItem？.title}
{
setModalVisible（！modalVisible）；
}}>
隐藏模态
);
}

这是一个为你工作的演示