参考资料：

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

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

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

2. 安装 react-native组件。

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

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

下面详细步骤：

开发环境准备

首先按照开发环境搭建教程来安装React Native在安卓平台上所需的一切依赖软件（比如npm）。

安装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 info react和npm info react-native来查看当前的最新版本。另外，react-native对react的版本有严格要求，高于或低于某个范围都不可以。本文无法在这里列出所有react native和对应的react版本要求，只能提醒读者先尝试执行npm install，然后注意观察安装过程中的报错信息，例如require react@某.某.某版本,but none was installed，然后根据这样的提示，执行npm i -S react@某.某.某版本。如果你使用多个第三方依赖，可能这些第三方各自要求的react版本有所冲突，此时应优先满足react-native所需要的react版本。其他第三方能用则用，不能用则只能考虑选择其他库。

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

$ npm install

把React Native添加到你的应用中

配置maven

在你的app中 build.gradle 文件中添加 React Native 依赖:

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" />

开发者菜单一般仅用于在开发时从Packager服务器刷新JavaScript代码，所以在正式发布时你可以去掉这一权限。

代码集成

React Native组件

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

创建一个index.android.js文件

首先在项目根目录中创建一个空的index.android.js文件。

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

添加你自己的React Native代码

在index.android.js中添加你自己的组件。这里我们只是简单的添加一个<Text>组件，然后用一个带有样式的<View>组件把它包起来。

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

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

如果你的应用会运行在Android 6.0（API level 23）或更高版本，请确保你在开发版本中有打开悬浮窗(overlay)权限。

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>

一个 ReactInstanceManager 可以在多个activities或fragments间共享。 You will want to make your own ReactFragment or ReactActivity and have a singleton holder that holds a

. When you need the 
(e.g.,to hook up the 
to the lifecycle of those Activities or Fragments) use the one provided by the singleton. 

 

下一步我们需要把一些activity的生命周期回调传递给ReactInstanceManager： 

 

 

 
onPause() {
    super.onPause();

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

onResume() {
    super.onResume();

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

    null) {
        mReactInstanceManager.onHostDestroy();
    }
}我们还需要把后退按钮事件传递给React Native： 
 
 
@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);
} 
测试集成结果 
 
1. 运行Packager运行应用首先需要启动开发服务器（Packager）。你只需在项目根目录中执行以下命令即可： 

 

 
 
$ npm start 
2. 运行你的应用
保持packager的窗口运行不要关闭，然后像往常一样编译运行你的Android应用(在命令行中执行./gradlew installDebug或是在Android Studio中编译运行)。 

 

编译执行一切顺利进行之后，在进入到MyReactActivity时应该就能立刻从packager中读取JavaScript代码并执行和显示： 

 

 
 
 
在Android Studio中打包
你也可以使用Android Studio来打release包！其步骤基本和原生应用一样，只是在每次编译打包之前需要先执行js文件的打包(即生成离线的jsbundle文件)。具体的js打包命令如下： 
 
$ 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/
注意把上述命令中的路径替换为你实际项目的路径。如果assets目录不存在，则需要提前自己创建一个。 

 

然后在Android Studio中正常生成release版本即可！ 
 

 

 

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

                
                                原文地址：https://www.jb51.cc/react/303089.html
                                 版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

ReactNative——集成RN到原生应用

开发环境准备

安装JavaScript依赖包

配置maven

配置权限

代码集成

创建一个index.android.js文件

添加你自己的React Native代码

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

掌握核心科技：ReactRootView

测试集成结果

1. 运行Packager

2. 运行你的应用

相关推荐