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

当我们想要告诉用户他们在 UI 上发出的请求需要时间时，请使用加载指示器。如果用户在填写表单后单击了提交按钮，或者单击了搜索按钮来获取一些数据。

ReactNative 提供了一个 ActivityIndi​​cator 组件，它可以通过不同的方式在 UI 上显示加载指示器.

基本的 ActivityIndi​​cator 组件如下 -

<ActivityIndicator animating = {animating} color = '#bc2b78' size = "large"
style = {yourstyle}/>

要使用 ActivityIndi​​cator，您需要按如下方式导入它 -

import { ActivityIndicator} from 'react-native';

以下是 ActivityIndi​​cator 提供的一些重要属性。

用于加载指示器的动画。它采用布尔值 true 则显示指示器， false 则隐藏指示器。

2颜色

加载指示器显示的颜色。

3hidesWhenStopped

当指示器没有动画时停止。其值为 正确/错误。

4大小

大小指标。数值有小有大。

示例：加载指标的显示

加载指示器是使用 ActivityIndi​​cator 实现的，因此首先导入 -

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

这是使用的 ActivityIndi​​cator 组件 -

<ActivityIndicator
   animating = {animating}
   color = '#bc2b78'
   size = "large"
style = {styles.activityIndicator}/>

动画设置为动画变量，默认设置为 true。在 componentDidMount() 函数中调用 closeActivityIndi​​cator 方法，该函数将在 1 分钟后将动画状态设置为 false。

state = { animating: true }
   closeActivityIndicator = () => setTimeout(() => this.setState({
   animating: false }), 60000)
   componentDidMount = () => this.closeActivityIndicator()

这是显示加载指示器的完整代码 -

import React, { Component } from 'react';
import { ActivityIndicator, View, StyleSheet } from 'react-native';
class ActivityIndicatorExample extends Component {
   state = { animating: true }
   closeActivityIndicator = () => setTimeout(() => this.setState({
   animating: false }), 60000)
   componentDidMount = () => this.closeActivityIndicator()
   render() {
      const animating = this.state.animating
      return (
         <View style = {styles.container}>
            <ActivityIndicator
               animating = {animating}
               color = '#bc2b78'
               size = "large"
               style = {styles.activityIndicator}/>
         </View>
      )
   }
}
export default ActivityIndicatorExample
const styles = StyleSheet.create ({
   container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      marginTop: 70
   },
   activityIndicator: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      height: 80
   }
})

输出