Question

我有FlatList，我想在Modal中打开每个FlatList项目以查看详细信息。在此示例中，我尝试单击{rowData.data.display_name}以查看Modal内的{rowData.data.display_name}。我从API获取数据，当我打开Modal时，它与我点击的项目不同。我不知道如何设置项目ID以查看Modal内的相同项目？任何帮助，将不胜感激！这是我的代码：

<FlatList
          data={this.state._data}
          renderItem={({item: rowData}) => {
            return (
                <View style={styles.container}>

                <TouchableOpacity
                onPress={this.openModal}>
                <Text style={styles.title}>
                    {rowData.data.display_name}
                  </Text>   
                </TouchableOpacity>

            <Modal
          style={styles.modal}
         ref={(modal) => this.modal = modal}
                coverScreen={true}
          swipeToClose={this.state.swipeToClose}
          onClosed={this.onClose}
          onOpened={this.onOpen}
          onClosingState={this.onClosingState}>
            <Text style={styles.text}>                     
          {rowData.data.display_name}
       </Text>
        </Modal>
           </View>
            );
          }}
          keyExtractor={(item, index) => index}
        />

Answer 1

在我看来，你应该把Modal放在FlatList之外。你编写它的方式，每次创建列表中的新项目时，你都会覆盖“this.modal”。

然后您只需接受在Modal组件内的openModal函数上更改Modal的文本（可能是通过状态），并在您的renderItem上，更改onPress以从您希望模式显示的容器中传递信息。

            onPress={()=> this.openModal(rowData.data)}>

无法将FlatList项目中的详细信息传递给模态

1 个答案: