​基于官方文档http://reactnative.cn/docs/embedded-app-android.html#content

由于官方文档语焉不详，一些详细步骤没有配置好的话很容易植入失败，这里工具是AS，我是在Mac上做的，，尝试并且最终成功了。

React植入原生应用步骤：（注意是Mac上的，windows尚未尝试）

步骤1:  植入前提

一个已有的、基于gradle构建的Android应用

Node.js，参见官方文档了解相关的设置操作。（环境是否配置好的检验标准是能否成功初始化一个RN工程并运行在手机上）

步骤2: 在App里添加依赖和权限

在App里的build.gradle文件中（不是project目录下那个build.gradle），添加React Native依赖：

compile 'com.facebook.react:react-native:0.18.+'

尽量选择React Native库的最新稳定版本。

然后，在AndroidManifest.xml里增加Internet访问权限：

步骤3: 添加原生代码，即以React为View的Activity

官方文档目前是0.18版本以前的，我这里按照0.18版本的（基本一样的，只是官方又进一步封装给我们用）

新建MyReactActivity,继承ReactActivity，代码如下。

只有三个抽象方法需要实现，默认是返回null，需要修改。

public class MyReactActivity  extends ReactActivity{

@Override

protected String getMainComponentName() {

return "myreactactivity";  //注册的react组件名，一会在JS里要用到

}

@Override

protected boolean getUseDeveloperSupport() {

return BuildConfig.DEBUG; // Debug模式，这个模式才能在JS里作调试

}

@Override

protected List getPackages() {

return Arrays.asList(

new MainReactPackage()

);  //返回带有官方已有的package的集合

}

}

由于是Activity，需要建立完毕后在AndroidManifest.xml里注册。

此外，也要注册另外一个开发菜单Activity（官方API），否则不能调出开发设置界面

<activity android:name=".MyReactActivity"

android:screenOrientation="portrait"

android:configChanges="keyboard|keyboardHidden|orientation|screenSize" />

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

步骤4: 添加React环境

打开控制台，在当前工程根目录里执行（AS直接点击下面的控制台就可以）

npm init

会有提示，说执行 npm help json可以查看下面具体属性的定义 和npm install --save可以生成包。

注意：就算有需要，也不要马上输入这两个命令来做，输了也不会有作用，因为下面已经开始要你输入name属性了。

然后会要求依次输入name,version,description,main,test command,author,license等属性。

这是要生成的package.json里的内容。具体该怎么填写，建议control + C 退出当前命令后执行 npm help json，

然后把这个帮助说明文档一点点全部复制下来（不大），大致看看注意要点，后面填写时不明白的就查查看。

需要提示一点是这些属性有的不能随便写，否则构建不成功。

我的那些属性最终如下，有些是根据自己的React模块填写的，有的是根据刚才那个帮助文档填写的。

{

"name": "myreactactivity",

"version": "0.0.1",

"description": "this is the package.json",

"main": "index.js",

"scripts": {

"start": "node_modules/react-native/packager/packager.sh" //这个是后面添加的

},

"repository": {

"type": "git",

"url": "git+https://github.com/npm/npm.git"

},

"author": "patrick",

"license": "ISC",

"bugs": {

"url": "https://github.com/npm/npm/issues"

},

"homepage": "https://github.com/npm/npm#readme",

"dependencies": {

"react-native": "^0.18.1"

}

}

然后再在控制台里执行

npm install --save react-native

会下载nodejs和RN等的依赖。

执行完以后控制台应该不会出现WARN信息，若出现的话很可能就是构建不成功（可以继续往下操作步骤，不行的话就是这一步没成功），

若的确构建不成功，很大可能是上面的package.json的有些属性填写不正确。需要重新npm init。

继续在控制台执行

curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

现在打开新创建的package.json文件然后在scripts字段下添加如下内容：

"start": "node_modules/react-native/packager/packager.sh" // 我的上面已经有的就是在这一步添加的

步骤5: 添加JS代码

在project目录下（也就是package.json所在目录）新建名为index.android.js的JS文件，在里面拷贝如下内容

'use strict';

var React = require('react-native');

var {

Text,

View

} = React;

class myreactactivity extends React.Component {

render() {

return (

Hello, World

)

}

}

var styles = React.StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

},

hello: {

fontSize: 20,

textAlign: 'center',

margin: 10,

},

});

React.AppRegistry.registerComponent('myreactactivity', () => myreactactivity);

这就是个JS文件，会ReactJS的可以随便写了，只要引入的组件名对的上就好。

步骤6: 添加安卓关联代码

上面的新建的MyReactActivity可以设置为入口activity，也可以设置为普通activity。

如果打算设置为入口activity的话，就在清单文件里自己配置就可以，不需要额外代码；

如果打算设置为普通acitivity,就按正常原生activity一样配置和用代码启动就好。

总结一句话就是：启动和加载这个MyReactActivity按照原生Activity一样配置和加载就好。

步骤7: 运行应用

先在工程目录下启动JS服务器，在控制台运行

npm start

然后启动APP，用AS的正常Run就可以。

第一次到MyReactActivity界面肯定是红屏，需要摇出开发菜单设置IP和端口，然后Reload JS就行。

正常情况下现在可以看到Hello World了。

如果还是红屏的话就需要看看显示的错误是啥并且针对修改了。

PS：用Mac的话有个找原因的小窍门，打开Xcode（没有的话需要下载，免费的），在手机上运行RN时，出错的信息可以在Xcode上看到具体的错误信息。这在解决一些红屏问题时很有用。