参考资料：

Android现有工程接入RN开发

嵌入到现有原生应用 - React Native 中文网
原生模块 - React Native 中文网

现有项目接入RN简单来说分以下步骤

1.首先要有一个现成的Android 工程。

2. 安装 react-native组件。

3.在原生app 中初始化 rn 组件部分。

4.编译、运行调试程序。

下面详细步骤：

开发环境准备

安装JavaScript依赖包

在项目根目录下创建一个名为package.json的空文本文件，然后填入以下内容：

{
  "name": "your project name","version": "0.0.1","private": true,"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },"dependencies": {
    "react": "16.0.0-alpha.6","react-native": "0.44.3"
  }
}

接下来我们使用npm来安装React和React Native模块。
打开一个终端/命令提示行，进入到项目目录中（即包含有package.json文件的目录），然后运行下列命令来安装：

$ npm install

把React Native添加到你的应用中

配置maven

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

在项目的 build.gradle 文件中为 React Native 添加一个 maven 依赖的入口，必须写在 "allprojects" 代码块中:

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

配置权限

接着，在 AndroidManifest.xml 清单文件中声明网络权限:

<uses-permission android:name="android.permission.INTERNET" />

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

代码集成

React Native组件

我们首先要写的是"High score"（得分排行榜）的JavaScript端的代码。

创建一个index.android.js文件

index.android.js是React Native应用在Android上的入口文件。而且它是不可或缺的！它可以是个很简单的文件，简单到可以只包含一行require/import导入语句。本教程中为了简单示范，把全部的代码都写到了index.android.js里（当然实际开发中我们并不推荐这样做）。

添加你自己的React Native代码

'use strict';

import React from 'react';
import {
  AppRegistry,StyleSheet,Text,View
} 'react-native';

class HelloWorld extends React.Component {
  render() {
    return (
      <View style={styles.container}> <Text style={styles.hello}>Hello,World</Text> </View>
    )
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,justifyContent: 'center',},hello: {
    fontSize: 20,textAlign: Box-sizing: border-Box; color: rgb(163,margin: 10,});

AppRegistry.registerComponent('MyReactNativeApp',() => HelloWorld);

配置权限以便开发中的红屏错误能正确显示

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    if (!Settings.canDrawOverlays(this)) {
        Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,Uri.parse("package:" + getPackageName()));
        startActivityForResult(intent,OVERLAY_PERMISSION_REQ_CODE);
    }
}

@Override
protected void onActivityResult(int requestCode,int resultCode,Intent data) {
    if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            this)) {
                // SYSTEM_ALERT_WINDOW permission not granted...
            }
        }
    }
}

掌握核心科技：ReactRootView

我们还需要添加一些原生代码来启动React Native的运行时环境并让它开始渲染。首先需要在一个Activity中创建一个ReactRootView对象，然后在这个对象之中启动React Native应用，并将它设为界面的主视图。

如果你想在安卓5.0以下的系统上运行，请用 com.android.support:appcompat 包中的 AppCompatActivity 代替 Activity 。

public MyReactActivity Activity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        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();

        // 注意这里的MyReactNativeApp必须对应“index.android.js”中的
        // “AppRegistry.registerComponent()”的第一个参数
        mReactRootView.startReactApplication(mReactInstanceManager,"MyReactNativeApp",255);">null);  

        setContentView(mReactRootView);
    }

    public invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
}

如果你使用的是 Android Studio,可以使用Alt + Enter快捷键来自动为MyReactActivity类补上缺失的import语句。注意BuildConfig应该是在你自己的包中自动生成，无需额外引入。千万不要从com.facebook...的包中引入！



我们需要把 MyReactActivity 的主题设定为 Theme.AppCompat.Light.NoActionBar ，因为里面有许多组件都使用了这一主题。

<activity android:name=".MyReactActivity" android:label="@string/app_name" android:theme="@style/Theme.AppCompat.Light.NoActionBar">
 </activity>

onPause() {
    super.onPause();

    if (mReactInstanceManager != null) {
        mReactInstanceManager.onHostPause(this);
    }
}

onResume() {
    super.onResume();

    null) {
        mReactInstanceManager.onHostResume(this,21);">onDestroy() {
    super.onDestroy();

    null) {
        mReactInstanceManager.onHostDestroy();
    }
}

@Override
 onBackPressed() {
    null) {
        mReactInstanceManager.onBackPressed();
    } else {
        super.onBackPressed();
    }
}

boolean onKeyUp(int keyCode,KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
        mReactInstanceManager.showDevOptionsDialog();
        return true;
    }
    super.onKeyUp(keyCode,event);
}

$ npm start

$ react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/

不论大神还是新手，欢迎加QQ群一起讨论问题学习技术：230274309