TouchableHighlight需要两个水龙头来关闭模态

Question

我正在使用 react-native-modalbox 组件，并且在模态中有一个X（关闭）视图，用于处理模态关闭。问题是，当点击X时，状态会发生变化，但模态不会关闭，第二次点击可以解决问题。

我检查了组件的所有父ScrollView，并添加了
keyboardShouldPersistTaps =＆＃39;始终＆＃39; 但没有效果。有什么建议吗？

constructor(props) {
        super(props)
        this.state = {
          modalOpen: false,
          swipeToClose: true
        }
  }



  modalVisibility(){
    this.setState({
      modalOpen: !this.state.modalOpen
    })
  }

render() {
   return (
       <Modal
          ref={"modal"}
          isOpen={this.state.modalOpen}
          swipeToClose={false}>
            <TouchableHighlight
              onPress={() => this.modalVisibility()}
              underlayColor="transparent"
              style={styles.closeModal}
              >
              <Text
                X
              </Text>
            </TouchableHighlight>
       </Modal>
)
}

Answer 1

我立即看到的一件事是你以两种不同的方式致电modalVisibility()。

1. this.modalVisibility()
2. this.props.modalVisibility()

第二个，附在＆＃39; X＆＃39;将调用父级，而第一个将调用方法实例。我们需要查看完整的组件才能知道那里发生了什么。

但是，由于Modal的值为isOpen，因此您应该能够在React Dev Tools本身内切换模式可见性，以帮助您对其进行故障排除。