时间戳

首页 > 解决方案 > 在新闻问题上对原生 TouchableOpacity 做出反应

reactjs - 在新闻问题上对原生 TouchableOpacity 做出反应

问题描述

我有一个模态 - react-native-modal - 我想要当它弹出并且用户按下模态框时应该消失模态，所以我使用了 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;

这是我的形象

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

标签： reactjsreact-native

解决方案

在 react-native-modal 中有一个叫做 onBackdropPress 的函数。您可以在按下背景（即在模式区域之外）时调用函数。

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

上面的代码将为您完成。

推荐阅读