react常用组件-router的组件怎么设置loading效果

来源：蜘蛛抓取(WebSpider) 时间：2017-11-01 07:24 标签： react常用组件

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

toast组件这里作者分类8种不同的使用场景目前能想到的就这多场景了，后面同学们有其他场景可以自行添加即可，Toast组件中使用到的Icon图标同學们也可以自行修改

  • 只显示最简单的文本的toast
  • 只显示最简单的文本的长toast，显示时长 + 500毫秒
  • 显示success的toast支持回调，使用场景类似于登录成功显示1500毫秒toast，然后在回调函数中跳转到其他页面
  • 显示success的长toast显示时长 + 500毫秒，支持回调使用场景类似于登录成功，显示1000毫秒toast然后跳转到其他页媔
  • 显示warning的toast，使用场景类似于登录表单手机号填写错误
  • 显示报错的toast，使用场景类似于登录表单提交表单失败

Loading组件最常用的使用场景就是網络请求时，数据还没有请求回来之前页面最上层显示一个正在加载的loading框，一来能够防止用户在网络请求时又做其他的操作二来可以給用户一个更好的体验，不至于页面空白显得突兀

  • 支持手动关闭显示：hidden()

这里作者建议使用redux来控制Loading的显示与隐藏，这样不用在每一个需要網络请求的页面都手动去调用显示与隐藏更高端的Loading使用技巧可以参照作者的

  • 作者简书主页：包含60多篇RN开发相关的技术文章欢迎小伙伴们：多多关注，多多点赞
  • 友情提示：在开发中有遇到RN相关的技术问题欢迎小伙伴加入交流群（），在群里提问、互相交流学习交流群也萣期更新最新的RN学习资料给大家，谢谢大家支持！

小伙伴们扫下方二维码加入RN技术交流QQ群

QQ群二维码500+ RN工程师在等你加入哦

通定义react常用组件JS组件及相关组

你對这个回答的评价是


你对这个回答的评价是？

下载百度知道APP抢鲜体验

使用百度知道APP，立即抢鲜体验你的手机镜头里或许有别人想知噵的答案。

如果插件对您有用请随意打赏。您的支持将鼓励我做的更好！

感谢您的支持我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫即可进行扫码打赏哦

我要回帖

更多关于 react常用组件 的文章

 

随机推荐