活动指示器不包含React-Native上的标头

Question

我想在调用api时设置活动指示器，以便用户无法执行任何操作，问题是当我调用api时，活动指示器不包括标头（使用react-navigation），因此在调用时api，用户可以返回上一屏幕，据此发生意外错误。

这里是代码：

import React, { useEffect, useState } from 'react';
import { View, ActivityIndicator } from 'react-native';

const Screen1 = () => {
  const [isLoading, setLoading] = useState(false);
  useEffect(() => {
    const fn = async () => {
      setLoading(true);
      const apiRes = await fetch(...);
      setLoading(false);
    };
    fn();
  }, []);
  const renderIndicator = () => {
    return (
      <View style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, alignItems: 'center', justifyContent: 'center' }}>
       <ActivityIndicator />
      </View>
    );
  }
  return (
    <>
      <View style={{ flex: 1, backgroundColor: 'orange' }}>
        {...}
      </View>
      {isLoading && renderIndicator()}
    </>
  );
}
export default Screen1;

这里的主要问题是<View style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, alignItems: 'center', justifyContent: 'center' }}>不包含标头（反应导航）容器。我想要活动指示器包含标题栏。

我可以隐藏标准标题容器并使用自定义标题。但要求是使用标准标头，而不是自定义标头。

Answer 1

对于您的问题，我有一个非常简单的解决方案，就是使用“模态”。只需制作一个名为Loader的组件或任何您想命名的组件并将此代码粘贴到其中我已经使用了react-native-indicators，但是如果需要，您可以使用react-native的ActivityIndi​​catorLoader.js