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;