如何在本机反应中关闭模态

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

}

原文由 HSBP 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只需在 Modal 中添加这个道具

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

它会在按下后退按钮时关闭你的模式

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

编辑

根据 文档，以上代码仅适用于 Android。

对彼此而言，

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

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

原文由 Jigar Shah 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

比 close_modal 函数 visibleModal 得到假值

对于 exp。

 this.setState({ visibleModal: false });

原文由 Samira Gheibipour 发布，翻译遵循 CC BY-SA 4.0 许可协议