React Native封装Toast与加载Loading组件
React Native开发封装Toast与加载Loading组件
在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Native官方并没有提供者这两个常用组件,需要开发者自己根据需求来自定义。作者就在其他组件的基础上在进行二次封装,使用起来更加简单,更具扩展性,同学们只需将Toast与Loading文件拖到项目中,install对应的组件库即可
效果图
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框,一来能够防止用户在网络请求时又做其他的操作,二来可以给用户一个更好的体验,不至于页面空白,显得突兀
- loading支持手动调用显示:show()
- 支持手动关闭显示:hidden()
这里作者建议使用redux来控制Loading的显示与隐藏,这样不用在每一个需要网络请求的页面都手动去调用显示与隐藏,更高端的Loading使用技巧可以参照作者的React Native开发项目: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() } } }
更多文章
- 作者React Native开源项目OneM【500+ star】地址(按照企业开发标准搭建框架完成开发的):https://github.com/guangqiang-liu/OneM:欢迎小伙伴们 star
- 作者简书主页:包含60多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5欢迎小伙伴们:多多关注,多多点赞
- 作者React Native QQ技术交流群:620792950 欢迎小伙伴进群交流学习
- 友情提示:在开发中有遇到RN相关的技术问题,欢迎小伙伴加入交流群(620792950),在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家,谢谢大家支持!
小伙伴们扫下方二维码加入RN技术交流QQ群
转载于:https://www.cnblogs.com/guangqiang/p/9602093.html
React Native封装Toast与加载Loading组件相关推荐
- react项目如何按需加载antdDesign组件
react项目如何按需加载antdDesign组件分为两种情况: 第一种手写的,不使用脚手架: 1.安装: npm install ant --save 2.引用: import { Alert, F ...
- 一个常用的自定义弹框封装(适配 AndroidX),加载 ProgressDialog,状态显示的 StatusDialog 和自定义 Toast,全部支持背景颜色,圆角,边框和文字的自定义,构建者模
MNProgressHUD 项目地址:maning0303/MNProgressHUD 简介: 一个常用的自定义弹框封装(适配 AndroidX),加载 ProgressDialog,状态显示的 S ...
- axios 配置loading_vue axios配置 发起请求加载loading请求结束关闭loading
axios带有请求拦截器,避免在每个请求里面加loading重复操作,可以封装进去,在请求开始时加载loading层,请求结束关闭,loading层用vux的loading加载 axios.js im ...
- Android 花里胡哨的加载Loading动画
记录查找了一些实用的加载动画,真的是花里胡哨!!! 1. AVLoadingIndicatorView-master AVLoadingIndicatorView各种加载效果,适合做加载loading ...
- 页面预加载loading动画,再载入内容
默认情况下如果网站请求速度慢,所以会有一段时间的空白页面等等,用户体验效果不好,见到很多的页面都有预加载的效果,加载之前先加载一个动画,后台进程继续加载页面内容,当页面内容加载完之后再退出动画显示内容 ...
- React引入ant-design实现正在加载效果
React引入ant-design实现正在加载效果 1.安装 npm install antd --save 2.导入ant-design // 导入ant design import { Spin, ...
- 7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果(Vue loader)类型
本文完整版:<7 种最棒的 Vue Loading 加载动画组件测评与推荐> 目录 7 种不同类型的 Vue Loading 加载动画组件 1. Vue Simple Spinner - ...
- 安卓设置菊花动画_Android仿ios加载loading菊花图效果
项目中经常会用到加载数据的loading显示图,除了设计根据app自身设计的动画loading,一般用的比较多的是仿照ios 的菊花加载loading 图,当然一些条件下还会涉及到加载成功/ 失败情况 ...
- 第一百四十一节,JavaScript,封装库--DOM加载
JavaScript,封装库--DOM加载 DOM加载,跨浏览器封装DOM加载,当网页文档结构加载完毕后执行函数,不等待图片音频视频等文件加载完毕 /** dom_jia_zai()函数,DOM页面加 ...
最新文章
- php redis 源码分析,从源码中分析关于phpredis中的连接池可持有数目
- import java.io 包下载_Go 包管理机制深入分析
- C#断点续传原理与实现
- python os.path.exists判断文件或文件夹是否存在
- ExtJS 异步加载树节点
- cmd控制远程电脑运行程序_电脑远程控制怎么,远程桌面开启教程
- clientdataset1.filter like怎么用_除了like, 英语还能这样说“喜欢”!
- java array使用_Java_ArrayLit详细用法
- 【皇甫】☀PPT里的小玩意
- java restful文件传输_Spring Boot 2.0实现基于Restful风格的文件上传与下载APIs
- HTML超好看的个人主页源码+支持响应式
- RTKLIB源码解析(三)、 Rinex文件读取(rinex.c)——1
- 拆分PDF文件的一个办法
- 简单几步解决ie打不开闪退的问题 亲测有效
- ​“人工智能”初创公司所面临的问题
- 搭建微信小程序HTTPS服务器
- 国考计算机及其应用科目,2018国家公务员考试专业科目考试大纲(计算机类)
- linux创建ps格式文件怎么打开,ps文件扩展名,ps文件怎么打开?
- [知识总结]Dp-区间dp
- 【小5聊】前端基础之上传图片等文件IE浏览器是会显示两个请求