javascript - 通过单击覆盖来关闭 react native 模式？

Question

是否可以关闭react native modal当transparent选项为true时点击叠加层？文档没有提供任何相关信息。可能吗？

Answer 1

如果我理解正确的话，您希望当用户在模态之外单击时关闭模态，对吗？

如果是的话，我前段时间搜索过这个，我记得的唯一解决方案就是这个(这是到目前为止我一直在使用):

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 内部工作。

如果您有更好的解决方案，请在此分享。