反应原生打开模式不会按下标题后退按钮

问题描述

我使用模态库制作加载组件,加载组件等待 api 调用,当 api 调用没有响应时,我希望用户按下标题后退按钮,他们可以继续其他屏幕问题是模态正在打开并且不能按下标题后退按钮,我尝试将边距或填充到模态,但将模态锁定到所有屏幕,我在打开加载组件时使用屏幕图片下方的本机导航和自定义标题

红色组件是我打开的加载组件,我想按下标题左侧的后退按钮并返回上一屏幕,然后将模态锁定到所有屏幕,而不是在加载组件打开时按下该按钮,我该如何按下后退按钮

>

enter image description here

我的加载组件是;

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,}}>
          <SkypeIndicator color={colors[indicatorColor]} />
        </View>
      </View>
    </Modal>
  );
};

解决方法

Modal 会遮挡屏幕,您必须先取消 Modal,然后用户才能在屏幕上进行交互。为此,您可能需要在模态上添加取消/关闭按钮。 其他选项是 OnBackDropPressed 按下后退按钮 等

参考:https://github.com/react-native-modal/react-native-modal#available-props