Reactjs 如何关闭react native中的模态

我是一个新手，会做出反应。我想在reactnative中按下模态外部时关闭模态组件。下面是我的代码

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

状态={
visibleModal:false，
};
_hideModal（）{
这是我的国家({
visibleModal:是的，
})
}
render（）{
返回(
情态背后的文本
{this.\u renderButton（'BUTTON'，（）=>this.setState（{visibleModel:true}））}
{this.\u hideModal（）}}>
);
}

---

}

只需在模态中添加此道具即可

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

按下“后退”按钮将关闭您的模式

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

{this.visibleModel（false）；}
>

编辑

上述代码将只在Android上工作，根据

对双方来说

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

<TouchableOpacity
    onPress={() => {
        this.setState({visibleModal: false})
    } }>
    <Image
        style={[styles.modalBackIcon]}
        source={require('../../theme/images/back-icon.png')} />
</TouchableOpacity>

{
this.setState（{visibleModel:false}）
} }>

问题：

单击模态外部时关闭模态

解决方案：

只需在无反馈的情况下删除Touchable上的函数调用，它就会工作

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

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

{}>

您还没有指定；）我应该在modalLet us内部还是外部附上touchableopacity。OP询问如何通过点击背景关闭模式。你还没有回答他的问题。

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

this.setState({ visibleModal: false });