如何让 React Native ActivityIndicator 在 onPress 之后出现以显示正在加载？

Question

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

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

  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

从此更新您的代码

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

对此

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

Answer 2

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

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”道具（或类似的）或自己渲染一个微调器。

或者一个人可能总是为图书馆和自己添加一个功能，但大多数时候都很难。

如何让 React Native ActivityIndicator 在 onPress 之后出现以显示正在加载？

How do you make a React Native ActivityIndicator appear after an onPress to show something is loading?

javascript

hook

activity-indicator

react-native

use-effect

如何让 React Native ActivityIndi​​cator 在 onPress 之后出现以显示正在加载？

How do you make a React Native ActivityIndicator appear after an onPress to show something is loading?

javascript

hook

activity-indicator

react-native

use-effect

如何让 React Native ActivityIndicator 在 onPress 之后出现以显示正在加载？