ReactNative开发封装Toast与加载Loading组件的示例分析
小编给大家分享一下React Native开发封装Toast与加载Loading组件的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
成都创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于成都网站设计、成都做网站、港南网络推广、重庆小程序开发、港南网络营销、港南企业策划、港南品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;成都创新互联公司为所有大学生创业者提供港南建站搭建服务,24小时服务热线:028-86922220,官方网址:www.cdcxhl.com
在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使用技巧可以参照作者的 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' ?: 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' ? {msg} : 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' ? {msg} : 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' ? {msg} : msg, { duration: RootToast.durations.SHORT, position: RootToast.positions.CENTER, ...options, }) setTimeout(function () { RootToast.hide(toast) }, RootToast.durations.SHORT + 500) } } {msg}
Loading核心源码
const HUD = { show: () => { sibling = new RootSiblings() }, hidden: ()=> { if (sibling instanceof RootSiblings) { sibling.destroy() } } }
以上是“React Native开发封装Toast与加载Loading组件的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
文章题目:ReactNative开发封装Toast与加载Loading组件的示例分析
文章URL:http://scyanting.com/article/ipdoog.html