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

时间:2017-10-10 16:45:39

标签: javascript reactjs react-native

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

我检查了组件的所有父ScrollView,并添加了
keyboardShouldPersistTaps ='始终' 但没有效果。有什么建议吗?

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

1 个答案:

答案 0 :(得分:0)

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

  1. this.modalVisibility()
  2. this.props.modalVisibility()
  3. 第二个,附在&#39; X&#39;将调用父级,而第一个将调用方法实例。我们需要查看完整的组件才能知道那里发生了什么。

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