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;

我可以通過單擊它或兩個按鈕來關閉模式，但不能在它之外。 真奇怪。

這是模態的屏幕截圖：

模態截圖

也許你可以幫助我 在此先感謝

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;