上周,我尝试用 react native 重写一款曾经的 App,本来想用 vue 的,但是觉得可能没有 react native 成熟,生态也可能远没有 react native 好,当然,这是我个人的看法,未必是对的,后来发现 react native 是不错,但原生同样需要掌握。本文主要记录这次重构中遇到的坑,并和两年多前使用 react native 对比,下面进入主题。
我在16年初做过一段时间的 react native 开发,说实话,当时很痛苦,之后离职继续做 Android 原生开发,上周闲来无事,决定用 react native 重写曾经的一款 APP,当时,我是考虑了很久,比如用 react native 呢还是 vue,最后,还是选择了 react native,其实更希望选用 weex 因为 vue.js 的缘故吧。
weex 与 react native 的对比
1、首先,weex 是阿里开源,现在已经捐赠给 apache 基金会,react native 是脸书开源,weex 基于 vue 而 react native 基于 react,至于 vue.js 和 react 的区别本文不做介绍,但我建议使用 vue 或者可以考虑使用 nuxt.js
2、react native 生态比较成熟,开源的组件、库比较多,毕竟开源方面,国人做的整体没有老外好,我们可能也有开源项目,但是还是远远无法与老外比拟吧,所以如果你并不同时熟悉 ios 和 Android 开发,那么请使用 react native,如果你 ios 和 Android 都比较熟练,遇到问题你可以自己扩展,那我觉得 weex 可能更适合你。
再次尝试 react native
我16年初曾写过 react native,当时觉得困难,就放弃了,两年半之后,我对前端的理解领悟也有明显提升,再写 react native 没觉得有明显的学习曲线,反而得心应手。另一个明显的感觉是 react native 没有以前那么卡顿了,加载较大量数据没有明显的卡顿,但依旧不如原生流畅,原生的 Android 使用 mvvm 可以做到局部 ui 更新,而 react native 给我的感觉是重新渲染,所以卡顿是正常的吧。但相比16年年初,有很大的改进了。
expo 是什么鬼
当我再次尝试 react native 的时候,感觉和两年前不一样,主要是要用 expo,而我在咖啡馆撸代码,感觉用 expo 明显很慢嘛,怀疑跟其服务器在国外有关或者网络不好有关系吧,之后用回了 react-native-cli 一切又变得快起来了。expo 官网是:https://expo.io
react native 打包正式版本
1、针对 Android,你需要执行:node node_modules/react-native/local-cli/cli.js bundle --entry-file index.js --bundle-output ./android/app/src/main/assets/index.jsbundle --platform android --assets-dest ./android/app/src/main/res/ --dev false
然后直接导出签名的 apk 文件即可,跟正常的 Android 打包一样。至于是 index.js 还是 index.android.js 或者是 index.jsbundle 还是 index.android.jsbundle 看你的具体情况了,比如你的js里是否有index.android.js 我记得曾今 react native是这样搞的,反正我现在是只有index.js 所以,直接用上面的命令即可生成。
2、针对 ios 我需要先建立文件夹 mkdir ./ios/bundle
然后执行:node node_modules/react-native/local-cli/cli.js bundle --entry-file index.js --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle
同样的,至于是index.js 还是index.android.js 等和Android一样,然后,在 xcode 里选中 与项目名一致的目录,然后右键选择 Add files to xxxx(这里xxx为项目名),弹出的窗口里选择创建的 bundle 文件夹,然后记得勾选 create folder references ,我这里是默认勾选的。然后打包即可,打包可参考:xcode 打包 ipd文件遇到的问题及其解决
写在最后
react native 0.56 改动较大,很多第三方库已经不能使用,你可以选择使用之前的版本,如果不怕坑,可以继续用 0.56 吧。