通过单击覆盖关闭本机模态反应? [英] Close react native modal by clicking on overlay?

问题描述

是否可以通过点击关闭react native modal当 transparent 选项为 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屋！