React Native开发封装Toast与加载Loading组件示例


Posted in Javascript onSeptember 08, 2018

在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Native官方并没有提供者这两个常用组件,需要开发者自己根据需求来自定义。作者就在其他组件的基础上在进行二次封装,使用起来更加简单,更具扩展性,同学们只需将Toast与Loading文件拖到项目中,install对应的组件库即可

效果图

React Native开发封装Toast与加载Loading组件示例 

Toast和Loading Demo地址

https://github.com/guangqiang-liu/react-native-toastAndLoading

Demo使用使用到的三方组件

  • react-native-root-toast:用来显示
  • toast react-native-root-siblings:用来Loading在App最上层添加视图
  • react-native-vector-icons:IconFont

注意

react-native-vector-icons 需要link 才能使用,同学们需要注意

Toast组件

toast组件这里作者分类8种不同的使用场景,目前能想到的就这多场景了,后面同学们有其他场景,可以自行添加即可,Toast组件中使用到的Icon图标,同学们也可以自行修改

  • 只显示最简单的文本的toast
  • 只显示最简单的文本的长toast,显示时长 + 500毫秒
  • 显示success的toast,success的Toast带有一个成功的对号icon
  • 显示success的toast,支持回调,使用场景类似于登录成功,显示1500毫秒toast,然后在回调函数中跳转到其他页面
  • 显示success的长toast,显示时长 + 500毫秒
  • 显示success的长toast,显示时长 + 500毫秒,支持回调,使用场景类似于登录成功,显示1000毫秒toast,然后跳转到其他页面
  • 显示warning的toast,使用场景类似于登录表单,手机号填写错误
  • 显示报错的toast,使用场景类似于登录表单,提交表单失败

 Loading组件

Loading组件最常用的使用场景就是网络请求时,数据还没有请求回来之前,页面最上层显示一个正在加载的loading框,一来能够防止用户在网络请求时又做其他的操作,二来可以给用户一个更好的体验,不至于页面空白,显得突兀

  1. loading支持手动调用显示:show()
  2. 支持手动关闭显示:hidden()

这里作者建议使用redux来控制Loading的显示与隐藏,这样不用在每一个需要网络请求的页面都手动去调用显示与隐藏,更高端的Loading使用技巧可以参照作者的 https://github.com/guangqiang-liu/OneM

Toast核心源码

const Toast = {

 toast: null,

 show: msg => {
 this.toast = RootToast.show(msg, {
 position: 0,
 duration: 1500
 })
 },

 showLong: msg => {
 this.toast = RootToast.show(msg, {
 position: 0,
 duration: 2000
 })
 },

 showSuccess: (msg, options) => {
 let toast = RootToast.show(
 Platform.OS === 'ios' ?
 <View style={styles.container}>
  <Icon name='check' size={50} color={'#fff'}/>
  <Text style={styles.message}>{msg}</Text>
 </View> : msg, {
 duration: 1500,
 position: RootToast.positions.CENTER,
 ...options,
 })
 setTimeout(function () {
 RootToast.hide(toast)
 typeof options === 'function' ? options && options(): null
 }, 2000)
 },

 showLongSuccess: (msg, options) => {
 let toast = RootToast.show(
 Platform.OS === 'ios' ?
 <View style={styles.container}>
  <Icon name='check' size={50} color={'#fff'}/>
  <Text style={styles.message}>{msg}</Text>
 </View> : msg, {
 duration: 2000,
 position: RootToast.positions.CENTER,
 ...options,
 })
 setTimeout(function () {
 RootToast.hide(toast)
 typeof options === 'function' ? options && options(): null
 }, 2500)
 },

 showWarning: (msg, options) => {
 let toast = RootToast.show(
 Platform.OS === 'ios' ?
 <View style={styles.container}>
  <Icon name='warning' size={40} color={'#fff'}/>
  <Text style={styles.message}>{msg}</Text>
 </View> : msg, {
 duration: RootToast.durations.SHORT,
 position: RootToast.positions.CENTER,
 ...options,
 })
 setTimeout(function () {
 RootToast.hide(toast)
 }, RootToast.durations.SHORT + 500)
 },

 showError: (msg, options) => {
 let toast = RootToast.show(
 Platform.OS === 'ios' ?
 <View style={styles.container}>
  <Icon name='close' size={40} color={'#fff'}/>
  <Text style={styles.message}>{msg}</Text>
 </View> : msg, {
 duration: RootToast.durations.SHORT,
 position: RootToast.positions.CENTER,
 ...options,
 })
 setTimeout(function () {
 RootToast.hide(toast)
 }, RootToast.durations.SHORT + 500)
 }

}

Loading核心源码

const HUD = {

 show: () => {
 sibling = new RootSiblings(
 <View style={styles.maskStyle}>
 <View style={styles.backViewStyle}>
  <ActivityIndicator size="large" color="white" />
 </View>
 </View>
 )
 },

 hidden: ()=> {
 if (sibling instanceof RootSiblings) {
 sibling.destroy()
 }
 }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
JavaScript var声明变量背后的原理示例解析
Oct 12 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
初识Node.js
Sep 03 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
原生JS实现前端本地文件上传
Sep 08 #Javascript
JS实现可视化文件上传
Sep 08 #Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 #Javascript
vue-router的HTML5 History 模式设置
Sep 08 #Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 #Javascript
react 父子组件之间通讯props
Sep 08 #Javascript
js代码规范之Eslint安装与配置详解
Sep 08 #Javascript
You might like
php 求质素(素数) 的实现代码
2011/04/12 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
总结一些js自定义的函数
2006/08/05 Javascript
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
Python二分法搜索算法实例分析
2015/05/11 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
python模拟表单提交登录图书馆
2018/04/27 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
python实现简单学生信息管理系统
2020/04/09 Python
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
积极分子思想汇报
2014/01/04 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
横店影视城导游词
2015/02/06 职场文书
新员工辞职信范文
2015/05/12 职场文书
离婚代理词范文
2015/05/23 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
高中语文教学反思范文
2016/02/16 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python