通过单击叠加关闭反应本机模式？ [英] Close react native modal by clicking on overlay?

问题描述

是否可以通过点击关闭反应原生模式在透明选项 true 时覆盖？文档没有提供任何相关信息。有可能吗？

Is it possible to close react native modal by clicking on overlay when transparent option is true? Documentation doesn't provide anything about it. Is it possible?

推荐答案

如果我理解正确，你想在用户点击它时关闭模态，对吧？

If I understood correctly, you want to close the modal when the user clicks outside of it, right ?

如果是的话，我前段时间搜索过这个问题，我记得的唯一解决方案就是这个（这是我用过的
）到目前为止）：

If yes, I searched for this some time ago and the only solution that I remember was this one (which is the one that I've been using so far):

render() { 
  if (!this.state.modalVisible)
    return null
  return (
     <View>
        <Modal 
          animationType="fade"
          transparent={true}
          visible={this.state.modalVisible}
          onRequestClose={() => {this.setModalVisible(false)}}
        >
          <TouchableOpacity 
            style={styles.container} 
            activeOpacity={1} 
            onPressOut={() => {this.setModalVisible(false)}}
          >
            <ScrollView 
              directionalLockEnabled={true} 
              contentContainerStyle={styles.scrollModal}
            >
              <TouchableWithoutFeedback>
                <View style={styles.modalContainer}>
                  // Here you put the content of your modal.
                </View>
              </TouchableWithoutFeedback>
            </ScrollView>
          </TouchableOpacity>   
        </Modal> 
     </View>
  )
} 

// Then on setModalVisible(), you do everything that you need to do when closing or opening the modal.
setModalVisible(visible) {
    this.setState({
        modalVisible: visible,
    })
}

说明

这基本上是在整个屏幕上使用TouchableOpacity来获取用户点击关闭的时间模态。 TouchableWithoutFeedback是为了避免TouchableOpacity在Modal内部工作。

Explanation

This is basically using a TouchableOpacity in the whole screen to get when the user clicks to close the modal. The TouchableWithoutFeedback is to avoid the TouchableOpacity to work inside of the Modal.

如果你有更好的解决方案，请在这里分享。

这篇关于通过单击叠加关闭反应本机模式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！