选择列表项时如何添加弹出模式反应本机并显示其详细信息

Question

As title says, I need to create a modal popup for every list item for the selected sizes to be displayed. I'm using the react-native-popup-dialog but without results. Could you help me? Here's my code:

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>
        );
    }

Answer 1

I believe you can declare a single modal in your list component and show or hide the modal when the user presses the listItem. Also, make the pressed item active and pass the item to your modal so that the modal can show the details of the active item.

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>
  );
}

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>
  );
}

Here is a working demo for you.

Answer 2

I made something similar in my react-native project and do this:

1. Made with {useState} the variables i need in my modal, example, the name of my component
2. Wrap the ListItem component in a Pressable component
3. Put the onPress={() => {//Put your code here}} function, inside you will put the SetVariable of the variable you want in the modal
4. The Pressable will update the variable with the wich you want in the modal