当我们想要告诉用户他们在 ui 上发出的请求需要时间时，请使用加载指示器。如果用户在填写表单后单击了提交按钮，或者单击了搜索按钮来获取一些数据。
ReactNative 提供了一个 ActivityIndicator 组件，它可以通过不同的方式在 UI 上显示加载指示器.
基本的 ActivityIndicator 组件如下 -
<ActivityIndicator animating = {animating} color = '#bc2b78' size = "large"
style = {yourstyle}/>要使用 ActivityIndicator，您需要按如下方式导入它 -
import { ActivityIndicator} from 'react-native';以下是 ActivityIndicator 提供的一些重要属性。
| Sr.No | 道具和说明 |
|---|---|
| 1 |
动画 p> 用于加载指示器的动画。它采用布尔值 true 则显示指示器， false 则隐藏指示器。 |
| 2 |
颜色 p> 加载指示器显示的颜色。 |
| 3 |
hidesWhenStopped 当指示器没有动画时停止。其值为 正确/错误。 |
| 4 |
大小 大小指标。数值有小有大。 |
示例：加载指标的显示
加载指示器是使用 ActivityIndicator 实现的，因此首先导入 -
import { ActivityIndicator, View, StyleSheet } from 'react-native';这是使用的 ActivityIndicator 组件 -
<ActivityIndicator
animating = {animating}
color = '#bc2b78'
size = "large"
style = {styles.activityIndicator}/>动画设置为动画变量，默认设置为 true。在 componentDidMount() 函数中调用 closeActivityIndicator 方法，该函数将在 1 分钟后将动画状态设置为 false。
state = { animating: true }
closeActivityIndicator = () => setTimeout(() => this.setState({
animating: false }), 60000)
componentDidMount = () => this.closeActivityIndicator()这是显示加载指示器的完整代码 -
import React, { Component } from 'react';
import { ActivityIndicator, View, StyleSheet } from 'react-native';
class ActivityIndicatorExample extends Component {
state = { animating: true }
closeActivityIndicator = () => setTimeout(() => this.setState({
animating: false }), 60000)
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 ActivityIndicatorExample
const styles = StyleSheet.create ({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 70
},
activityIndicator: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
height: 80
}
})输出
