[置顶] 【稀饭】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
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
        }

@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
            );
        }

@Override
protected String getJSMainModuleName() {
//定义js入口文件名称
return super.getJSMainModuleName();
        }

@Nullable
@Override
protected String getBundleAssetName() {
//定义存放在项目asset文件夹下的bundle文件名称
return super.getBundleAssetName();
        }

@Nullable
@Override
protected String getJSBundleFile() {
//自定义bundle文件路径
return super.getJSBundleFile();
        }
    };

@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
    }
}

创建Activity继承ReactActivity

新建TestRnActivity类，并继承ReactActivity

public class TestRnActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
return "eln";//这个名称与js端AppRegistry.registerComponent要一致，可以注册多个入口，例如TestRnActivity2
    }
}

编写js代码

接着打开项目的index.android.js，修改代码

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View,
} from 'react-native';


class Eln extends Component {

    render(){
return(
            <View>
                <Text>我是RN页面第一个入口</Text>
            </View>
    );
    }
}
//eln字符串必修与TestRnActivity$getMainComponentName一致
AppRegistry.registerComponent('eln', () => Eln);

然后和普通RN项目运行一样，运行项目，就看到可以打开RN界面了。

本地给RN界面传递参数

那在打开RN界面时，有时候需要传递参数，那该如何呢？

打开TestRnActivity.java重写getLaunchOptions方法

@Override
protected Bundle getLaunchOptions() {//给js层传递数据，js层通过组件的props获取数据
    Bundle bundle = new Bundle();
    bundle.putString("des","我是从native传递过来的");
return bundle;
}

然后js代码调用

class Eln extends Component {

    render(){
return(
            <View>
                <Text>我是RN页面第一个入口</Text>
                <Text>{this.props.des}</Text>
            </View>
    );
    }
}

这样就可以获取到des参数了。

打包

在我们开发完后，需要将应用进行打包，这里说明下RN和android项目混合开发的打包事项

混淆

按照官网的混淆配置还是报错

Caused by: java.lang.NoSuchFieldError: no field with name='mHybridData' signature='Lcom/facebook/jni/HybridData;' in class Lcom/facebook/react/cxxbridge/CatalystInstanceImpl;
    at com.facebook.react.cxxbridge.ModuleRegistryHolder.initHybrid(Native Method)
    at com.facebook.react.cxxbridge.ModuleRegistryHolder.<init>(Proguard:26)
    at com.facebook.react.cxxbridge.i.a(Proguard:63)
    at com.facebook.react.cxxbridge.CatalystInstanceImpl.<init>(Proguard:106)
    at com.facebook.react.cxxbridge.CatalystInstanceImpl.<init>(Proguard:50)
    at com.facebook.react.cxxbridge.c.a(Proguard:483)
    at com.facebook.react.p.a(Proguard:868)
    at com.facebook.react.p.a(Proguard:103)
    at com.facebook.react.q.a(Proguard:203)
    at com.facebook.react.q.doInBackground(Proguard:182)
    at android.os.AsyncTask$2.call(AsyncTask.java:287)
    at java.util.concurrent.FutureTask.run(FutureTask.java:234)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1080) 
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:573) 
    at java.lang.Thread.run(Thread.java:841) 

混淆配置增加这句

-keep class com.facebook.** { *; }

配置bundle gradle打包命令

在build.gradle配置

apply from: "../../node_modules/react-native/react.gradle"

然后执行在项目下执行命令（dev环境）

gradlew assembleDevRelease

遇到各种编译问题。。。。

执行gradlew assembleDevRelease命令异常

Unsupported major.minor version 52.0

修改gradle.properties

android.useDeprecatedNdk=true

和gradle版本

classpath 'com.android.tools.build:gradle:2.1.0'

还是报错duplicate file。。。

开始排查定位错误因素。。。

• gradle 版本2.2.0，引入react.gradle，assembleRelease报错
• gradle 版本2.1.0-2.1.3，引入react.gradle，assembleRelease报错
• gradle 版本2.1.3，去掉react.gradle的引入，assembleRelease可以正常打包

在去掉脚本的引入因素之前，尝试修改buildTools和gradle版本号，还是报各种错。。。
无奈之下，先放弃使用脚本打包，转向手动打包。

使用bundle手动打包命令

react-native bundle 
--platform android 
--dev false 
--entry-file index.android.js \
--bundle-output android/eln_base/assets/index.android.bundle \ 
--assets-dest android/eln_base/res/

目的是将bundle包生成放在android项目的assets文件夹下

然后项目去掉react.gradle脚本的引入，执行assembleDevRelease，成功打包，解压压缩包，在assets下可以看到多了两个bundle文件。

安装运行，也可以正常打开RN界面

多业务分模块

考虑到真实项目场景，可能不止一个RN入口，有多个业务模块需要使用到RN，但是它们的入口可能又不同，如一开始的图，比如在‘发现’大模块下，有两个小功能模块需要使用RN技术来实现，那么此时就需要各自打开各自的RN界面，那么这种需求如何实现呢？

单bundle

你可能想到了，那就是，一个新的入口，那么我就再建一个ReactActivity。没错的，那么我们创建下TestRnActivity2类。

同TestRnActivity一样，继承ReactActivity，但是getMainComponentName返回不同的名称，加以区别。

public class TestRnActivity2 extends ReactActivity {
@Override
protected String getMainComponentName() {
return "eln2";
    }
}

接着，js端，打开index.android.js，编写eln2

class Eln extends Component {

  render(){
return(
        <View>
            <Text>我是RN页面第一个入口</Text>
            <Text>{this.props.des}</Text>
        </View>
      );
  }
}
class Eln2 extends Component {

  render(){
return(
        <View>
            <Text>我是RN页面第二个入口</Text>
        </View>
      );
  }
}

AppRegistry.registerComponent('eln', () => Eln);
AppRegistry.registerComponent('eln2', () => Eln2);

可以看到我们registerComponent了两个组件，eln和eln2。

最后按上面的打包流程，在assets下生成bundle文件，再打包成apk，安装运行。

点击‘测试RN2’，进入第二个RN界面。

嗯，这样看起来好像初步实现了需求，但是在思考下，如果每次某个模块修改了，就需要更新整个bundle。是否可以这样：各自模块独立，更新也独立？

多bundle

使用多bundle的方案，首先需要让各自的模块加载自己的bundle文件。

修改TestRnActivity和TestRnActivity2，分别重写getReactNativeHost方法

TestRnActivity.java

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(ElnApplication.getInstance()) {
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
    }

@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
        );
    }

@Nullable
@Override
protected String getBundleAssetName() {
//定义存放在项目asset文件夹下的bundle文件名称
return "eln1.android.bundle";
    }

@Override
protected String getJSMainModuleName() {
//定义TestRnActivity2启动入口的js文件
return "eln1.android";
    }
};

@Override
protected ReactNativeHost getReactNativeHost() {//重写ReactNativeHost
return mReactNativeHost;
}

TestRnActivity.java

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(ElnApplication.getInstance()) {
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
    }

@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
        );
    }

@Nullable
@Override
protected String getBundleAssetName() {
//定义存放在项目asset文件夹下的bundle文件名称
return "eln2.android.bundle";
    }

@Override
protected String getJSMainModuleName() {
//定义TestRnActivity2启动入口的js文件
return "eln2.android";
    }
};

@Override
protected ReactNativeHost getReactNativeHost() {//重写ReactNativeHost
return mReactNativeHost;
}

两个模块的bundle文件分别取名为eln1.android.bundle和eln2.android.bundle，它们的js入口文件分别为eln1.android.js和eln2.android.js

接着，需要在js层编写这两个文件。在RN项目目录下创建eln1.android.js和eln2.android.js（和之前的index.android.js同级）

eln1.android.js

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View,
} from 'react-native';


class Eln extends Component {

  render(){
return(
<View>
<Text>我是RN页面第一个入口</Text>
<Text>{this.props.des}</Text>
</View>
 );
 }
}

AppRegistry.registerComponent('eln', () => Eln);

eln2.android.js

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View,
} from 'react-native';

class Eln2 extends Component {

  render(){
return(
      <View>
        <Text>我是RN页面第二个入口</Text>
      </View>
      );
  }
}

AppRegistry.registerComponent('eln2', () => Eln2);

然后使用react-native bundle命令分别生成这两个bundle文件

react-native bundle --platform android --dev false --entry-file eln1.android.js \ --bundle-output android/eln_base/assets/eln1.android.bundle \ --assets-dest android/eln_base/res/

react-native bundle --platform android --dev false --entry-file eln2.android.js \ --bundle-output android/eln_base/assets/eln2.android.bundle \ --assets-dest android/eln_base/res/

最后，打包、安装、运行即可。

但是，你会发现发现eln1和eln2这两个模块并没多少代码，它们的bundle文件就达到来的500多k了，那后面岂不是更大。是的，这是因为react-native在生成bundle文件的时候，会把你import到的模块都打包进去。比如eln1和eln2都使用到了react和react-native模块，那它们的bundle都打包了这两个模块文件。所以，如何优化bundle文件也是个问题，这里给出了58和携程对bundle拆分的方案，满满的干货。

• 基于 React Native 的 58 同城 App 开发实践
• React Native Bundle拆分

58是通过生成一个common bundle，然后和不同模块的bundle进行diff拆分，客户端再进行合并；而携程是直接修改react-native bundle脚本命令，过滤不需要的依赖模块。

总结

本文讲述了，在原有的android项目上集成RN，并就遇到的问题，自己摸索着，记录着，也有对项目多模块多业务方案的一点思考。而每个人的现有项目各不相同，遇到的问题也不尽相同，但就像和我一样，一步一步踩着坑过来，你也会成功的，踩坑的过程就是你成长的步伐。