React Native 活动指示器组件 ActivityIndicator

React Native 中的活动指示器组件 ActivityIndicator 就长下面这样。

嗯，不是全部，只是其中一个转圈圈的。

有一些比较耗时的操作，可能需要用户等待，那么就可以用 活动指示器组件 ActivityIndicator 告诉用户你需要等待。

其实，任何从用户点击开始，不能立刻给予用户反馈的操作，都需要使用 活动指示器组件 ActivityIndicator 告诉用户等待片刻。

引入组件

React Native 中使用 活动指示器组件 ActivityIndicator 首先需要引入组件

import { ActivityIndicator } from 'react-native';

使用语法

活动指示器组件 ActivityIndicator 的使用语法和其它大部分组件一样。只不过它是一个自闭合组件，没有任何子元素。

<ActivityIndicator
  animating = {true|false}
  color = {'[color]'}
  size = {"large"| "small"} />

属性说明

属性	类型	是否必须	说明
animating	boolean	否	是否显示活动指示器。默认为 `true`，`false` 则表示隐藏
color	color	否	⭕️ 的颜色，默认情况下，`iOS` 为灰色，`Android` 为深青色
size	string	否	只有两个选项 `large` 和 `small`，默认是 `small`

范例1 ：最基本的使用

活动指示器组件 ActivityIndicator 的使用方式还是很简单的。我们修改 App.js 如下就能看到使用效果

App.js

import React, { Component } from 'react';
import { ActivityIndicator, View, Text, TouchableOpacity, StyleSheet } from 'react-native';

class App extends Component {

   render() {
      return (
         <View style = {styles.container}>
            <ActivityIndicator style = {styles.activityIndicator}/>
         </View>
      )
   }
}

export default App

const styles = StyleSheet.create ({
   container: {
      marginTop: 70
   },
   activityIndicator: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      height: 80
   }
})

演示效果如下

范例2 ：指定时间后隐藏

如果需要隐藏 活动指示器组件 ActivityIndicator 组件只需要将 animating 设置为 false 即可。

例如下面的范例，在启动 2 秒后自动隐藏 活动指示器组件 ActivityIndicator 组件。在启动 3 秒后继续显示活动指示器。

App.js

import React, { Component } from 'react';
import { ActivityIndicator, View, Text, TouchableOpacity, StyleSheet } from 'react-native';

class App extends Component {
   state = { animating: true }

   closeActivityIndicator = () => {
      setTimeout(() => this.setState({animating: false }), 2000)
      setTimeout(() => this.setState({animating: true }), 4000)
   }

   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 App

const styles = StyleSheet.create ({
   container: {
      flex: 1,
      marginTop: 70
   },
   activityIndicator: {
      height: 80
   }
})

演示效果如下

React Native 活动指示器组件 ActivityIndicator