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

2024-06-09 19:19:54

前端江太公

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

React Native系列导航
01-React Native 基础教程
02-安装ReactNative
03-ReactNative目录结构
04-ReactNative视图View
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 就长下面这样。

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

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

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

React Native 活动指示器组件 ActivityIndicator

引入组件

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

import { ActivityIndicator } from 'react-native';

使用语法

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

<ActivityIndicatoranimating = {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 Appconst 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.animatingreturn (<View style = {styles.container}><ActivityIndicatoranimating = {animating}color = '#bc2b78'size = "large"style = {styles.activityIndicator}/></View>)}
}
export default Appconst styles = StyleSheet.create ({container: {flex: 1,marginTop: 70},activityIndicator: {height: 80}
})

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

移动跨平台框架ReactNative图片组件Image【10】
前端江太公 React Native,是一个混合移动应用开发框架,是目前流行的跨平台移动应用开发框架之一.React Native 采用不同的方法进行混合移动应用开发.它不会生成原生 UI 组件,而是 ...
移动跨平台框架React Native状态栏组件StatusBar【16】
前端江太公 React Native,是一个混合移动应用开发框架,是目前流行的跨平台移动应用开发框架之一.React Native 采用不同的方法进行混合移动应用开发.它不会生成原生 UI 组件,而是 ...
macOS SwiftUI 进度指示器组件规范之 01 进度指标是什么 Progress Indicators
macOS SwiftUI 进度指示器组件规范之 01 进度指示器是什么 Progress Indicators 进度指示器是什么不要让人们坐在静态屏幕旁等待您的应用加载内容或执行冗长的数据处理操作 ...
[译]哪个跨平台框架才是最好的选择？React Native、Flutter 还是 Ionic
关注前端瓶子君,回复"交流" 加入我们一起学习,天天进步原文地址:React Native vs. Flutter vs. Ionic 原文作者:Sophia Martin 译 ...
Omi - 前端跨框架跨平台框架
Omi - 前端跨框架跨平台框架基于 Web Components 并支持 IE8+(omio),小程序(omip) 和任意前端框架集成 Omi 生态 → Omi 生态学习路线图基础生态项目 ...
浅谈跨平台框架 Flutter 的优势与结构
作者:个推iOS工程师伊泽瑞尔一.背景目前,移动开发技术主要分为原生开发和跨平台开发两种.其中,原生应用是指在某个特定的移动平台上,使用平台所支持的开发工具和语言,直接调用系统提供的API所开发 ...
[Unity] 战斗系统学习 8：构建 TPS 框架 3：mono 组件
1. 框架组件 1.1 FrameworkComponent v1 一开始我想的是这样做框架组件嘛,跟 GF 学的但是后来我才知道 static 变量是默认在监视器上不显示的,怪不得 GF 不在 A ...
macOS SwiftUI 指示器组件规范之 01 液位指示器Level Indicators
macOS SwiftUI 指示器组件规范之 01 液位指示器Level Indicators 指示器以图形方式表示数值范围内的特定值.它的用途类似于滑块(请参见Sliders),但更直观,并且不包含 ...
Flutter 跨平台框架应用实战-2019极光开发者大会
大家好,我是郭树煜,掘金 <Flutter 完整开发实战详解> 系列的作者,Github GSY 系列开源项目的维护人员,系列包括 GSYVideoPlayer .GSYGitGithub ...
最新前端跨平台框架推荐，跨平台开发框架选择指南
现在跨平台开发不是新鲜事了,各个跨平台框架都已经百花齐放,各有千秋.2021都有哪些跨平台框架值得推荐呢?这篇文章就不说石器时代的开平台框架了,当然不靠谱的也不说了,只说能用的! 1. Ract Na ...

最新文章

热门文章