ActivityIndicator

显示一个圆形的 loading 提示符号。

ActivityIndicator是React Native中用于显示加载状态的组件，主要作用是向用户展示异步操作（如网络请求）的进度状态。

核心功能

• 显示加载状态：通过旋转动画（iOS为风火轮，Android为圆圈）提示用户当前正在进行操作 。
• 控制显示与隐藏：通过animating属性（布尔值）控制是否显示，设置为false时自动隐藏（iOS默认隐藏，Android需手动控制） 。

主要属性

• animating：布尔值，控制是否显示加载指示器 。
• color：设置指示器颜色，默认为灰色 。
• size：指定尺寸，可选small或large 。
• hidesWhenStopped（仅iOS）：无动画时是否隐藏指示器，默认为true 。

使用场景
适用于需要向用户反馈异步操作进度的场景，如数据加载、表单提交等 。

ActivityIndicator是React Native中用于显示加载状态的组件，通常以圆形动画形式呈现，支持控制大小、颜色和显示状态。

核心属性

• size：指示器大小，可设为 "small"、"large" 或具体数值（仅Android支持数字） 。
• color：指示器颜色，默认为系统默认色（Android灰色，iOS强调色） 。
• animating：布尔值，控制是否显示动画，默认为true 。
• hidesWhenStopped（iOS专属）：当animating为false时是否隐藏指示器，默认为true 。

使用示例

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

const LoadingScreen = () => {
  const [isLoading, setIsLoading] = useState(true);
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {isLoading ? (
        <ActivityIndicator size="large" color="0000ff" />
      ) : (
        <Text>Loading complete!</Text>
      )}
    </View>
  );
};

注意事项

• Android支持通过size设置具体数值（如size={75}），iOS仅支持"small"和"large" 。
• 若需在动画停止后隐藏指示器，需同时设置animating={false}和hidesWhenStopped={true} 。

---

实际案例演示：

import React from "react";
import { ActivityIndicator, StyleSheet, Text, View, TouchableOpacity, Image } from "react-native";

const App = () => (
  <View style={styles.container}>
    <Text style={styles.title}>欢迎来到 HarmonyRnShop</Text>
    
    <View style={styles.horizontal}>
      <View style={styles.imagePlaceholder} />
      <View style={styles.imagePlaceholder} />
    </View>
    
    <View style={styles.horizontal}>
      <ActivityIndicator />
      <ActivityIndicator size="large" />
      <ActivityIndicator size="small" color="#0000ff" />
      <ActivityIndicator size="large" color="#00ff00" />
    </View>
    
    <TouchableOpacity style={styles.button}>
      <Text style={styles.buttonText}>点击这里</Text>
    </TouchableOpacity>
    
    <Text style={styles.footer}>加载中，请稍候...</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
    backgroundColor: "#f5f5f5"
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 20,
    color: "#333"
  },
  horizontal: {
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
    marginVertical: 10,
    width: "100%"
  },
  imagePlaceholder: {
    width: 100,
    height: 100,
    backgroundColor: "#ddd",
    margin: 10,
    borderRadius: 10
  },
  button: {
    backgroundColor: "#007bff",
    padding: 15,
    borderRadius: 5,
    marginTop: 20
  },
  buttonText: {
    color: "white",
    fontSize: 16,
    fontWeight: "bold"
  },
  footer: {
    marginTop: 20,
    color: "#666",
    fontSize: 14
  }
});

export default App;

这段React Native代码展示了一个移动应用界面的实现，主要围绕布局设计和交互组件展开。代码采用函数式组件语法构建了一个简洁明了的用户界面，通过StyleSheet.create方法集中管理样式属性，确保了代码的可维护性。

界面布局采用弹性盒子模型，主容器通过flex: 1占满全屏，并通过justifyContent和alignItems实现内容的居中显示。水平排列的视图通过flexDirection: 'row’实现多个元素的横向布局，并使用space-around实现元素间的均匀分布。

在组件使用方面，代码展示了ActivityIndicator加载指示器的多种配置方式，包括不同尺寸和颜色的设置。TouchableOpacity组件用于创建可点击的按钮区域，提供了良好的触觉反馈。图像占位符通过简单的View组件配合背景色实现，为后续图片加载预留了视觉空间。

样式设计注重细节处理，包括圆角边框、内边距控制、外边距设置等视觉效果。配色方案采用中性色调，确保了界面的清晰可读性。整体代码结构体现了React Native开发中的组件化思维和样式分离的最佳实践。

React Native基础

该代码使用了React Native的核心组件View和ActivityIndicator，这是构建移动应用界面的基础。ActivityIndicator是React Native提供的加载动画组件，用于指示后台任务的进行状态。

样式系统

通过StyleSheet.create创建了样式对象，这是React Native中推荐的做法，因为它可以提升渲染性能。样式定义了容器和布局属性，如flex、justifyContent、flexDirection等。

打包

接下来通过打包命令npn run harmony将reactNative的代码打包成为bundle，这样可以进行在开源鸿蒙OpenHarmony中进行使用。

最后运行效果图如下显示：

---

最终显示结果：

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。