如何在 React Native 中显示加载指示器?
react nativejavascriptmobile development
当我们想告诉用户他们在 UI 上发出的请求需要时间时，会使用加载指示器。例如，用户在填写表单后单击了提交按钮，或者单击了搜索按钮以获取一些数据。
ReactNative 提供了一个 ActivityIndicator 组件，该组件有多种方式在 UI 上显示加载指示器。
基本的 ActivityIndicator 组件如下 −
<ActivityIndicator animating = {animating} color = '#bc2b78' size = "large"
style = {yourstyle}/>
要使用 ActivityIndicator，您需要按如下方式导入它 −
import { ActivityIndicator} from 'react-native';
以下是 ActivityIndicator 的一些重要属性。
| Sr.No | Props &描述 |
|---|---|
| 1 | animating 用于为加载指示器设置动画。它采用布尔值 true 表示显示指示器，false 表示隐藏指示器。 |
| 2 | color 加载指示器显示的颜色。 |
| 3 | hidesWhenStopped 在不播放动画时停止指示器。值为 true/false。 |
| 4 | size 指示器的大小。值为小和大。 |
示例:加载指示器的显示
加载指示器是使用 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
}
})
输出
