关注我们

React Native - ActivityInicator

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)