无涯教程-React Native - ActivityInicator ActivityIndicator用于显示

ActivityIndicator用于显示圆形加载指示器。

Props	Description
animating	显示指示器(默认为true)或隐藏指示器(false)的选项。
size	设置指标的大小(“small"，“large"，number), 默认为small。number格式仅在android中支持。
color	设置前景色(默认为gray)。
hidesWhenStopped	它提供了在没有动画时显示或隐藏指示器的选项(默认为true)。

ActivityIndicator示例

在此示例中，动画属性将活动指示器设置为true，并且在屏幕上可见。装入组件后，将使用closeActivityIndicator()在六秒钟后关闭动画指示器。

import React, { Component } from react
import {
    ActivityIndicator,
    AppRegistry,
    StyleSheet,
    Text,
    View,
} from react-native
export default class ActivityIndicatorDemo extends Component {
state = { animating: true }
closeActivityIndicator = () => setTimeout(() => this.setState({
animating: false }), 6000)
componentDidMount = () => this.closeActivityIndicator()
render() {
const animating = this.state.animating
return (
<View style={[styles.container, styles.horizontal]} >
<ActivityIndicator  animating = {animating} size="large" color="#ff0000" />
<ActivityIndicator size="small" color="#44ff00" />
<ActivityIndicator size="large" color="#rtwrw" />
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: center
},
horizontal: {
flexDirection: row,
justifyContent: space-around,
padding: 10
}
})
AppRegistry.registerComponent(App, () => ActivityIndicatorDemo)

输出:

无涯教程-React Native - ActivityInicator

ActivityIndicator示例

参考链接