点击列表项ListItem后Modal模态框未正常显示问题咨询

问题根因 #

Modal 组件仅在 render() 方法返回的渲染树中才会被框架渲染到界面，你把 Modal 写在点击事件回调 showModal 里返回，回调的返回值不会被插入到渲染树中，因此即使状态更新为 true，Modal 也不会显示。

修复步骤 #

1. 调整 state 结构 #

新增字段存储当前点击的列表项数据，方便 Modal 展示对应内容：

this.state = {
  modalVisible: false,
  activeItem: null
};

2. 调整 showModal 方法 #

仅做状态更新，不返回组件：

showModal(item) {
  this.setState({
    modalVisible: true,
    activeItem: item
  });
}

3. 移动 Modal 到主 render 方法 #

将 Modal 和列表组件平级放在 render 返回的根节点下：

render() {
  return (
    <View style={{flex: 1}}>
      {/* 原有列表渲染代码，比如 FlatList */}
      <FlatList
        renderItem={({item}) => this.renderItem(item)}
        // 其余列表配置项
      />

      <Modal
        animationType="slide"
        visible={this.state.modalVisible}
        onRequestClose={() => {
          this.setState({modalVisible: false, activeItem: null});
        }}>
        <Text> Modal is Visible !</Text>
        {/* 可通过 this.state.activeItem 读取当前点击项的信息展示 */}
      </Modal>
    </View>
  )
}

内容的提问来源于stack exchange，提问作者Frank Boccia