在 React Native 中单击 <Modal> 之外时关闭模态

问题描述

我正在用 React Native 制作一个应用程序。在这里，我可以单击打开模态，也可以在模态内部单击时关闭模态。但我也想在它外面点击时关闭它。

下面是我的代码：

import React,{ useState } from 'react';
import { View,Text,TouchableOpacity,Modal,TouchableWithoutFeedback,Alert } from 'react-native';


function Main({ navigation }) {
    const [modalVisible,setModalVisible] = useState(false);

    return (
        {/* This is not working */}
        <TouchableWithoutFeedback onPress={() => { setModalVisible(!modalVisible); }}>
            <View>

                {/* MODAL FOR LANGUAGE */}

                <Modal animationType="slide" transparent={true} visible={modalVisible}>
                    <View>
                        <Text>Select Language</Text>
                    </View>

                    {/* Close modal*/}
                    <TouchableOpacity onPress={() => { setModalVisible(!modalVisible); }} >
                        <Text>English</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => { setModalVisible(!modalVisible); }} >
                        <Text>hindi</Text>
                    </TouchableOpacity>

                </Modal>
                <View>

                   {/* Open modal*/}
                    <TouchableOpacity onPress={() => { setModalVisible(true); }} >
                        <Text>Language</Text>
                    </TouchableOpacity>

            </View>
        </TouchableWithoutFeedback>
    );
}

我希望从评论中你可以看到我在点击 <Text>Language</Text> 时打开了模态，而当我点击 <Text>English</Text> 和 <Text>hindi</Text> 时我能够关闭模态，它在里面模态。

要在模态之外单击时关闭模态，我使用了 <TouchableWithoutFeedback onPress={() => { setModalVisible(!modalVisible); }}> ，但这不起作用。

注意：我特意删除了所有样式部分，这样我的代码看起来很干净，而且我可以清楚地说明我想要什么。

解决方法

我相信当模态可见时，它会覆盖整个屏幕，而您无权访问底层组件。您是否尝试在模态中创建背景？

这是一个例子：

return (
  <View>
    {/* MODAL FOR LANGUAGE */}

    <View>
      {/* Open modal*/}
      <TouchableOpacity
        onPress={() => {
          this.setModalVisible(true);
        }}
      >
        <Text>Language</Text>
      </TouchableOpacity>
    </View>

    <Modal animationType="slide" transparent={true} visible={modalVisible}>
      <TouchableOpacity
        activeOpacity={0.5}
        style={{
          height: '100%',backgroundColor: '#e74655',opacity: 0.5
        }}
        onPress={() => {
          this.setModalVisible(!modalVisible);
        }}
      />
      <View
        style={{
          width: '100%',height: '80%',borderWidth: 1,borderColor: '#000',position: 'absolute',bottom: 0,backgroundColor: '#fff'
        }}
      >
        <View>
          <Text>Select Language</Text>
        </View>

        {/* Close modal*/}
        <TouchableOpacity
          onPress={() => {
            this.setModalVisible(!modalVisible);
          }}
        >
          <Text>English</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {
            this.setModalVisible(!modalVisible);
          }}
        >
          <Text>Hindi</Text>
        </TouchableOpacity>
      </View>
    </Modal>
  </View>
)

产生这个result，其中红色区域是可触摸的，当你按下它时会关闭模态