无涯教程-React Native - ActivityInicator

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

Hi无涯教程

285人浏览 · 2024-07-15 20:16:09

Hi无涯教程 · 2024-07-15 20:16:09 发布

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)