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;

我可以通过单击它或两个按钮来关闭模式，但不能在它之外。真的很奇怪。

这是模态的截图：

Modal screenshot

也许你可以帮助我 提前致谢

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;