C5980bbd10efe23eee4b2335c17d471f
Android 和 iOS 端升级 RN 的经验分享

本文主要分享Android和iOS端升级RN到0.44.0版本的经验。

考虑到我们应用的RN版本有点老,问题较多,所以最近对RN进行一次升级,升级到0.44.0版本,并对Android和iOS的RN模块进行代码改造。期间我主要是完成Android和iOS端RN模块代码的改造工作,另一位前端同学配合一起解决升级过程出现的问题。

作为一个接到RN升级任务的RN小白,下面我就大致介绍下自己完成这个任务时遇到的坑,希望能有所帮助。

1.替换RN新版本的依赖库,同时更新相关配置

我们的项目不是直接基于RN开始的,而是已有的项目集成RN。此外,RN集成的方式也不是源码集成,而是使用RN源码编译生成的静态库。

(1)对于Android来说,项目中依赖的是RN源码下ReactAndroid项目构建得到的aar文件(你还可以继续精简成一个jar文件)。

如何生成这个aar文件呢?

按照官网教程下载RN源码并配置好RN环境之后,在源码根目录下新建gradle.properties文件(用来配置gradle的代理)和local.properties文件(用来指定sdk.dirndk.dir),执行./gradlew :ReactAndroid:installArchives即可看到源码下多了一个android目录,其中就放着我们需要的aar文件。默认的名称是1000.0.0-master,如果你想修改生成的aar的名称,可以通过修改ReactAndroid/gradle.properties文件中的VERSION_NAME来实现。

tips
1.编译RN源码的时候需要配置NDK,版本必须是r10e,不能是更高版本,点击进入下载地址

2.更新RN的aar文件之后,除了需要修改部分API的调用方式之外,还要修改gradle脚本中依赖库的版本号以及混淆规则!

//libraries for RN 0.44.0
compile 'javax.inject:javax.inject:1'
compile 'com.facebook.fbui.textlayoutbuilder:textlayoutbuilder:1.0.0'
compile 'com.facebook.fresco:fresco:1.0.1'
compile 'com.facebook.fresco:imagepipeline-okhttp3:1.0.1'
compile 'com.facebook.soloader:soloader:0.1.0'
compile 'com.google.code.findbugs:jsr305:3.0.0'
compile 'com.squareup.okhttp3:okhttp:3.4.1'
compile 'com.squareup.okhttp3:okhttp-urlconnection:3.4.1'
compile 'com.squareup.okhttp3:okhttp-ws:3.4.1'
compile 'com.squareup.okio:okio:1.9.0'
compile 'org.webkit:android-jsc:r174650'

//import RN aar
compile(name: 'react-native-0.44.0', ext: 'aar')

混淆规则 (注意最后一句,不加会产生问题,不过我觉得这可能不是解决问题最好的方式)

混淆规则内容较多,请看这个gist

3.默认情况下,以上编译操作生成的aar文件中只包含armeabi-v7ax86两种ABI下的so文件,如果运行时提示找不到so文件,那么可能就是你的abiFilter配置错了。但是如果你的应用的abiFilter只能配置为armeabi的话,可以考虑下面的做法:先解压aar文件,在jni目录下新建armeabi文件 夹,并将armeabi-v7a下面的so复制到armeabi中,然后删除x86armeabi-v7a目录,最后重新压缩生成aar文件。

img

img

(2)对于iOS来说,项目中依赖的是11个RN Xcode子项目生成的静态库(.a)文件。

如何生成RN静态库呢?

这里可以通过react-native init命令创建一个新的RN demo项目,然后修改package.json文件,将RN版本调整为0.44.0版本,然后执行npm install,最后打开ios目录下的Xcode项目即可。

tips
1.RN升级到0.44.0版本之后,Deployment Target要设置为8.0以上 (实际上从0.36版本的RN就需要做这个配置了)。

2.项目中除了要引入11个静态库文件,还需要引入RN相关的头文件,这些头文件可以在上面的demo项目的构建结果中找到,一般路径为/Users/[user]/Library/Developer/Xcode/DerivedData/[demo-project]/Build/Products/[Release-xxx]/include,引入之后别忘了添加到Header Search Path中。

3.一定要以release模式构建demo应用,否则生成静态库中RN环境实际上是dev环境,在手机摇晃的情况下会弹出RN的调试菜单!出现异常时还会显示RN的红屏界面!

4.生成静态库的时候要根据项目的配置来确定支持的平台,例如有可能项目需要的是同时支持armv7, arm64, i386, x86_64平台的静态库,那么这个时候就需要使用lipo命令,其中lipo -info命令可以查看一个静态库支持的平台,lipo -create命令可以将支持不同平台的静态库合并。

img

img

5.如果项目依赖高版本的RN静态库,可以正常加载低版本的RN打出来的bundle文件;反之,如果项目依赖的是低版本的RN静态库,那么加载高版本的RN打出来的bundle文件的时候会报错DeviceInfo native module is not installed correctly

top Created with Sketch.