前言:
ReactNative是什么不必赘述;它的优点以及好处也无需多言;直接上主菜;
1:平台差异
着重于ios/android共用一套代码,这样可以省去人员投入;所以在js代码中尽量采用一套代码实现;这样的结果是很多现成的native模块很可能得重新用js实现一遍;倘若新项目中用到的native模块并不多;所有业务以及模块采用js实现是个不错的方案;js中需要用到的值在native代码的入口处一并传过来例如
android:
ios:
以后涉及到业务变更时毋须修改两次;差异化的地方加以区分;比如调用了native模块的不得不采用分开的代码实现的
即使ReactNative的口号是learn once write anywhere;我们也能稍加变动实现write once run anywhere
2:瘦身native
所有的资源包括图片字体等除了在native代码里必须使用的;都放在了js端;与js打包并压缩放在ios/android的工程目录下(压缩后能让压缩包的体积比如我的项目的压缩包就只有400来K大大缩小apk/ipa包的体积,打包请移步第三部分);生成的apk/ipa里面就有了一份jsBundle以及对应的资源;
app启动时候的第一个界面一般是欢迎或者登陆或者介绍页;该部分的页面部分不会太多;采用native来实现;并在后台开始默默解压此压缩包到指定目录(该目录即为即将进入的ReactNative页面部分的入口,如果该目录或者文件已经存在;则说明已经解压过了略过即可,我采用的目录ios为/Docoment/xxx;安卓为/data/data/xxx);这样做的好处在于以后需要更新jsBundle的时候直接下载压缩包解压后覆盖该目录的内容即可(如有采用其他方式更新的比如codePush则不在此列举之内;我并没有采用codePush的更新方式;如有采用的请另寻方案);相应的入口部分代码就就的对应压缩后的目录里的bundle
andriod的入口部分js位置即为指向指定目录的filepath;
ios:
3:打包
打包的脚本和实现google一些能搜出一打来;这里参考
https://segmentfault.com/a/1190000004189538
https://segmentfault.com/a/1190000004192816
我采用方式跟以上博客略有不同;在于我并没有直接到包到对应的资源目录;而是后期处理过(比如压缩)再拷贝过去;
我的打包部分命令其中对应的目录要预先建立好;如有更好的shell编程能力;在脚本里判断没有目录先建目录一样;打包命令如下
ios:
react-native bundle --entry-file index.ios.js --bundle -output ./iosBundle/v1.0.0/index.ios.bundle--platform ios--assets-dest ./iosBundle/v1.0.0--dev false
android:
react-native bundle --entry-file index.android.js --bundle-output ./androidBundle/v1.0.0/index.android.jsbundle --platform android--assets-dest ./androidBundle/v1.0.0--dev false
版本号在于以后升级包的时候有用处;如果采用全量升级包;不用考虑;全部替换即可;如果是增量包;则要比对当前的app端的包的版本;再同相应的比对增量更新思路参考
https://segmentfault.com/a/1190000004352162
4:更新
2和3部分均有说明;更新的过程就是下载对应版本的压缩包;解压到指定的目录覆盖如果是全量更新则直接覆盖即可;增量更新则与既有的合并;每个包都是知道自己的版本的;在比对的时候服务器上会放一个版本号;每次启动去检查自己的版本和服务器当前版本即可知道需不需要更新即可
如果需要升级native代码;则记得每次放在里面apk/ipa的包都是最早的;也就是第一个版本的压缩包;这样保证其可用;再通过比对jsBundle的版本做升级处理;
最后附上作品地址;大家体验下;顺便提提bug
android:
ios:
参考文献:
https://segmentfault.com/a/1190000004189538
https://segmentfault.com/a/1190000004192816
https://segmentfault.com/a/1190000004352162
