欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

📌 开发环境声明：本文基于 React Native 0.72.90 版本进行开发适配

---

🚀 一、开篇引言

react-native-indicators 是一个精心设计的加载指示器组件库，提供了 9 种不同风格的动画加载效果。从经典的 BallIndicator 到独特的 PacmanIndicator，从简洁的 DotIndicator 到炫酷的 WaveIndicator，每种指示器都经过精心调优，动画流畅自然。本文将带你深入了解如何在 HarmonyOS 平台上集成和使用这些精美的加载动画组件。

1.1 你将学到什么？

• ✅ react-native-indicators 的全部 9 种指示器组件
• ✅ HarmonyOS 平台的完整集成流程
• ✅ 各指示器的特色与适用场景
• ✅ 自定义颜色、大小、动画参数
• ✅ 加载状态控制与最佳实践

---

📦 二、库概览

2.1 基本信息

项目	内容
库名称	react-native-indicators
版本信息	0.17.0
官方仓库	https://github.com/n4kz/react-native-indicators
开源协议	BSD

2.2 版本兼容性

三方库版本	支持RN版本	说明
0.17.0	0.72	推荐使用

2.3 核心能力矩阵

能力项	描述	HarmonyOS 支持
BallIndicator	球体旋转指示器	✅ 完全支持
BarIndicator	条形跳动指示器	✅ 完全支持
DotIndicator	圆点跳动指示器	✅ 完全支持
MaterialIndicator	Material 风格指示器	✅ 完全支持
PacmanIndicator	吃豆人指示器	✅ 完全支持
PulseIndicator	脉冲指示器	✅ 完全支持
SkypeIndicator	Skype 风格指示器	✅ 完全支持
UIActivityIndicator	iOS 风格指示器	✅ 完全支持
WaveIndicator	波浪指示器	✅ 完全支持

2.4 指示器效果预览

指示器	效果描述	适用场景
BallIndicator	多个球体环绕旋转	通用加载场景
BarIndicator	多个竖条依次跳动	数据加载、列表刷新
DotIndicator	圆点依次弹跳	轻量级加载提示
MaterialIndicator	Material Design 风格圆环	现代风格应用
PacmanIndicator	吃豆人动画	游戏、趣味应用
PulseIndicator	脉冲扩散效果	等待连接、定位中
SkypeIndicator	Skype 风格气泡	通讯类应用
UIActivityIndicator	iOS UIActivityIndicator 风格	iOS 风格应用
WaveIndicator	波浪扩散效果	搜索、同步中

2.5 典型应用场景

场景	描述	推荐指示器
页面加载	整页数据加载等待	BallIndicator
列表刷新	下拉刷新加载	BarIndicator
按钮加载	按钮点击后加载状态	DotIndicator
数据同步	后台数据同步中	PulseIndicator
网络请求	API 请求等待	MaterialIndicator
搜索等待	搜索结果加载	WaveIndicator

---

📖 三、安装与配置

3.2 安装依赖

在项目根目录执行以下命令：

npm install react-native-indicators@0.17.0

3.3 验证安装

安装完成后，检查 package.json 文件中是否包含以下依赖：

{
  "dependencies": {
    "react-native-indicators": "^0.17.0"
  }
}

3.4 无需原生配置

react-native-indicators 是纯 JavaScript 库，基于 React Native Animated API 实现，不依赖任何原生模块

3.5 基本导入

import {
  BallIndicator,
  BarIndicator,
  DotIndicator,
  MaterialIndicator,
  PacmanIndicator,
  PulseIndicator,
  SkypeIndicator,
  UIActivityIndicator,
  WaveIndicator,
} from 'react-native-indicators';

---

📖 四、API 详解

4.1 公共属性

所有指示器组件都支持一组公共属性，用于控制动画的基本行为。这些属性提供了统一的动画控制接口，使得不同风格的指示器可以有一致的使用体验。

动画控制属性：

animating 属性是控制指示器运行状态的核心属性，设置为 true 时动画运行，设置为 false 时动画停止。默认值为 true，通常在数据加载完成后将其设为 false 来停止动画。

animationDuration 属性定义动画的一个完整周期时长，单位为毫秒。较小的值会让动画更快，较大的值会让动画更慢。默认值因指示器类型而异，通常在 800-1200ms 之间。根据应用的整体节奏调整这个值可以获得更好的用户体验。

animationEasing 属性接受一个缓动函数，用于控制动画的速度曲线。可以使用 React Native 提供的 Easing 模块中的各种缓动函数，如 Easing.linear、Easing.ease、Easing.bounce 等。不同的缓动函数会产生不同的动画效果。

显示控制属性：

hidesWhenStopped 属性控制动画停止时是否隐藏指示器。设置为 true 时，当 animating 为 false，指示器会完全消失；设置为 false 时，指示器会停留在最后一帧。默认值为 true，适合大多数加载场景。

interaction 属性控制动画是否阻止用户交互。设置为 true 时，动画使用 InteractionManager 来确保动画流畅，但可能会稍微延迟其他操作的执行。对于复杂的页面，可以考虑设置为 false 来避免阻塞。

import { BallIndicator } from 'react-native-indicators';
import { Easing } from 'react-native';

const LoadingExample = () => {
  const [loading, setLoading] = useState(true);

  return (
    <View style={styles.container}>
      <BallIndicator
        animating={loading}
        animationDuration={1000}
        animationEasing={Easing.ease}
        hidesWhenStopped={true}
        interaction={true}
        color="#FF6B6B"
        size={40}
      />
    </View>
  );
};

---

4.2 BallIndicator 球体指示器

BallIndicator 是最经典的加载指示器之一，多个球体围绕中心点旋转，形成流畅的加载动画。它的视觉效果简洁大方，适合各种类型的应用。

视觉特点：

BallIndicator 默认显示 8 个小球，它们围绕一个虚拟的圆周排列，并沿着这个圆周旋转。每个球体在旋转过程中会有大小变化的效果，使得动画更加生动。这种设计既不会过于花哨，又能清晰地传达"加载中"的状态。

自定义参数：

color 属性设置球体的颜色，接受任何有效的颜色字符串。size 属性设置指示器的整体大小，默认为 36。count 属性设置球体的数量，默认为 8，可以调整为 4-12 之间的值来获得不同的视觉效果。

使用建议：

BallIndicator 是最通用的加载指示器，适合用于页面级加载、数据请求等待等场景。它的动画效果不会分散用户注意力，同时又能清晰地传达加载状态。建议在需要长时间加载的场景中使用较大的尺寸，在按钮或小区域加载中使用较小的尺寸。

import { BallIndicator } from 'react-native-indicators';

const BallIndicatorExample = () => {
  return (
    <View style={styles.container}>
      <View style={styles.item}>
        <Text style={styles.label}>默认效果</Text>
        <BallIndicator color="#007AFF" />
      </View>
  
      <View style={styles.item}>
        <Text style={styles.label}>大尺寸</Text>
        <BallIndicator color="#FF6B6B" size={60} />
      </View>
  
      <View style={styles.item}>
        <Text style={styles.label}>少球体</Text>
        <BallIndicator color="#4ECDC4" count={4} />
      </View>
    </View>
  );
};

---

4.3 BarIndicator 条形指示器

BarIndicator 显示多个竖条依次跳动的动画效果，类似于音频均衡器的视觉效果。这种指示器动感十足，适合需要传达"处理中"感觉的场景。

视觉特点：

BarIndicator 的每个竖条会依次上下跳动，形成波浪般的动画效果。默认显示 5 个竖条，它们的高度会周期性变化，产生一种节奏感。这种动画风格让人联想到数据流动或处理过程，非常适合数据加载场景。

自定义参数：

color 属性设置竖条的颜色。size 属性设置指示器的整体大小，默认为 36。count 属性设置竖条的数量，默认为 5，可以调整为 3-8 之间的值。更多的竖条会产生更密集的视觉效果，更少的竖条则更加简洁。

使用场景：

BarIndicator 特别适合用于列表刷新、数据同步等场景。它的动画风格暗示着数据正在流动或处理中，能够给用户一种"正在进行"的感觉。在金融类、数据类应用中使用效果尤佳。

import { BarIndicator } from 'react-native-indicators';

const BarIndicatorExample = () => {
  return (
    <View style={styles.container}>
      <View style={styles.item}>
        <Text style={styles.label}>默认效果</Text>
        <BarIndicator color="#FF6B6B" />
      </View>
  
      <View style={styles.item}>
        <Text style={styles.label}>多竖条</Text>
        <BarIndicator color="#4ECDC4" count={8} />
      </View>
  
      <View style={styles.item}>
        <Text style={styles.label}>大尺寸</Text>
        <BarIndicator color="#45B7D1" size={50} />
      </View>
    </View>
  );
};

---

4.4 DotIndicator 圆点指示器

DotIndicator 显示多个圆点依次弹跳的动画效果，风格简洁轻快。它是最轻量级的加载指示器之一，适合用于按钮加载、小区域等待等场景。

视觉特点：

DotIndicator 的圆点会依次向上弹跳然后落下，形成一种活泼的动画效果。默认显示 3 个圆点，它们的弹跳动作有轻微的时间差，产生波浪般的视觉效果。这种动画风格轻松愉快，不会给用户带来等待的焦虑感。

自定义参数：

color 属性设置圆点的颜色。size 属性设置圆点的大小，默认为 12。count 属性设置圆点的数量，默认为 3。可以通过调整这些参数来适应不同的 UI 场景。

特殊技巧：

DotIndicator 可以通过 style 属性的 transform 进行旋转，实现不同方向的弹跳效果。例如，设置 transform: [{ rotate: '180deg' }] 可以让圆点向下弹跳，设置 transform: [{ rotate: '90deg' }] 可以让圆点向右弹跳。

import { DotIndicator } from 'react-native-indicators';

const DotIndicatorExample = () => {
  return (
    <View style={styles.container}>
      <View style={styles.item}>
        <Text style={styles.label}>向上弹跳</Text>
        <DotIndicator color="#FF6B6B" count={4} />
      </View>
  
      <View style={styles.item}>
        <Text style={styles.label}>向下弹跳</Text>
        <DotIndicator 
          color="#4ECDC4" 
          count={4}
          style={{ transform: [{ rotate: '180deg' }] }}
        />
      </View>
  
      <View style={styles.item}>
        <Text style={styles.label}>大圆点</Text>
        <DotIndicator color="#45B7D1" size={16} />
      </View>
    </View>
  );
};

---

4.5 MaterialIndicator Material 风格指示器

MaterialIndicator 实现了 Material Design 风格的圆形进度指示器，具有现代感和科技感。它类似于 Android 系统原生的 CircularProgressIndicator。

视觉特点：

MaterialIndicator 显示一个圆环，圆环上有一段弧线在旋转，同时弧线的长度会周期性变化。这种动画效果符合 Material Design 的设计语言，给人一种精确、高效的感觉。圆环的轨道和进度弧线可以有不同的视觉效果。

自定义参数：

color 属性设置进度弧线的颜色。size 属性设置指示器的大小，默认为 40。trackWidth 属性设置圆环的线条宽度，默认根据 size 自动计算。较宽的 trackWidth 会产生更粗壮的视觉效果，较窄的 trackWidth 则更加精致。

使用场景：

MaterialIndicator 非常适合现代风格的应用，特别是采用 Material Design 设计语言的应用。它的动画效果专业、精确，适合用于数据加载、文件上传下载等需要传达"进度"感的场景。

import { MaterialIndicator } from 'react-native-indicators';

const MaterialIndicatorExample = () => {
  return (
    <View style={styles.container}>
      <View style={styles.item}>
        <Text style={styles.label}>默认效果</Text>
        <MaterialIndicator color="#007AFF" />
      </View>
  
      <View style={styles.item}>
        <Text style={styles.label}>粗线条</Text>
        <MaterialIndicator color="#FF6B6B" trackWidth={6} size={50} />
      </View>
  
      <View style={styles.item}>
        <Text style={styles.label}>细线条</Text>
        <MaterialIndicator color="#4ECDC4" trackWidth={2} />
      </View>
    </View>
  );
};

---

4.6 PacmanIndicator 吃豆人指示器

PacmanIndicator 实现了经典的吃豆人游戏动画效果，趣味性十足。它显示一个吃豆人在追逐小球，非常适合游戏类或趣味类应用。

视觉特点：

PacmanIndicator 显示一个黄色的吃豆人角色，它的嘴巴会一张一合，同时有多个小球从右侧飞过被"吃掉"。这种动画效果充满了怀旧感和趣味性，能够给用户带来轻松愉快的体验。

自定义参数：

color 属性设置吃豆人和小球的颜色，默认为黄色。size 属性设置指示器的大小，默认为 48。由于吃豆人的造型比较复杂，建议使用较大的 size 值以获得更好的视觉效果。

使用场景：

PacmanIndicator 最适合游戏类应用、儿童类应用或任何需要增加趣味性的场景。它的动画效果独特且有趣，能够缓解用户等待时的焦虑感。但需要注意，在正式的商务类应用中可能不太合适。

import { PacmanIndicator } from 'react-native-indicators';

const PacmanIndicatorExample = () => {
  return (
    <View style={styles.container}>
      <View style={styles.item}>
        <Text style={styles.label}>经典吃豆人</Text>
        <PacmanIndicator color="#FFD700" />
      </View>
  
      <View style={styles.item}>
        <Text style={styles.label}>大尺寸</Text>
        <PacmanIndicator color="#FF6B6B" size={64} />
      </View>
    </View>
  );
};

---

4.7 PulseIndicator 脉冲指示器

PulseIndicator 显示一个中心点不断向外发射脉冲波的效果，类似于雷达扫描或心跳监测的视觉表现。它适合传达"正在搜索"、"正在连接"等状态。

视觉特点：

PulseIndicator 的中心有一个实心圆点，周围有多个同心圆脉冲不断向外扩散并逐渐消失。这种动画效果给人一种"活跃"、"正在工作"的感觉，非常适合表示持续性的状态。

自定义参数：

color 属性设置脉冲的颜色。size 属性设置指示器的大小，默认为 40。脉冲的数量和扩散速度由内部算法控制，通过调整 animationDuration 可以改变整体节奏。

使用场景：

PulseIndicator 特别适合用于表示"正在定位"、“正在搜索”、"正在连接"等状态。它的视觉效果暗示着某种信号或活动正在扩散，非常适合地图应用、社交应用、IoT 应用等场景。

import { PulseIndicator } from 'react-native-indicators';

const PulseIndicatorExample = () => {
  return (
    <View style={styles.container}>
      <View style={styles.item}>
        <Text style={styles.label}>定位中</Text>
        <PulseIndicator color="#007AFF" />
      </View>
  
      <View style={styles.item}>
        <Text style={styles.label}>搜索中</Text>
        <PulseIndicator color="#FF6B6B" size={60} />
      </View>
    </View>
  );
};

---

4.8 SkypeIndicator Skype 风格指示器

SkypeIndicator 实现了 Skype 应用经典的加载动画效果，多个气泡围绕中心旋转并缩放。它的视觉效果柔和流畅，适合通讯类应用。

视觉特点：

SkypeIndicator 显示多个气泡围绕中心点旋转，每个气泡在旋转过程中会有缩放效果，形成一种呼吸般的动画。这种效果给人一种柔和、友好的感觉，非常适合社交和通讯类应用。

自定义参数：

color 属性设置气泡的颜色。size 属性设置指示器的大小，默认为 40。count 属性设置气泡的数量，默认为 4。minScale 和 maxScale 属性控制气泡缩放的最小和最大比例，默认分别为 0.5 和 1.2。

使用场景：

SkypeIndicator 最适合通讯类应用，如即时通讯、视频会议等。它的动画风格柔和友好，不会给用户带来压力感。在社交应用中使用也能获得良好的用户体验。

import { SkypeIndicator } from 'react-native-indicators';

const SkypeIndicatorExample = () => {
  return (
    <View style={styles.container}>
      <View style={styles.item}>
        <Text style={styles.label}>默认效果</Text>
        <SkypeIndicator color="#007AFF" />
      </View>
  
      <View style={styles.item}>
        <Text style={styles.label}>多气泡</Text>
        <SkypeIndicator color="#FF6B6B" count={6} />
      </View>
  
      <View style={styles.item}>
        <Text style={styles.label}>大缩放</Text>
        <SkypeIndicator color="#4ECDC4" minScale={0.3} maxScale={1.5} />
      </View>
    </View>
  );
};

---

4.9 UIActivityIndicator iOS 风格指示器

UIActivityIndicator 实现了 iOS 系统原生的 UIActivityIndicatorView 风格，多个细线围绕中心旋转。它是最经典的加载指示器之一。

视觉特点：

UIActivityIndicator 显示多条细线围绕中心点旋转，线条的透明度会周期性变化，形成一种流动的视觉效果。这种设计是 iOS 系统的经典加载动画，用户非常熟悉。

自定义参数：

color 属性设置线条的颜色。size 属性设置指示器的大小，默认为 36。count 属性设置线条的数量，默认为 12。更多的线条会产生更密集的视觉效果。

使用场景：

UIActivityIndicator 适合需要与 iOS 系统风格保持一致的应用。它的动画效果经典、专业，不会分散用户注意力。在 iOS 风格的应用中使用效果最佳。

import { UIActivityIndicator } from 'react-native-indicators';

const UIActivityIndicatorExample = () => {
  return (
    <View style={styles.container}>
      <View style={styles.item}>
        <Text style={styles.label}>默认效果</Text>
        <UIActivityIndicator color="#999" />
      </View>
  
      <View style={styles.item}>
        <Text style={styles.label}>大尺寸</Text>
        <UIActivityIndicator color="#007AFF" size={50} />
      </View>
  
      <View style={styles.item}>
        <Text style={styles.label}>彩色</Text>
        <UIActivityIndicator color="#FF6B6B" />
      </View>
    </View>
  );
};

---

4.10 WaveIndicator 波浪指示器

WaveIndicator 显示波浪扩散的动画效果，类似于水面波纹或声波传播。它的视觉效果优雅大气，适合表示"同步中"、"搜索中"等状态。

视觉特点：

WaveIndicator 从中心向外发射多个波浪，波浪在扩散过程中逐渐消失。支持两种模式：fill 模式显示填充的波浪圆，outline 模式显示空心波浪圆。波浪的数量和大小可以通过参数调整。

自定义参数：

color 属性设置波浪的颜色。size 属性设置指示器的大小，默认为 40。count 属性设置波浪的数量，默认为 3。waveFactor 属性控制波浪的大小因子，默认为 0.54，较小的值会产生更小的波浪。waveMode 属性设置波浪模式，可选 “fill” 或 “outline”。

使用场景：

WaveIndicator 适合用于表示数据同步、内容搜索、设备连接等状态。它的视觉效果优雅且具有科技感，非常适合现代化的应用设计。outline 模式更加精致，适合浅色背景；fill 模式更加醒目，适合深色背景。

import { WaveIndicator } from 'react-native-indicators';

const WaveIndicatorExample = () => {
  return (
    <View style={styles.container}>
      <View style={styles.item}>
        <Text style={styles.label}>填充模式</Text>
        <WaveIndicator color="#007AFF" waveMode="fill" />
      </View>
  
      <View style={styles.item}>
        <Text style={styles.label}>轮廓模式</Text>
        <WaveIndicator color="#FF6B6B" waveMode="outline" />
      </View>
  
      <View style={styles.item}>
        <Text style={styles.label}>多波浪</Text>
        <WaveIndicator color="#4ECDC4" count={5} waveFactor={0.4} />
      </View>
    </View>
  );
};

---

💻 五、完整代码示例

一个展示所有指示器效果的完整示例：

import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  SafeAreaView,
  ScrollView,
  TouchableOpacity,
} from 'react-native';
import {
  BallIndicator,
  BarIndicator,
  DotIndicator,
  MaterialIndicator,
  PacmanIndicator,
  PulseIndicator,
  SkypeIndicator,
  UIActivityIndicator,
  WaveIndicator,
} from 'react-native-indicators';

const IndicatorsDemo = () => {
  const [animating, setAnimating] = useState(true);

  const toggleAnimation = () => {
    setAnimating(!animating);
  };

  const renderIndicatorItem = (name: string, Indicator: any, props: object = {}) => (
    <View style={styles.indicatorItem}>
      <View style={styles.indicatorWrapper}>
        <Indicator
          animating={animating}
          size={40}
          {...props}
        />
      </View>
      <Text style={styles.indicatorName}>{name}</Text>
    </View>
  );

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>加载指示器示例</Text>
        <TouchableOpacity
          style={[styles.toggleButton, !animating && styles.toggleButtonActive]}
          onPress={toggleAnimation}
        >
          <Text style={styles.toggleButtonText}>
            {animating ? '停止动画' : '开始动画'}
          </Text>
        </TouchableOpacity>
      </View>

      <ScrollView contentContainerStyle={styles.content}>
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>现代风格</Text>
          <View style={styles.row}>
            {renderIndicatorItem('Material', MaterialIndicator, { color: '#9B59B6' })}
            {renderIndicatorItem('UIActivity', UIActivityIndicator, { color: '#3498DB' })}
            {renderIndicatorItem('Pulse', PulseIndicator, { color: '#E74C3C' })}
          </View>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>特色指示器</Text>
          <View style={styles.row}>
            {renderIndicatorItem('Pacman', PacmanIndicator, { color: '#FFD700' })}
            {renderIndicatorItem('Skype', SkypeIndicator, { color: '#00AFF0' })}
            {renderIndicatorItem('Wave', WaveIndicator, { color: '#2ECC71' })}
          </View>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Wave 模式对比</Text>
          <View style={styles.row}>
            {renderIndicatorItem('Fill', WaveIndicator, { color: '#3498DB', waveMode: 'fill' })}
            {renderIndicatorItem('Outline', WaveIndicator, { color: '#3498DB', waveMode: 'outline' })}
            {renderIndicatorItem('Count:5', WaveIndicator, { color: '#3498DB', count: 5, waveFactor: 0.3 })}
          </View>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>不同颜色</Text>
          <View style={styles.row}>
            <View style={styles.indicatorItem}>
              <View style={styles.indicatorWrapper}>
                <BallIndicator animating={animating} color="#007AFF" size={40} />
              </View>
              <Text style={styles.indicatorName}>蓝色</Text>
            </View>
            <View style={styles.indicatorItem}>
              <View style={styles.indicatorWrapper}>
                <BallIndicator animating={animating} color="#4ECDC4" size={40} />
              </View>
              <Text style={styles.indicatorName}>青色</Text>
            </View>
            <View style={styles.indicatorItem}>
              <View style={styles.indicatorWrapper}>
                <BallIndicator animating={animating} color="#F7DC6F" size={40} />
              </View>
              <Text style={styles.indicatorName}>黄色</Text>
            </View>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    backgroundColor: '#fff',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#333',
  },
  toggleButton: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 16,
  },
  toggleButtonActive: {
    backgroundColor: '#4CD964',
  },
  toggleButtonText: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '500',
  },
  content: {
    padding: 16,
  },
  section: {
    marginBottom: 24,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333',
    marginBottom: 12,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  indicatorItem: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 16,
    marginHorizontal: 4,
  },
  indicatorWrapper: {
    height: 60,
    justifyContent: 'center',
    alignItems: 'center',
  },
  indicatorName: {
    fontSize: 12,
    color: '#666',
    marginTop: 8,
  },
});

export default IndicatorsDemo;

---

📋 六、属性参考

公共属性

属性	类型	必填	默认值	说明
animating	boolean	否	true	是否运行动画
animationDuration	number	否	1200	动画周期时长(ms)
animationEasing	function	否	linear	缓动函数
hidesWhenStopped	boolean	否	true	停止时是否隐藏
interaction	boolean	否	true	是否使用交互管理

各指示器特有属性

指示器	特有属性
BallIndicator	color, size, count
BarIndicator	color, size, count
DotIndicator	color, size, count
MaterialIndicator	color, size, trackWidth
PacmanIndicator	color, size
PulseIndicator	color, size
SkypeIndicator	color, size, count, minScale, maxScale
UIActivityIndicator	color, size, count
WaveIndicator	color, size, count, waveFactor, waveMode

---

⚠️ 七、常见问题

Q1: 动画卡顿怎么办？

A: 尝试将 interaction 属性设置为 false，或者检查是否有其他繁重的动画同时运行。确保在数据加载完成后及时停止动画。

Q2: 如何在深色背景上使用？

A: 设置 color 属性为浅色，如白色或浅灰色。WaveIndicator 的 outline 模式在深色背景上效果更好。

Q3: 如何自定义动画速度？

A: 使用 animationDuration 属性调整动画周期。较小的值会让动画更快，较大的值会让动画更慢。

Q4: 指示器大小如何选择？

A: 页面级加载建议使用 40-60 的 size，按钮加载建议使用 20-30 的 size，小区域加载建议使用 16-24 的 size。

---

📝 八、总结

react-native-indicators 为 HarmonyOS 平台提供了丰富的加载指示器选择，9 种不同风格的动画效果可以满足各种应用场景的需求。通过本篇文章，你已经掌握了：

• 所有 9 种指示器的特点和适用场景
• 公共属性和特有属性的使用方法
• 如何根据应用风格选择合适的指示器
• 动画控制和自定义技巧