现有Android项目集成react native

现有工程集成RN步骤：

1、首先使用命令行初始化一个默认RM工程：react-native init RN_Demo

2、新创建文件夹，并将要集成RN的工程放到该文件夹目录下边；

3、将第一步初始化得到的 文件   package.json   App.js   index.js  拷贝存放到要集成RN工程同级目录下；

4、执行npm install  命令，发现生成   node_modules 文件(表示成功)；

5、修改build.gradle文件

5.1、修改配置文件：build.gradle(Module:app)文件集成 ：（compile "com.facebook.react:react-native:+"  // From node_modules）

如下：

dependencies {

    compile fileTree(dir: "libs", include: ["*.jar"])

    compile "com.android.support:appcompat-v7:23.0.1"

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

}

5.1、修改build.gradle(Project:android)

      

maven {

    // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm

    url "$rootDir/../node_modules/react-native/android"

}

增加到   allprojects{····}里边

6、修改清单文件（AndroidMainfest.xml）：

在application中添加注册：

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

7、在BaseApplication中  导包  implements ReactApplication  并实现方法：

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

    protected String getJSMainModuleName() {

        return "index";

    }

};

在 ReactNativeHost中修改返回参数  mReactNativeHost；

@Override

public ReactNativeHost getReactNativeHost() {

    return mReactNativeHost;

}

通过编辑工具（Visual Studio Code）修改配置文件

Package.josn    

Index.js

App.js 

注意事项：

此工程非正规RN工程，所以通过 react-native run-android   不能直接运行到手机上，所以需要通过cmd（react-native run-android ）启动服务后，通过studio运行工程部署到手机上；

踩过的坑：

1、现有工程集成RN出现以下错误：

原因为RN支持的最小SDK为16（  minSdkVersion 16   ）

2、集成后，执行：react-native run-android 报错；   

需要 先执行一下    react-native upgrade  

原因解释：

在将react-native集成到现有的android项目中时，当项目集成完成，运行 “react-native run-android”时出现“ Android project not found,try 'react-native android' ”的提示，但是在运行了react-native android 之后还是不能完成编译打包。出现这个问题主要是因为android项目的目录结构跟react-native支持的目录结构不一致导致的。

提示：当然了你也可以运行“react-native upgrade”，该命令运行之后你会发现你的android项目的目录结构变化了。