React Native嵌入到Android原生项目中

本文学习整理如何将现有的Android项目中集成React Native，以此记录下。

一.使用npm init命令创建package.json文件

在项目根目录下，执行 npm init命令

01.jpg

执行该命令之后，会要求输入一些基本信息：

02.jpg

之后会显示一段json文件：

{
  "name": "demo",
  "version": "1.0.0",
  "description": "test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "12356"
  ],
  "author": "test",
  "license": "ISC"
}
Is this ok? (yes) yes

敲入yes回车，项目根目录会出现一个 package.json文件。
，然后将“start": "node node_modules/react-native/local-cli/cli.js start"添加到scripts节点中：

05.jpg

二. 执行npm install --save react react-native

执行npm install --save react react-native命令，下载 react-native 模块。
如果执行失败，可配置安装yarn包管理工具来下载，该工具是facebook开发的。

04.jpg

下载完成后，在项目的根目录会看到 “node_modules”文件夹。

三..flowconfig文件创建

可打开如下的链接地址，复制里面的内容，建立一个.flowconfig的文件，然后拷贝到项目的根目录。
https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

四. 添加index.android.js文件

添加index.android.js文件，但是react-native版本到0.40以后该文件就改成了index.js。把该文件放入你项目的根目录下.

五.修改项目中的build.gradle文件

1.添加facebook react 依赖包

   compile "com.facebook.react:react-native:+" // From node_modules.

2.在android节点下添加配置

  configurations.all {
        resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
    }

3.添加NDK的支持

 ndk {
            abiFilters 'armeabi', 'armeabi-v7a', 'armeabi-v8a', "x86"
        }

六.修改项目根目录中的build.gradle文件

1.在allprojects节点下加入maven配置

 maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/node_modules/react-native/android"
        }

以上都配置完成后，React Native就算集成到了我们现有的项目，接下来需要用Activity来展示RN，所以需要编写如下代码：

新版本RN中只需要自定义一个Activity，并继承ReactActivity，实现getMainComponentName方法，在getMainComponentName方法中返回RN注册的名称即可，名称需要与index.android.js中AppRegister的名称相同。通过源码可以看到，其实在ReactActivity中已经帮助我们实现了ReactRoow的添加和ReactInstanceManager的默认配置。

public class MyReactNative01Activity extends ReactActivity {

    @Nullable
    @Override
    protected String getMainComponentName() {
        return "react-example";
    }
}

注意： getMainComponentName()方法中返回的react-example名字，必须和index.js文件中入口参数一致:

AppRegistry.registerComponent('react-example', () => HelloWorld);

然后在自定义的Application中需要继承ReactApplication，在源码loadApp方法中，会将当前Activity的Application强转为ReactApplication，所以这是必须的步骤。

public class AppLoader extends Application implements ReactApplication {
 @Override
    public void onCreate() {
        super.onCreate();

        SoLoader.init(this,false);
  
    }

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

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

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

到最后一步了：
在项目中创建assets文件(app/src/main/assets)，并需要手动来生成bundle文件，放入到该文件夹中。

手动生成bundle文件，需要我们执行如下命令：
       react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/

（1）--platform：平台
（2） --dev：开发模式
（3） --entry-file：条目文件
（4）--bundle-output：bundle文件生成的目录
（5）--assets-dest：资源文件生成的目录

大功告成~~~

运行
1.开启服务，执行：

react-native start

2.运行项目。

注意，如果此时需要摇晃手机弹出配置窗口去配置的话，需要贴加一个activity

  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>

这样就可以~~~~~