侧边栏壁纸
  • 累计撰写 121 篇文章
  • 累计创建 0 个标签
  • 累计收到 51 条评论

目 录CONTENT

文章目录

11-ReactNative活动指示器组件.md

江子辰
2022-03-20 / 0 评论 / 0 点赞 / 230 阅读 / 1,986 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-03-31,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告 广告

React Native 活动指示器组件 ActivityIndicator

React Native 中的活动指示器组件 ActivityIndicator 就长下面这样。

嗯,不是全部,只是其中一个转圈圈的。

React Native 活动指示器组件 ActivityIndicator

有一些比较耗时的操作,可能需要用户等待,那么就可以用 活动指示器组件 ActivityIndicator 告诉用户你需要等待。

其实,任何从用户点击开始,不能立刻给予用户反馈的操作,都需要使用 活动指示器组件 ActivityIndicator 告诉用户等待片刻。

React Native 活动指示器组件 ActivityIndicator

引入组件

React Native 中使用 活动指示器组件 ActivityIndicator 首先需要引入组件

import { ActivityIndicator } from 'react-native';

使用语法

活动指示器组件 ActivityIndicator 的使用语法和其它大部分组件一样。只不过它是一个自闭合组件,没有任何子元素。

<ActivityIndicator
  animating = {true|false}
  color = {'[color]'}
  size = {"large"| "small"} />

属性说明

属性类型是否必须说明
animatingboolean是否显示活动指示器。默认为 truefalse 则表示隐藏
colorcolor⭕️ 的颜色,默认情况下,iOS 为灰色,Android深青色
sizestring只有两个选项 largesmall,默认是 small

范例1 : 最基本的使用

活动指示器组件 ActivityIndicator 的使用方式还是很简单的。我们修改 App.js 如下就能看到使用效果

App.js

import React, { Component } from 'react';
import { ActivityIndicator, View, Text, TouchableOpacity, StyleSheet } from 'react-native';

class App extends Component {

   render() {
      return (
         <View style = {styles.container}>
            <ActivityIndicator style = {styles.activityIndicator}/>
         </View>
      )
   }
}

export default App

const styles = StyleSheet.create ({
   container: {
      marginTop: 70
   },
   activityIndicator: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      height: 80
   }
})

演示效果如下

范例2 : 指定时间后隐藏

如果需要隐藏 活动指示器组件 ActivityIndicator 组件只需要将 animating 设置为 false 即可。

例如下面的范例,在启动 2 秒后自动隐藏 活动指示器组件 ActivityIndicator 组件。在启动 3 秒后继续显示活动指示器。

App.js

import React, { Component } from 'react';
import { ActivityIndicator, View, Text, TouchableOpacity, StyleSheet } from 'react-native';

class App extends Component {
   state = { animating: true }

   closeActivityIndicator = () => {
      setTimeout(() => this.setState({animating: false }), 2000)
      setTimeout(() => this.setState({animating: true }), 4000)
   }

   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 App

const styles = StyleSheet.create ({
   container: {
      flex: 1,
      marginTop: 70
   },
   activityIndicator: {
      height: 80
   }
})

演示

0
广告 广告

评论区