移动跨平台框架ReactNative活动指示器组件【11】
React Native，是一个混合移动应用开发框架，是目前流行的跨平台移动应用开发框架之一。React Native 采用不同的方法进行混合移动应用开发。它不会生成原生 UI 组件，而是基于 React，React Native 是一个用于构建基于 Web 的交互界面的 JavaScript 库，因此会有更丰富的 UI 体验效果，同时也能够很好地调用底层框架的UI使用。
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"} />属性说明
属性 | 类型 | 是否必须 | 说明 |
|---|---|---|---|
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
}
})