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 相关文章推荐
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
Chosen 基于jquery的选择框插件使用方法
May 30 Javascript
jquery indexOf使用方法
Aug 19 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
原生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动态生成VRML网页
2006/10/09 PHP
PHP获取网卡地址的代码
2008/04/09 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
详解Require.js与Sea.js的区别
2018/08/05 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
Python中的XML库4Suite Server的介绍
2015/04/14 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
python打印异常信息的两种实现方式
2019/12/24 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
小学生红领巾广播稿
2014/01/21 职场文书
医院工作检讨书范文
2014/02/10 职场文书
小区文明倡议书
2014/05/16 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
未婚证明书模板
2014/10/08 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
党建工作汇报材料
2014/12/24 职场文书
金砖之国观后感
2015/06/11 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js