在模态之外点击以关闭模态(react-native-modal) [英] Tap outside of modal to close modal (react-native-modal)

问题描述

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

Anyone has experience of implementing react-native-modal? While I'm using it, modal isn't closed when I tap outside of modal.

这是我尝试过的

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

这是我要显示模态的屏幕.

Here is my the screen where I want to show my modal.

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

Here is modal component : 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>

谢谢！！

推荐答案

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

I just figured out why onBackdropPress = {() => console.log("Pressed")} didn't work..!!! onBackdropPress property was added since its version 3.xx and I was using 2.5.0 version.

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

So yarn update react-native-modal solved the issue.

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

If anyone encounters the problem that the library/component doesn't work as expected as you seen on documentation, try to check your package version number!

干杯！

这篇关于在模态之外点击以关闭模态(react-native-modal)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！