如何在 onPress 之后显示 React Native ActivityIndi​​cator 以显示正在加载的内容？

Question

在屏幕 1 和屏幕 2 之间导航时，用户按下按钮。按下后，有时可能需要几秒钟才能应用程序将它们导航到下一个屏幕，因此看起来没有任何事情发生。在导航到下一页之前，我将如何使活动指示器出现？我已经让 ActivityIndi​​cator 在其他内容加载时工作，但直到他们导航到该页面。

下面是我在加载地图页面时启动活动指示器的代码：

  const [isLoading, setIsLoading] = useState(true)

  const renderLoading = () =>  {
        if (isLoading) {
            return (         
            <View style = {{justifyContent: 'center', backgroundColor: '#d3d3d3', textAlign: 'center', height: height, width: width}}>
            <ActivityIndicator
            color = 'black'
            size = 'large'
            animated = {false}
          />
          <Text style = {[ styles.text, {textAlign: 'center'}]}>{i18n.t('loading')}</Text>
          </View>

            );
        }else {
            return null;
        }
    }


     <View style = {styles.container}>
        {renderLoading}
        ....
     </View>

Answer 1

如果您可以控制地图屏幕，我建议您将微调器放在该组件中。换句话说，如果您正在进行渲染，您将能够确定要在哪个阶段显示地图而不是微调器：

function IRenderTheMap(): ReactElement {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // Load/preper/render map data, whatever
    // ..

    // Somehow determine that enough content has loaded
    if (isReadyToShow) setLoading(false);
  }, []);

  if (isLoading) return <Spinner />;
  // otherwise return your result
}

如果您正在使用一些“第三方”组件来呈现地图，它希望有某种回调道具告诉您它是否完成加载。所以检查文档并寻找它。：

function IJustContainTheMap(): ReactElement {
  const [isLoading, setIsLoading] = useState(true);
  
  return (
    <View>
      {isLoading && (
        // Absolutely position the spinner so it's on top of the map
        <OverlaySpinner />
      )}
      <Map onLoadEnd={() => setIsLoading(false)} />
    </View>
  );
}

如果您用于渲染地图的组件不提供该功能……那么我认为您不走运。最好不要让库作者添加“onLoadEnd”道具（或类似道具）或自己渲染微调器。

或者可能总是为库自己添加一项功能，但大多数时候这很难。

Answer 2

从此更新您的代码

<View style = {styles.container}>
   {renderLoading}
   ....
</View>

到这里

<View style = {styles.container}>
   {renderLoading()}
   ....
</View>