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中加载图片自适应大小主要实现代码
Aug 23 Javascript
JavaScript实现三阶幻方算法谜题解答
Dec 29 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
Vue实现导航栏的显示开关控制
Nov 01 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
vue和小程序项目中使用iconfont的方法
May 19 Javascript
原生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下网站防IP攻击代码,超级实用
2010/10/24 PHP
php设计模式小结
2013/02/15 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
PHP实现定时执行任务的方法
2014/10/05 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
轮播图组件js代码
2016/08/08 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
用Python创建声明性迷你语言的教程
2015/04/13 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
Python实现的端口扫描功能示例
2018/04/08 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
python判断无向图环是否存在的示例
2019/11/22 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
Html5页面二次分享的实现
2018/07/30 HTML / CSS
拾金不昧的表扬信
2014/01/16 职场文书
安全承诺书格式
2014/05/21 职场文书
会计求职信范文
2014/05/24 职场文书
目标责任书格式
2014/07/28 职场文书
工程索赔意向书
2014/08/30 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书