react-native - 在外部单击时关闭模式在本机反应

Question

我正在制作一个反应原生的应用程序。在这里，我可以单击打开模态，也可以在单击模态内部时关闭模态。但我也想在模式外部单击时关闭它。

下面是我的代码：

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); }}>，但这不起作用。

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

Answer 1

我相信当模态可见时，它会覆盖所有屏幕，并且您无法访问底层组件。您是否尝试在模态框内创建背景？

这是一个例子：

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>
)

这会产生这个结果，红色区域是可触摸的，当你按下它时会关闭模式