React Native-在IOS上点击退出时关闭模式

Question

我是React Native的新手。我在我的应用程序中添加了一个模态，当我在模态之外点击时，我希望它关闭。但当我点击模态之外时，什么都不会发生。

这是我的代码

import React from 'react';
import { View, Text, TouchableWithoutFeedback } from 'react-native';
import { Button } from 'react-native-elements';
import Modal from 'react-native-modal';
import { style } from './style';
const MenuTask = ({ isVisible, onDisapearCallBack }) => (
<TouchableWithoutFeedback onPress={() => onDisapearCallBack()}>
<Modal
isVisible={isVisible}
animationIn={'zoomInDown'}
animationOut={'zoomOutUp'}
animationInTiming={1000}
animationOutTiming={1000}
backdropTransitionInTiming={1000}
backdropTransitionOutTiming={1000}
>
<TouchableWithoutFeedback>
<View style={style.modal}>
<View style={style.textView}>
<Text style={style.modalTitle}>Que souhaitez vous faire sur la tâche ?</Text>
</View>
<View style={style.buttonView}>
<Button
buttonStyle={style.buttonDelete}
title = "Supprimer"
onPress={() => onDisapearCallBack()}
/>
<Button
buttonStyle={style.buttonChangeStatus}
title = "Changer status"
onPress={() => onDisapearCallBack()}
/>
</View>
</View>
</TouchableWithoutFeedback>
</Modal>
</TouchableWithoutFeedback>
);
export default MenuTask;

你能帮我弄清楚吗。非常感谢：(

---

@ramashish-tomar感谢您的帮助。我试着应用你所说的，但仍然不起作用：(

这是我的代码

import React from 'react';
import { View, Text, TouchableWithoutFeedback } from 'react-native';
import { Button } from 'react-native-elements';
import Modal from 'react-native-modal';
import { style } from './style';
const MenuTask = ({ isVisible, onDisapearCallBack }) => (
<View>
<Modal
isVisible={isVisible}
animationIn={'zoomInDown'}
animationOut={'zoomOutUp'}
animationInTiming={1000}
animationOutTiming={1000}
backdropTransitionInTiming={1000}
backdropTransitionOutTiming={1000}
>
<TouchableWithoutFeedback onPress={() => onDisapearCallBack()}>
<View style={style.modal}>
<TouchableWithoutFeedback>
<View>
<View style={style.textView}>
<Text style={style.modalTitle}>Que souhaitez vous faire sur la tâche ?</Text>
</View>
<View style={style.buttonView}>
<Button
buttonStyle={style.buttonDelete}
title = "Supprimer"
onPress={() => onDisapearCallBack()}
/>
<Button
buttonStyle={style.buttonChangeStatus}
title = "Changer status"
onPress={() => onDisapearCallBack()}
/>
</View>
</View>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
</Modal>
</View>
);
export default MenuTask;

我可以通过点击它或同时点击两个按钮来关闭模态，但不能在它外面。真的很奇怪。

这是模态的屏幕截图：

模式截图

也许你可以帮我提前感谢

Answer 1

您不需要在模态之外使用TouchableWithoutFeedback，因为默认情况下模态覆盖整个屏幕。

你可以试试这样的东西-

import React, { useState } from "react";
import {
View,
Text,
TouchableWithoutFeedback,
StyleSheet,
Button,
Modal,
TouchableOpacity
} from "react-native";
function MenuTask() {
const [isVisible, onDisapearCallBack] = useState(false);
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "orange"
}}
>
<Modal animationType="fade" transparent={true} visible={isVisible}>
<TouchableWithoutFeedback onPress={() => onDisapearCallBack(false)}>
<View style={{ flex: 1, backgroundColor: "rgba(0,0,0,0.7)" }}>
<TouchableWithoutFeedback>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "white",
marginVertical: 150,
marginHorizontal: 10
}}
>
<Text>Modal Content</Text>
</View>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
</Modal>
<Text style={{ color: "white", fontSize: 30 }}>Its page content</Text>
<TouchableOpacity
onPress={() => onDisapearCallBack(true)}
style={{
backgroundColor: "red",
borderRadius: 10,
paddingHorizontal: 30,
paddingVertical: 10,
marginTop: 20
}}
>
<Text style={{ color: "white", fontSize: 18 }}>Open Modal</Text>
</TouchableOpacity>
</View>
);
}
export default MenuTask;