点击模态外部以关闭模态（react-native-modal）答案

【问题标题】：Tap outside of modal to close modal (react-native-modal)点击模态外部以关闭模态（react-native-modal）
【发布时间】：2018-03-28 06:46:10
【问题描述】：

有人有实施react-native-modal 的经验吗？在我使用它时，当我在模态之外点击时，模态不会关闭。

这是我尝试过的

添加 onBackdropPress(() => {this.props.hideModal()})
在组件内外添加 TouchableWithoutFeedback
和许多其他方法...

这是我要显示模式的屏幕。

render() {
    return (
        <View style={{flex: 1}}>
            <ScrollView>
               // CONTENT HERE
               {this._renderModal()} //rendering modal here
               <FABs onFABsPress={this._showModal} /> // I open Modal when I press the FABs button
            </ScrollView>
        </View>
    )
);

_renderModal = () => {
    return (
      <CameraImageSelectModal
        hideModal={this._hideModal}
        isModalVisible={this.state.isModalVisible}
        navigation={this.props.navigation}
      />
    )
}

这里是模态组件：CameraImageSelectModal.js

render() {
    let { isModalVisible } = this.props;
    return (
      <View>
        <Modal
          isVisible={isModalVisible}
          onBackdropPress={() => {console.log('hey')}}>
          transparent={true}>
          <View style={styles.modalContainer}>
            <View style={styles.modalTitleTextContainer}>
              <Text style={styles.modalTitleText}>Hello World</Text>
            </View>
            <View style={styles.modalContentTextContainer}>
              <Text style={styles.modalContentText}></Text>
            </View>
            <View style={styles.modalButtonContainer}>
              <Button transparent onPress={this._handleCameraPress}>
                <Text style={[styles.modalText, styles.black]}>Camera</Text>
              </Button>
              <Button transparent onPress={this._handleAlbumPress}>
                <Text style={styles.modalText}>Album</Text>
              </Button>
            </View>
          </View>
        </Modal>
      </View>

谢谢！！

【问题讨论】：

标签： reactjs react-native react-modal

【解决方案1】：

我认为模态框没有内置功能，但您可以创建自己的组件。这是一个快速实现。您可能必须弄乱填充和边距才能获得您喜欢的效果，但这将允许在按下外部时关闭模式。

import React, { Component } from "react"
import { Modal, StyleSheet, View, TouchableHighlight } from "react-native"

const styles = StyleSheet.create({
  container: {
    zIndex: 1,
    margin: 25,
    backgroundColor: "white"
  },
  background: {
    flex: 1
  },
  outerContainer: {
    position: "absolute", 
    top: 0, 
    left: 0, 
    right: 0, 
    bottom: 0, 
    justifyContent: "center"
  }
})

const MyModal = props => (
  <Modal transparent={true} animationType={"slide"} visible={props.visible} onRequestClose={() => props.onRequestClose()}>
    <TouchableHighlight style={styles.background} onPress={() => props.onRequestClose()} underlayColor={"transparent"}>
      <View />
    </TouchableHighlight>
    <View style={ styles.outerContainer }>
      <View style={styles.container}>
        {props.children}
      </View>
    </View>
  </Modal>
)

export { MyModal }

【讨论】：

这行得通吗？现在是晚上。我将在 tmr 线上对其进行测试。谢谢！
抱歉，我刚刚意识到您使用的是 react-native-modal 包。我以为你只是在使用 react native 的内置模式。这不适用于该软件包，但您仍然可以使用它。
不用抱歉，朋友。 :) 我刚刚弄清楚并发布了我的答案。我不能接受你对这个问题的回答，但你的回答绝对有价值！投票赞成:)

【解决方案2】：

我刚刚弄清楚为什么onBackdropPress = {() => console.log("Pressed")} 不起作用..!!! onBackdropPress 属性是从 3.xx 版本开始添加的，我使用的是 2.5.0 版本。

所以yarn update react-native-modal 解决了这个问题。

如果有人遇到库/组件无法按您在文档中看到的预期工作的问题，请尝试检查您的包版本号！

干杯！

【讨论】：

如果您想使用来自@react-native-community 的react-native-modal，这将起作用。但它不适用于 react-native 的内置 Modal