移动跨平台框架ReactNative活动指示器组件【11】_前端江太公

大大的周 02-07 8243

前端江太公

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'; 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 } })