React Native 集成流水帐

原创

fyfcauc 2023-05-24 00:59:50 博主文章分类：项目经历 ©著作权

文章标签 android Android github 文章分类 Python 后端开发

©著作权归作者所有：来自51CTO博客作者fyfcauc的原创作品，请联系作者获取转载授权，否则将追究法律责任

安装环境: Ubuntu-LTS-12.04
http://facebook.github.io/react-native/ React-Native官网。
http://facebook.github.io/react-native/docs/getting-started.html 该教程并不是教你如何集成React Native，只是先教你搭建一个React Native的示例尝尝鲜。
需要安装Nodejs和npm(Nodejs的一个包管理下载器)，教程给的不靠谱，ubuntu下会显示包找不到等问题，建议直接到Nodejs和npm的官方网站进行下载安装(Nodejs >= 6.0, npm >=3.8.6)。安装完毕建议替换/usr/bin/下的node和npm的软链接(ubuntu可能预置了老版本的Nodejs)，保证在命令行下调用的是下载的最新的Nodejs和npm(node -v, npm -v)。
配置Android开发环境和环境变量，follow教程即可，留意需要Android 6.0 SDK和Android SDK Build-Tools 23.0.1。
Watchman的安装可选，建议安装。
先启动一个Android虚拟机(最好版本>=5.0),实机也可以，不过到时候连起来麻烦。
使用npm安装react-native-cli: npm install -g react-native-cli, 如果觉得慢的话，可以用淘宝的npm源: https://npm.taobao.org/(里面有Node.js 镜像地址)。参考自: http://www.jianshu.com/p/cd2a8c5ee1c7
react-native-cli安装完毕就可以运行 “Testing your React Native Installation ” 这一章的命令了。
随后在AwesomeProject目录中运行npm start来运行起develop server，这样运行起来的app才能取到js bundle。
该例子传输的js是index.android.js，可以修改其内容，然后在设备上双击”R”键来刷新修改后的内容。
http://facebook.github.io/react-native/docs/integration-with-existing-apps.html 该教程才是关于集成React Native到当前项目的。
还是要保证Nodejs npm都安装就绪。然后按照流程将react native库下载至Project目录下
在build.gradle中添加maven本地仓库时要注意，保证“$rootDir/../node_modules/react-native/android”确实是你下载的react native的目录，我这里就修改为了$rootDir/node_modules/react-native/android，如果你在gradle sync的时候发现在从远端下载react-native(MavenCentral的是旧版 0.20.0, 而通过npm下载的应该是0.38)，那就说明url对应的目录不对，在这里没有找到之前通过npm下载安装的最新版React-Native。
React-Native要求minSDKVersion=16，这里遇到一个问题，编译时报错:

.../app/build/intermediates/exploded-   aar/com.android.support/appcompat-v7/23.0.1/res/values-v23/values-v23.xml  
Error:Error retrieving parent for item: No resource found that matches the given name 'android:TextAppearance.Material.Widget.Button.Inverse'.  
Error:Error retrieving parent for item: No resource found that matches the given name 'android:Widget.Material.Button.Colored'.

RootCause应该是React-Native引用了AppCompat-v7/23的内容(分析React Native使用的BUCK文件可以发现)，而当前编译使用的SDK版本不是23, 导致找不到需要的内容，解决的途径是将ComplieSDKVersion调整为23(因为React-Native需要AppCompat-v7/23，因此不能将采用将23移除的方法)。
上面解决方案的副作用是之前使用apache网络库的地方找不到库，因为在api 23中，不提供org.apache.http.*(只保留几个类),解决方法: buildGradle的android{}中添加useLibrary ‘org.apache.http.legacy’。

因为当前使用的虚拟机碰巧是x86_64，在运行React-Native时会Crash: /data/data/com.hfox.lovesquare/lib-main/libgnustl_shared.so” is 32-bit instead of 64-bit

解决方案:

1.在项目的根目录的 gradle.properties 里面添加一行代码  android.useDeprecatedNdk=true.
2.在 build.gradle 文件里添加以下代码
android {
...
defaultConfig {
    ...
    ndk {
        abiFilters "armeabi-v7a", "x86"
    }

    packagingOptions {
        exclude "lib/arm64-v8a/librealm-jni.so"
    }
}

另外，React-Native增加的方法数有3W+，一般集成后都会突破65536的方法数限制，因此一般会需要开启multi-dex或者使用插件化方案。
到这一步，基本就集成完毕了，如果要进行简单测试，可以在project目录下运行npm start, 教程的示例code(MyReactActivity)就可以从develop server提取index.android.js做展示。