在 react native 中单击外部时关闭模态<Modal>

Question

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

以下是我的代码：

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

我相信当modal可见时，它会覆盖所有屏幕，并且您无法访问底层组件。你有没有试着在modal内部创建一个背景？

这里有一个例子：

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

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