如何在 React Native 中显示加载指示器？-js教程-PHP中文网

如何在 React Native 中显示加载指示器？

PHPz

发布： 2023-08-24 20:45:11

转载

1414人浏览过

当我们想要告诉用户他们在 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 (
         
            
         
      )
   }
}
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
   }
})

登录后复制

输出

如何在 React Native 中显示加载指示器？

以上就是如何在 React Native 中显示加载指示器？的详细内容，更多请关注php中文网其它相关文章！