经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » iOS » 查看文章
React Native封装Toast与加载Loading组件
来源:cnblogs  作者:光强  时间:2018/9/25 19:59:32  对本文有异议

React Native开发封装Toast与加载Loading组件

在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Native官方并没有提供者这两个常用组件,需要开发者自己根据需求来自定义。作者就在其他组件的基础上在进行二次封装,使用起来更加简单,更具扩展性,同学们只需将Toast与Loading文件拖到项目中,install对应的组件库即可

效果图

gif
gif

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核心源码

  1. const Toast = {
  2. toast: null,
  3. show: msg => {
  4. this.toast = RootToast.show(msg, {
  5. position: 0,
  6. duration: 1500
  7. })
  8. },
  9. showLong: msg => {
  10. this.toast = RootToast.show(msg, {
  11. position: 0,
  12. duration: 2000
  13. })
  14. },
  15. showSuccess: (msg, options) => {
  16. let toast = RootToast.show(
  17. Platform.OS === 'ios' ?
  18. <View style={styles.container}>
  19. <Icon name='check' size={50} color={'#fff'}/>
  20. <Text style={styles.message}>{msg}</Text>
  21. </View> : msg, {
  22. duration: 1500,
  23. position: RootToast.positions.CENTER,
  24. ...options,
  25. })
  26. setTimeout(function () {
  27. RootToast.hide(toast)
  28. typeof options === 'function' ? options && options(): null
  29. }, 2000)
  30. },
  31. showLongSuccess: (msg, options) => {
  32. let toast = RootToast.show(
  33. Platform.OS === 'ios' ?
  34. <View style={styles.container}>
  35. <Icon name='check' size={50} color={'#fff'}/>
  36. <Text style={styles.message}>{msg}</Text>
  37. </View> : msg, {
  38. duration: 2000,
  39. position: RootToast.positions.CENTER,
  40. ...options,
  41. })
  42. setTimeout(function () {
  43. RootToast.hide(toast)
  44. typeof options === 'function' ? options && options(): null
  45. }, 2500)
  46. },
  47. showWarning: (msg, options) => {
  48. let toast = RootToast.show(
  49. Platform.OS === 'ios' ?
  50. <View style={styles.container}>
  51. <Icon name='warning' size={40} color={'#fff'}/>
  52. <Text style={styles.message}>{msg}</Text>
  53. </View> : msg, {
  54. duration: RootToast.durations.SHORT,
  55. position: RootToast.positions.CENTER,
  56. ...options,
  57. })
  58. setTimeout(function () {
  59. RootToast.hide(toast)
  60. }, RootToast.durations.SHORT + 500)
  61. },
  62. showError: (msg, options) => {
  63. let toast = RootToast.show(
  64. Platform.OS === 'ios' ?
  65. <View style={styles.container}>
  66. <Icon name='close' size={40} color={'#fff'}/>
  67. <Text style={styles.message}>{msg}</Text>
  68. </View> : msg, {
  69. duration: RootToast.durations.SHORT,
  70. position: RootToast.positions.CENTER,
  71. ...options,
  72. })
  73. setTimeout(function () {
  74. RootToast.hide(toast)
  75. }, RootToast.durations.SHORT + 500)
  76. }
  77. }

Loading核心源码

  1. const HUD = {
  2. show: () => {
  3. sibling = new RootSiblings(
  4. <View style={styles.maskStyle}>
  5. <View style={styles.backViewStyle}>
  6. <ActivityIndicator size="large" color="white" />
  7. </View>
  8. </View>
  9. )
  10. },
  11. hidden: ()=> {
  12. if (sibling instanceof RootSiblings) {
  13. sibling.destroy()
  14. }
  15. }
  16. }

更多文章

  • 作者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群

QQ群二维码,500+ RN工程师在等你加入哦
QQ群二维码,500+ RN工程师在等你加入哦
 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号