/ react native

React Native跨平台移动应用开发实战 - 启动

本文隶属于文章系列 React Native跨平台移动应用开发实战 ,讲解应用的启动,启动需要完成检测网络、获取位置、加载持久化数据、检查登录状态等工作。

  1. 入口
  2. Store创建与持久化
  3. 引导页

入口

入口文件负责store的创建和加载路由,然后就进入路由里定义的初始页,也就是引导页Bootstrap。可以看到iOS和安卓的入口文件内容一样,都是调用setup来完成。setup里创建store,并加载路由,然后应用就进入到引导页。

Store创建与持久化

Redux的store支持通过插件来扩展其功能。
我们使用 Logger for Redux 来打印每个action及其作用前后的状态,方便出现问题时分析到底是哪个action引起。
另外还使用了 Redux Persist 来持久化store到存储,以便应用重启后能恢复到上次退出时的状态,提升应用进入速度,还可以借此支持离线模式。注意,一些临时性的状态不要持久化,比如错误提示、进度提示、网络状态等,以免引起错乱。可以通过添加相关数据项到插件的“blacklist”里来避免持久化。

引导页


引导页组件比较简单,主要是把一些全局状态,包括loading、processing、error,传给Layout,并告知Layout隐藏导航和Tab栏。引导页内容只有居中显示的Logo图片和应用名称。

引导页容器,从store获取页面需要的状态,以及相关的action。跟引导页组件建立连接后,在组件里就可以通过属性访问这些状态和action。

大部分的工作在action里完成。我们知道Redux的reducer只是纯函数,纯函数不能有副作用,像从服务端获取数据、检查网络、获取位置这些工作就只能在action里完成。

获取网络状态。这里有一个RN的Bug,iOS下通过fetch去获取网络是否可用时始终返回false,因此在iOS下我们只采用监听的方式来获取。详见RN Issue iOS: NetInfo.isConnected returns always false

获取位置。国内安卓下使用RN自带的navigator获取不到位置,只能使用第三方的定位SDK来获取,这里使用的是高德地位SDK。

当网络可用并获取到位置时,就去服务器获取登录身份。如果已经登录过,进入应用首页,否则去到登录注册页。