移动跨平台框架ReactNative活动指示器组件【11】

前端江太公

React Native，是一个混合移动应用开发框架，是目前流行的跨平台移动应用开发框架之一。React Native 采用不同的方法进行混合移动应用开发。它不会生成原生 UI 组件，而是基于 React，React Native
是一个用于构建基于 Web 的交互界面的 JavaScript 库，因此会有更丰富的 UI 体验效果，同时也能够很好地调用底层框架的UI使用。

React Native系列导航
01-React Native 基础教程
02-安装ReactNative
03-ReactNative目录结构
04-ReactNative视图View
05-ReactNative组件样式style
06-ReactNative文本组件Text
07-ReactNative组件状态state
08-ReactNative组件属性props
09-ReactNative输入组件TextInput
10-ReactNative图片组件Image
11-ReactNative活动指示器组件
12-ReactNative弹出框Alert
13-ReactNative存储数据组件AsyncStorage
14-ReactNative动画组件Animated
15-ReactNative开关组件Switch
16-状态栏组件StatusBar
17-ReactNative滚动视图ScrollView
18-ReactNative选择器Picker
19-ReactNative网络请求

React Native 活动指示器组件 ActivityIndicator

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

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

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

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

React Native 活动指示器组件 ActivityIndicator

引入组件

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

import{ ActivityIndicator }from'react-native';

使用语法

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

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

属性说明

属性类型是否必须说明animatingboolean否是否显示活动指示器。默认为

true

，

false

则表示隐藏colorcolor否⭕️ 的颜色，默认情况下，

iOS

为灰色，

Android

为 深青色sizestring否只有两个选项

large

和

small

，默认是

small

范例1 ： 最基本的使用

活动指示器组件 ActivityIndicator 的使用方式还是很简单的。我们修改

App.js

如下就能看到使用效果

App.js

import React,{ Component }from'react';import{ ActivityIndicator, View, Text, TouchableOpacity, StyleSheet }from'react-native';classAppextendsComponent{render(){return(<View style ={styles.container}><ActivityIndicator style ={styles.activityIndicator}/></View>)}}exportdefault 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';classAppextendsComponent{
   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>)}}exportdefault App

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