React Native中如何用useState控制ActivityIndicator的显示与隐藏

• 首先从react包中导入useState钩子
• 在你的函数组件内部声明状态变量，用来控制加载指示器的显隐，初始值设为true（默认显示指示器）

import React, { useState } from 'react';
import { ActivityIndicator, TouchableOpacity, Text } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

// 你的函数组件
const YourComponent = () => {
  // 声明控制状态：true为显示指示器，false为隐藏
  const [showIndicator, setShowIndicator] = useState(true);

  // 按钮点击事件
  const handleButtonClick = () => {
    // 点击按钮隐藏指示器
    setShowIndicator(false);
    // 这里可以补充点击按钮要触发的其他逻辑，比如启动另一个组件的加载流程
  }

  // 你提到的另一个组件加载完成后要调用的回调函数
  const handleOtherComponentLoaded = () => {
    // 恢复显示指示器
    setShowIndicator(true);
  }

  return (
    // 其余业务代码省略
    {/* 给渐变区域包裹可点击组件，LinearGradient本身不支持点击事件响应 */}
    <TouchableOpacity onPress={handleButtonClick}>
      <LinearGradient
        colors={['#D97B29', '#F2B47E']}
        style={styles.signIn}
      >
        <Text style={[styles.textSign, {
          color:'#fff'
        }]}>Entrar</Text>
        {/* 两种控制方式二选一：
        1、用animating属性控制，隐藏时保留占位空间避免布局跳动
        2、用条件渲染{showIndicator && <ActivityIndicator .../>}，隐藏时不占空间
        */}
        <ActivityIndicator 
          size="large" 
          color="#D97B29" 
          animating={showIndicator}
        />
      </LinearGradient>
    </TouchableOpacity>
    // 其余业务代码省略，将handleOtherComponentLoaded传给对应加载组件，加载完成后触发该回调即可
  )
}

• 如果你不需要保留指示器的占位空间，直接用条件渲染的方式即可：只有showIndicator为true的时候才渲染ActivityIndicator组件。
• 如果你需要保留指示器的占位位置避免点击后布局跳动，就用animating属性控制，状态为false的时候组件会隐藏但占着原来的位置。

内容的提问来源于stack exchange，提问作者Guilherme Cavenaghi