如何在 React Native 中显示加载指示器？-猿码集

如何在 React Native 中显示加载指示器？

1. 简介

React Native 是 Facebook 推出的一种跨平台移动应用开发框架，可以使用 JavaScript 开发原生 iOS 和 Android 应用程序。通常移动应用程序需要在加载内容时显示加载指示器（loading indicator），以便用户知道他们需要等待。在本文中，我们将介绍如何在 React Native 中显示加载指示器。

2. React Native 的 ActivityIndicator

React Native 提供了一个名为 ActivityIndicator 的组件，可以在应用程序中显示加载指示器。该组件的示例如下所示：


import React from 'react';
import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
export default function App() {
  return (
    <View style={styles.container}>
      <ActivityIndicator size="large" color="blue" />
      <Text>Loading...</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

在上述示例代码中，我们首先导入了 React、ActivityIndicator、StyleSheet、Text 和 View 组件。然后我们创建了一个名为 App 的函数组件，该组件返回一个包含 ActivityIndicator 和 Text 组件的 View 组件。ActivityIndicator 组件的 size 属性设置为“large”，color 属性设置为“blue”，以便在加载期间向用户显示一个蓝色的圆形指示器。我们还为整个组件定义了一个样式规则。

3. 自定义加载指示器

除了使用默认的 ActivityIndicator 组件外，您还可以创建自己的加载指示器。例如，您可以使用 Animated API、Lottie 或其他第三方库来创建自定义加载指示器。

对于 Animated API，您可以使用 Animated.View 或 Animated.Image 组件来创建自定义动画。下面是一个使用 Animated.View 的示例：


import React from 'react';
import { Animated, Easing, StyleSheet, View } from 'react-native';
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.spinValue = new Animated.Value(0);
  }
  componentDidMount() {
    this.spin();
  }
  spin() {
    this.spinValue.setValue(0);
    Animated.timing(
      this.spinValue,
      {
        toValue: 1,
        duration: 3000,
        easing: Easing.linear,
        useNativeDriver: true,
      }
    ).start(() => this.spin());
  }
  render() {
    const spin = this.spinValue.interpolate({
      inputRange: [0, 1],
      outputRange: ['0deg', '360deg'],
    });
    return (
      <View style={styles.container}>
        <Animated.View style={{ transform: [{rotate: spin}] }}>
          <Text style={styles.text}>Loading...</Text>
        </Animated.View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

在上述示例代码中，我们首先导入了 React、Animated、Easing 和 StyleSheet 组件。在类组件 App 中，我们创建了一个名为 spinValue 的 Animated.Value 对象，用于定义旋转动画。在 componentDidMount 方法中，我们调用 spin 方法来启动旋转动画。在 spin 方法中，我们设置 spinValue 的值为 0，并使用 Animated.timing 方法来定义旋转动画的持续时间、缓动函数和使用原生动画驱动程序。在 render 方法中，我们将 spinValue 映射到 transform 样式的 rotate 属性，并将 Text 组件包装在 Animated.View 组件中。

4. 第三方库

除了 Animated API 和 Lottie 外，还有其他一些第三方库可用于创建自定义加载指示器。下面是一些常用的库：

- React Native Loading Spinner Overlay：简单而灵活的加载指示器库。

- React Native Progress Circle：具有高度自定义性的圆形加载指示器。

- React Native Spin Kit：基于 Spin Kit 设计的加载指示器库。

- React Native Typescript Loader：TypeScript 编写的加载指示器组件。

5. 结论

在实现移动应用程序时，使用加载指示器是一个非常有用的特性。在本文中，我们介绍了如何使用 React Native 中的 ActivityIndicator 和自定义加载指示器来实现加载指示器。我们还讨论了一些第三方库，这些库可以帮助您更快地创建自定义加载指示器。

如何在 React Native 中显示加载指示器？