Question

我有一个模态-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;

here is my image

请您帮我解决这个问题。

Answer 1

在react-native-modal中有一个称为onBackdropPress的函数。您可以在按下背景幕（即模态区域的外部）时调用函数。

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

上面的代码对您有用。

Answer 2

有一个可以传递的道具，当用户在模式框外按下时，它将执行传递给该道具的功能。这样，您将不需要hideit（）}>等。

例如：

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

我希望这会有所帮助。请让我知道这是否是您想要的。

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

2 个答案: