美文网首页
react-native网络加载等待页面

react-native网络加载等待页面

作者: is_E | 来源:发表于2019-01-02 15:47 被阅读0次

        本文记录一下rn在网络加载的时候在页面最上层覆盖一个Modal的方法,本人也是初学,如有不对之处或者更好的实现方法,请不吝赐教,实现效果如下:

        在加载动画出现的时候,界面是被锁定的,当网络请求完成,加载页面消失,此时界面可接收点击事件。

    以上效果为mobx + modal实现的:

    首先,在根视图上覆盖modal遮罩:

    mobx需要自己从git上下载。

    为了在请求时只更新加载页面,此处将等待界面单独拎出来作为一个component。

    是否处于加载状态在appMobx文件中判断,代码如下:

        如此,将网络请求封装成一个class(mobx的观察者),并在网络请求开始的地方调startRequest,返回结果的地方调endRequest即可实现在每次进行网络请求的时候都出现等待界面,无需手动唤起。

        加载界面NetWorkRequestWaitView可自定义,就是一个Component。

    相关文章

      网友评论

          本文标题:react-native网络加载等待页面

          本文链接:https://www.haomeiwen.com/subject/twuzlqtx.html