概述
本文是基于目前公司的一个真实项目编写的,由于是边实践边记录,遇到什么问题和如何解决的,所以你看这篇文章的时候,可能有时候会觉得不是很流畅,特此说明。
引入React Native
build.gradle配置
compile 'com.facebook.react:react-native:+'
react-native的res使用到了23sdk的资源,因此编译的sdk要求是23
compileSdkVersion 23
buildToolsVersion '23.0.3'
但这样如果你项目中使用到了HttpClient这个类的话,由于sdk 23版本已经将其移除掉,所以要多加配置
android {
useLibrary 'org.apache.http.legacy'
}
项目原来的gradle版本是1.2.3,但这句配置需要升级到最新版本2.0.0
dependencies {
classpath 'com.android.tools.build:gradle:2.2.0'
}
gradle-wrapper.properties
distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip
react-native的minSdkVersion是16
android:minSdkVersion="16"
如果你在AndroidManifest.xml配置了该项,并且低于16,为了编译通过,需配置overrideLibrary
<uses-sdk
tools:overrideLibrary="com.facebook.react"
android:minSdkVersion="14"
android:targetSdkVersion="21" />
还需添加react native的DevSettingActivity
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
multiDex
然后试着编译运行,结果报错,原因是由于引进react-native,方法超出了64k限制,需要拆分dex。
再配置build.gradle
defaultConfig {
multiDexEnabled true
}
然后自己的Application继承MultiDexApplication,或者重写attachBaseContext方法
protected void attachBaseContext(Context base) {
super.attachBaseContext(base);
MultiDex.install(this);
}
RN配置本地仓库
这下编译通过了,但是发现react-native版本是0.21,并不是最新版本的,所以这里我们要将项目目录修改为react-native项目目录。
创建了DX目录,将原来的项目android移到二级目录,然后剩下的几个文件和node_modules可以从react-native初始项目中拷贝过来(也可以执行npm init&npm install命令,但是太慢了),修改package.json里面的name为项目名称。
react-native项目中android项目的文件夹名称是为‘android’,刚好和我们原来的android项目一致,但是是否一定要取名为‘android’有待验证。
接着,修改android项目的根目录下的build.gradle
allprojects {
repositories {
mavenLocal()
jcenter()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
//使用本地仓库,使react native 版本是最新的
url "$rootDir/../node_modules/react-native/android"
}
}
}
添加了本地仓库,url填写的是node_modules目录下的react-native
好了,重新编译一下,react-native版本是0.31的了(目前官网最新的版本是0.34,本地还没有更新)。
本地打开RN界面
实现ReactApplication接口
首先需要在自己的Application,比如本项目中的ElnApplication实现ReactApplication接口,重写getReactNativeHost方法,给RN提供一个默认的ReactNativeHost
public class ElnApplication extends BaseApplication implements ReactApplication{
//...省略其它代码
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override