将ReactNative项目整合到android项目中步骤

学习React-Native已经有一段时间了，以前学习都是新建react-native项目，没有和android项目有什么关联。今天研究了一天，终于大致摸清了将ReactNative项目整合到现有android项目中的方法，其中踩到非常多的坑，都是在网上找资料才解决的，所以现在就记录下来，方便以后再看。组要实现两点功能：1、将React-Native以页面的形式加载到android项目中，在原生页面中点击按钮跳转到react-native页面；2、将React-Native以控件的形式加载在android项目中，在原生页面中，一半为原生控件，一半为react-native控件。

• 1、使用npm init命令创建package.json文件
• 2、使用npm –save react react-native下载源文件
• 3、下载.flowconfig文件
• 4、配置Android项目react-native依赖库
• 5、配置React-Native本地代码路径
• 6、修改package.json文件
• 7、创建原生安卓类，作为加载react-native容器
• 8、修改AndroidManifest.xml配置文件
• 9、运行react-native start，启动服务器
• 10、错误解决
• 参考资料： [1. 如何把React Native嵌入到原生android应用中 ]、[2.React Native 集成到已有项目]

---

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

在你的android项目中的根目录下，shift+鼠标左键，选择在此处打开命令窗口，即可进入到cmd,输入npm init命令（前提是需要安装node.js）会要你输入一些项目的相关信息，这里只要写项目名称即可，其他的东西随你自己，在写完之后输入yes即可。配置好的package.json文件如下图。

2、使用npm –save react react-native下载源文件

运行此命令就可以下载react以及react-native到项目根目录下了，下载完成后会在Android项目的根目录下生成一个node_modules文件夹。如果原来有react-native项目，可以直接从原项目中直接拷贝放到根目录下。

3、下载.flowconfig文件

flowconfig是给flow用的，flow的作用前面已经讲过了，主要用来做静态代码检查。我们可以输入如下命令在生成.flowconfig文件.这里提供下载该文件链接 https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig，下载完成后将文件名称改成.flowconfig放在Android项目根目录下即可。

4、配置Android项目react-native依赖库

因为我们将react集成到已有项目，而android项目是靠gradle来进行构建编译的，因此这里我们需要对应修改相应的内容。在app中的build.gradle中dependencies 添加compile “com.facebook.react:react-native:+” ，+号表示跟随系统最新版本，也可以写上具体的安装的版本，这里我自己是知道安装的版本号是0.39.2这个版本，截图如下：
图片中有三处标红了的，这是因为集成完成后会出现一些问题，需要在此文件下做这些修改。其中ndk {abiFilters “armeabi-v7a”, “x86”}这句是缺少SO错误添加，这一句
configurations.all {
resolutionStrategy.force ‘com.google.code.findbugs:jsr305:1.3.9’
}是在编译整个项目时编译出错。最下面的红框就是添加react-native依赖库了。

5、配置React-Native本地代码路径

本步骤是制定Android-studio编译react-native时用制定路径下的代码，大致这个意思。这里添加是在根目录下的build.gradle中修改，放在在allprojects节点下。截图如下：
修改后重新编译项目，会发现在external libraries下有react-native这个文件夹，后面带着版本号，如果版本号是0.2.XXX的话，说明此次添加失败。截图如下：

6、修改package.json文件

修改package.json文件见第一张图的截图，最终的信息就如图所示。这里不在多说。

7、创建原生安卓类，作为加载react-native容器

在你android原生项目下重新新建一个类，我这里新建类名为MyReactActivity，作为加载React-Native控件。

import android.app.Activity;import android.os.Bundle;import android.view.KeyEvent;import com.facebook.react.ReactInstanceManager;import com.facebook.react.ReactRootView;import com.facebook.react.common.LifecycleState;import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;import com.facebook.react.shell.MainReactPackage;public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {    private ReactRootView mReactRootView;    private ReactInstanceManager mReactInstanceManager;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.myreactdemo);        mReactRootView = new ReactRootView(this);        mReactInstanceManager = ReactInstanceManager.builder()                .setApplication(getApplication())                .setBundleAssetName("index.android.bundle")                .setJSMainModuleName("index.android")                .addPackage(new MainReactPackage())                .setUseDeveloperSupport(BuildConfig.DEBUG)                .setInitialLifecycleState(LifecycleState.RESUMED)                .build();        //reactdemo这个名字要与package.json、以及react-native中index.android.js中的项目名要一致，否则会出错。        mReactRootView.startReactApplication(mReactInstanceManager, "reactdemo", null);        setContentView(mReactRootView);    }    @Override    public void invokeDefaultOnBackPressed() {        super.onBackPressed();    }    @Override    protected void onResume() {        super.onResume();        if (mReactInstanceManager != null) {            mReactInstanceManager.onHostResume(this, this);        }    }    @Override    protected void onPause() {        super.onPause();        if (mReactInstanceManager != null) {            mReactInstanceManager.onHostPause(MyReactActivity.this);        }    }    @Override    protected void onDestroy() {        super.onDestroy();        if (mReactInstanceManager != null) {            mReactInstanceManager.onHostDestroy(MyReactActivity.this);        }    }    @Override    public void onBackPressed() {        if (mReactInstanceManager != null) {            mReactInstanceManager.onBackPressed();        } else {            super.onBackPressed();        }    }    @Override    public boolean onKeyUp(int keyCode, KeyEvent event) {        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {            mReactInstanceManager.showDevOptionsDialog();            return true;        }        return super.onKeyUp(keyCode, event);    }}//react-native项目中的代码如下：index.android.js文件直接放在Android项目根目录下就行。import React,{Component} from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';class HelloWorld extends React.Component {  render() {    return (      <View style={styles.container}>        <Text style={styles.hello}>这是React-Native组件</Text>      </View>    )  }}var styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    backgroundColor:'#ccc',  },  hello: {    fontSize: 20,    color: '#fff',    textAlign: 'center',    margin: 10,  },});//注意这里的reactdemo哦AppRegistry.registerComponent('reactdemo', () => HelloWorld);

8、修改AndroidManifest.xml配置文件

这里需要添加一些访问网络的权限、添加类注册等。这里就直接看截图吧，注意，用红色框圈住的就是必须添加的权限，少一项都会有你意想不到的结局，整理这个我可是花了一天的时间才弄明白，中间的辛酸只有自己知道啊。

到这一步集成就已经完成，不过后面肯定会有错误出现的，暂且不管，一步一步来，遇到问题在去百度，总是可以解决的，就看自己是否有耐心了。

9、运行react-native start，启动服务器

进入到Android项目根目录，打开cmd,切换到该路径下，然后运行react-native start.
最后看到如下界面说明你这一步又成功了，你离成功就越来越近了。

10、运行项目

直接在android-studio中运行项目即可，如果顺利的话应该会出现自己想要的结果。
这里就直接看结果吧：
还是先看看项目的完整文件结构：

以下是运行结果：

11、错误解决

关于运行出结果之前是遇到了很多的错误，这里主要是参考了两篇博客，里面会有解决错误方法，这里就不在写了，这两篇博客的链接在文章的最上边已经贴出来了，这里也就不在重复了。好了，这就写完了。希望有react-native的人一起学习，一起进步。