React Native嵌入到现有原生应用

如果你正准备从头开始制作一个新的应用，那么React Native会是个非常好的选择。但如果你只想给现有的原生应用中添加一两个视图或是业务流程，React Native也同样不在话下。只需简单几步，你就可以给原有应用加上新的基于React Native的特性、画面和视图等。

1.核心概念

这里把React Native组件植入到Android应用中有如下几个主要步骤：

1. 首先要了解你要植入的React Native组件。
2. 在Android项目根目录中使用npm来安装react-native ，这样同时会创建一个node_modules/的目录。
3. 创建js文件，编写React Native组件的js代码。
4. 在build.gradle文件中添加com.facebook.react:react-native:+，以及一个指向node_nodules/目录中的react-native预编译库的maven路径。
5. 创建一个React Native专属的Activity(可混合使用)，在其中再创建ReactRootView。
6. 生成对应bundle文件，启动React Native的Packager服务，运行应用。
7. 接下来可自由发挥，添加更多的React Native组件。
8. 在真机上运行、调试（这里需要先更新bundle文件）。
9. 打包。

2.开发环境准备

此处可参考我写的另一篇文章React Native环境搭建，(已有环境的，此处可选择跳过).

3.添加JS代码管理

• 在项目的根目录运行以下命令：

$ npm init
$ npm install --save react react-native
$ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

此时可在Android项目根目录下看到如下文件/文件夹：node_modules/、package.json

• 打开package.json文件，在scripts属性下添加如下字段：

"start": "node node_modules/react-native/local-cli/cli.js start"

• 在根目录下新建js文件夹(存放React Native相关组件)，index.android.js(RN启动文件)。
  主要启动代码如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import {AppRegistry} from 'react-native';
import AwesomeProject from './js/AwesomeProject'
//注册（只要一遍）
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

4.添加App开发准备操作

• 在你app的build.gradle文件内添加React Native相关依赖：

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

• 在你工程build.gradle文件内添加本地React Nativemaven库：

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

注意事项:这里的url路径要写对，否则将出现如下错误：
“Failed to resolve: com.facebook.react:react-native:0.x.x” errors after running Gradle sync in Android Studio.

• AndroidManifest.xml清单文件配置
  
  • 如果你需要访问React Native的DevSettingsActivity，则需要注册
    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

5.准备工作搞定：接下来添加原生代码

• 纯React Native页面主要代码（底部有完整代码地址）