在新闻发布会上对原生TouchableOpacity做出反应

Question

我有一个模态-反应本机模态-我想要当它弹出时，用户从模态的框中按出来，它应该会消失模态，所以我使用了TouchableOpacity，只有当你点击框内时它才能工作，请查看我的图像附加文件。这是我的代码：

import Modal from 'react-native-modal';
const TeskModal = ({isVisibles, onCallBaclk, deleteCurrenteTask , hideit}) => (
<View>
<TouchableOpacity onPress ={ () => hideit()}>
<Modal
isVisible = {isVisibles}
animationIn = {'zoomInDown'}
animationOut = {'zoomOutUp'}
animationInTiming = {500}
animationOutTiming = {500}
backdropTransitionInTiming = {1000}
backdropTransitionOutTiming = {1000}
>
<TouchableOpacity onPress ={ () => hideit()}>
<View style={style.modal}>
<View style={style.textView}>
<Text>
Change State Or Delete.
</Text>
</View>
<View style = {style.buttonView} >
<Button style={style.buttonChangeStatus} title ="Delete Task" onPress ={ () => deleteCurrenteTask()} />
<Button style={style.buttondelete} title = " Change State" onPress ={ () => onCallBaclk()} />
</View>
</View>
</TouchableOpacity>
</Modal>
</TouchableOpacity>
</View>
);
export default TeskModal;

这是我的图像

你能帮我解决这个问题吗。

Answer 1

在react本机模式中有一个名为onBackdropPress的函数。当背景(即在模态区域之外(被按下时，您可以调用一个函数。

<Modal 
{... otherProps }
onBackdropPress = {() => hideIt()}
/>

上面的代码将为您执行此操作。

Answer 2

有一个可以传递的道具，它将负责在用户按下模式框外时执行传递给道具的函数。这样你就不需要hideit((}>等

例如：

<Modal 
isVisible={isVisible}
{...otherProps}
onBackdropPress={this.hideit()}>
{...content}
</Modal>

我希望这能有所帮助。如果这是你想要的，请告诉我。