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;

[请您帮我弄清楚。非常感谢:)

Answer 1

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

您可以尝试这样的事情-

i

mport 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;