react-native网络加载等待页面
2019-01-02 本文已影响0人
is_E
本文记录一下rn在网络加载的时候在页面最上层覆盖一个Modal的方法,本人也是初学,如有不对之处或者更好的实现方法,请不吝赐教,实现效果如下:

在加载动画出现的时候,界面是被锁定的,当网络请求完成,加载页面消失,此时界面可接收点击事件。
以上效果为mobx + modal实现的:
首先,在根视图上覆盖modal遮罩:

mobx需要自己从git上下载。
为了在请求时只更新加载页面,此处将等待界面单独拎出来作为一个component。
是否处于加载状态在appMobx文件中判断,代码如下:

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