融合react native到自己新建的安卓项目中

在我们对一个新事物没有想法，或者对其完全处于空白状态时，最好的方法是类比，怎么类比呢？经过上一节的内容我们已经能轻松的跑起来一个简单的react native的工程，还记得这张截图吗？

react native项目目录结构

我们现在拿这张rn项目的结构与我们新建的android项目结构进行类比一下：

Android项目目录结构

经过简单的类比，会发现，我们的安卓项目里比RN项目少几个文件，那么这几个文件哪些才是支撑起RN项目跑起来的文件呢。这当然不是瞎猜就能想出来的，接下来请移步react native的官网Integration With Existing Apps：integration with existing app，大家完全可以按照官方介绍的来一步一步的走，但是这样，我不就装逼失败了吗。诸君请看官方给的融合项目的命令：

command ‘s integration with app

npm init 该命令是为了创建package.json文件，

npm install--save react react-native 该命令为了安装node_modules这个库

curl-o.flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig 该命令是为了安装.flowconfig .

在package.json文件的上scripts标签下加入"start":"node node_modules/react-native/local-cli/cli.js start"，是为了可以在项目中使用npm命令，比如用npm启动package服务器，或者进行对js文件进行打本地的bundle文件等。

最后那个就不用说了吧，在项目根目录下加入js文件。这样就明了了，原来我们原生项目支持RN只需要添加以下文件

要添加的文件

经过上一节我们已经拥有一个helloword的rn项目，我们将这些文件直接copy到原生项目中。

补充：这样就会让项目局限在某个react native的版本，这是我们不想看到的，假如我们的客户就要求0.40的RN版本怎么办，打开package.json看这块

package.json的script

我们的react - native的版本原来是在此处定义的，将它修改成你需要的版本，在我们目前混合完成的项目的根目录下启动命令npm install 安装对应版本的node_modules。

准备工作完成后，还有两个问题得解决 1、配置gradle文件让我们的代码能依赖到react native的库，2、建立RN入口来显示RN页面。我们知道h5网页在我们Android项目中跑起来是通过webview显示。同理，我们RN也有一个ReactRootView来支持。

gradle配置：在Android studio工程中的gradle文件,有module的gradle,同时也有project的gradle。module中build.gradle的配置信息如下：

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

project中的build.gradle配置信息如下：

allprojects{repositories{...maven{// All of React Native (JS, Android binaries) is installed from npmurl"$rootDir/node_modules/react-native/android"}}...}//此处注意rootDir的路径，保证能引到node_moduls正确的路径

在清单文件AndroidManifest.xml中加入联网权限。

创建入口ReactRootView的activity：（此处直接上截图，具体信息请查看文章末尾的源码链接）