反应本机打开模式不会按下标题后退按钮

Question

我使用模态基础和加载组件等待api调用，当api调用没有答案时，我希望用户按下标题后退按钮，他们可以继续其他屏幕问题是模态正在打开并且无法按下标题后退按钮，我尝试了模式的边距或填充，但模式锁定到所有屏幕，我在打开加载组件时使用反应本机导航和屏幕图片下方的自定义标题

红色组件是我打开的加载组件，我想按下标题左侧后退按钮并返回到上一个屏幕，rn 模态锁定到所有屏幕，并且在加载组件打开时不按下后退按钮

我的加载组件是；

import React from 'react';
import {View} from 'react-native';
import Modal from 'react-native-modal';
import {SkypeIndicator} from 'react-native-indicators';

export const Loading = (props) => {
  return (
    <Modal
      animationType="none"
      transparent={true}
      visible={visible}
      supportedOrientations={['portrait']}
      onRequestClose={() => {}}>
      <View
        style={{
          flex: 1,
          backgroundColor: 'yellow',
          marginTop: 150,
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <View
          style={{
            width: 70,
            height: 70,
            backgroundColor: 'blue',
            borderRadius: 70,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <SkypeIndicator color={colors[indicatorColor]} />
        </View>
      </View>
    </Modal>
  );
};

Answer 1

模态框会阻塞屏幕，您必须先取消模态框，然后用户才能在屏幕上进行交互。为此，您可能需要在模式上添加取消/关闭按钮。 其他选项有

OnBackDropPressed

,

OnBackButtonPressed

,

onRequestClose

等等

参考：https://github.com/react-native-modal/react-native-modal#available-props / https://reactnative.dev/docs/modal

Answer 2

我不知道现在回复是否有意义。但我从你的问题（加载Comp）本身得到了工作思路。只需将 Modal 的 onRequestClose 属性作为目标，如下所示：

import React from "react";
import { View } from "react-native";
import Modal from "react-native-modal";
import { SkypeIndicator } from "react-native-indicators";
//import useNavigation hook
import { useNavigation } from "@react-navigation/native";

export const Loading = (props) => {
  //create an instance of the hook
  const navigation = useNavigation();
  const handleOnRequest = () => {
    //Now here you can do whatever you like
    navigation.goBack(); //return to the previous screen
    //OR you may wish to just close the modal on backPress

    //For that you may pass onBackPress prop on your Loading component
    //and reverse the modal visibility like below
    //<Loading onBackPress={()=>setVisible(false)}
    props.onBackPress && props.onBackPress();
  };
  return (
    <Modal
      animationType="none"
      transparent={true}
      visible={visible}
      supportedOrientations={["portrait"]}
      onRequestClose={handleOnRequest}
    >
      <View
        style={{
          flex: 1,
          backgroundColor: "yellow",
          marginTop: 150,
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <View
          style={{
            width: 70,
            height: 70,
            backgroundColor: "blue",
            borderRadius: 70,
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <SkypeIndicator color={colors[indicatorColor]} />
        </View>
      </View>
    </Modal>
  );
};