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的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
JQuery选择器特辑 详细小结
May 14 Javascript
JavaScript面向对象之Prototypes和继承
Jul 12 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
JS 实现分页打印功能
May 16 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
VUE+node(express)实现前后端分离
Oct 13 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 Javascript
原生JS实现分页
Apr 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防止SQL注入详解及防范
2013/11/12 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
python使用wxpython开发简单记事本的方法
2015/05/20 Python
python一键升级所有pip package的方法
2017/01/16 Python
Python爬豆瓣电影实例
2018/02/23 Python
python psutil库安装教程
2018/03/19 Python
Python比较配置文件的方法实例详解
2019/06/06 Python
python批量处理文件或文件夹
2020/07/28 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
特步官方商城:Xtep
2017/03/21 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
酒店总经理助理职责
2014/02/12 职场文书
部门年终奖分配方案
2014/05/07 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
教师师德表现自我评价
2015/03/05 职场文书
功夫熊猫观后感
2015/06/10 职场文书
《打电话》教学反思
2016/02/22 职场文书
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android