Question

正如标题所说，我需要为要显示的所选尺寸的每个列表项创建一个模态弹出窗口。我正在使用 react-native-popup-dialog 但没有结果。你可以帮帮我吗？这是我的代码：

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

我相信您可以在列表组件中声明一个模式，并在用户按下 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>
  );
}

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 是为您准备的工作演示。

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

1 个答案: