【稀饭】react native 系列教程之已有项目接入React Native

概述

本文是基于目前公司的一个真实项目编写的，由于是边实践边记录，遇到什么问题和如何解决的，所以你看这篇文章的时候，可能有时候会觉得不是很流畅，特此说明。

引入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