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

Posted

技术标签:

【中文标题】如何在本机反应中关闭模态【英文标题】:How to close the modal in react native 【发布时间】:2017-12-27 05:02:13 【问题描述】:

我是反应原生开发的新手。我想在反应式中按下模态外部时关闭模态组件。下面是我的代码。

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

【问题讨论】:

【参考方案1】:

只需在 Modal 中添加这个道具

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

它会在按下返回按钮时关闭你的模式

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

编辑

根据document,以上代码仅适用于android

对于两者来说,

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

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

【讨论】:

你还没有指定 ;) 我应该将 touchableopacity 包含在模态的内部还是外部 让我们continue this discussion in chat. OP 询问如何通过单击背景来关闭模式。你还没有回答他的问题。【参考方案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得到假值

为了经验

this.setState( visibleModal: false );

【讨论】:

【参考方案3】:

问题:

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

解决方案:

只需删除 TouchableWithoutFeedback 上的函数调用,它就会起作用..

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

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

【讨论】:

以上是关于如何在本机反应中关闭模态的主要内容,如果未能解决你的问题,请参考以下文章

如何在 SwiftUI 中关闭 ResearchKit 模态视图?

如何从 ParentViewController 中关闭 formSheet 模态?

发出警报后,我无法在我的反应本机应用程序中关闭我的键盘

如何在另一个线程中关闭 MFC 模态对话框并获得对话框返回值?

如何从自己的子视图控制器中关闭模态 uitabbarcontroller

如何在移动 android/iOs(本机应用程序)中关闭 webview