React Native ActivityIndicator

2025 年 3 月 17 日 | 阅读 1 分钟

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

Props

Props	描述
animating	选择显示指示器（默认值为 true）或隐藏它（false）。
大小	设置指示器的大小（'small'，'large'，数字）。默认大小为 small。数字格式仅在 Android 中支持。
color	设置微调器的前景色（默认为灰色）。
hidesWhenStopped	它提供了一个选项，可以在没有动画时显示或隐藏指示器（默认为 true）。

React Native ActivityIndicator 示例

在此示例中，animating 属性将活动指示器设置为 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 Picker

← 上一个下一个 →

React Native ActivityIndicator

Props

React Native ActivityIndicator 示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

React Native 教程

指南

API

导航

存储

其他

React Native ActivityIndicator

Props

React Native ActivityIndicator 示例

相关帖子

React Native SectionList

带动画的 ProgressBar

React Native Button

React Native Picker

React Native ScrollView

React Native Touchables

Layout 和 Flexbox

React Native StatusBar

第一个 App Hello World

React Native ListView

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器