移动跨平台框架ReactNative活动指示器组件【11】

原创

咏之随笔 2022-04-20 14:43:10 ©著作权

文章标签 reactnative 开发框架移动应用 ios 文章分类 数据库

©著作权归作者所有：来自51CTO博客作者咏之随笔的原创作品，请联系作者获取转载授权，否则将追究法律责任

React Native，是一个混合移动应用开发框架，是目前流行的跨平台移动应用开发框架之一。React Native 采用不同的方法进行混合移动应用开发。它不会生成原生 UI 组件，而是基于 React，React Native
是一个用于构建基于 Web 的交互界面的 JavaScript 库，因此会有更丰富的 UI 体验效果，同时也能够很好地调用底层框架的UI使用。

React Native系列导航

05-ReactNative组件样式style

06-ReactNative文本组件Text

07-ReactNative组件状态state

08-ReactNative组件属性props

09-ReactNative输入组件TextInput

10-ReactNative图片组件Image

11-ReactNative活动指示器组件

12-ReactNative弹出框Alert

13-ReactNative存储数据组件AsyncStorage

14-ReactNative动画组件Animated

15-ReactNative开关组件Switch

16-状态栏组件StatusBar

17-ReactNative滚动视图ScrollView

18-ReactNative选择器Picker

19-ReactNative网络请求

React Native 活动指示器组件 ActivityIndicator

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

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

移动跨平台框架ReactNative活动指示器组件【11】_开发框架

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

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

React Native 活动指示器组件 ActivityIndicator

引入组件

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

import { ActivityIndicator } from 'react-native';

使用语法

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

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

属性说明

属性	类型	是否必须	说明
animating	boolean	否	是否显示活动指示器。默认为 `true`，`false` 则表示隐藏
color	color	否	⭕️ 的颜色，默认情况下，`iOS` 为灰色，`Android` 为深青色
size	string	否	只有两个选项 `large` 和 `small`，默认是 `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
   }
})