Question

我是新手，对原生的发展做出反应。我想在反应中按下模态外部关闭模态组件。以下是我的代码。

state = {
    visibleModal : false,
};

_hideModal(){
  this.setState({
    visibleModal: true,
  })
}


render(){
    return(
        <View style={
            [styles.container,
                {backgroundColor: this.state.visibleModal ? 'rgba(47, 60, 73, 0.75)': 'white'}
            ]}>

            <Text>Text Behind Modal</Text>

            { this._renderButton('BUTTON', () => this.setState({ visibleModal: true}) ) }
            <TouchableWithoutFeedback onPress={() => {this._hideModal()}}>
            <Modal animationType={"slide"}
                   transparent={true}
                   visible={this.state.visibleModal}>

                      <View style={styles.modalContent}>
                          <Row />
                      </View>

            </Modal>
          </TouchableWithoutFeedback>
        </View>
    );
}

}

Answer 1

只需在Modal中添加此道具

IEnumerable<string>

按下后退按钮

将关闭你的模态

onRequestClose={() => { this.visibleModal(false); } }

修改

以上代码仅适用于document上的Android。

对于两者，

您可以添加自定义按钮以关闭模式

<Modal animationType={"slide"} transparent={true} visible={this.state.visibleModal} onRequestClose={() => { this.visibleModal(false); } } >

Answer 2

问题：

在模态外部单击时关闭模态。

解决方案：

只需删除对TouchableWithoutFeedback的函数调用，它将起作用。

    <TouchableWithoutFeedback onPress={() => {}}>
  <Modal animationType={"slide"}
               transparent={true}
               visible={this.state.visibleModal}>

                  <View style={styles.modalContent}>
                      <Row />
                  </View>
        </Modal>
</TouchableWithoutFeedback>

Answer 3

 <Modal animationType={"slide"}
           transparent={true}
           visible={this.state.visibleModal}>
              <TouchableWithoutFeedback onPress={() => {this.close_modal()}}>
                 <View style={styles.modalContent}>
                     ....
                 </View>
             </TouchableWithoutFeedback>
    </Modal>

这是我的代码示例，当您点击外部以关闭模态时

比 close_modal 函数 visibleModal 获得错误的值

实验

this.setState({ visibleModal: false });

如何关闭原生态的模态

3 个答案: