RN集成到现有Android原生应用

将React Native集成到现有的Android应用中需要如下几个主要步骤:

  • 首先,你需要有一个React Native项目;
  • 为已存在的Android应用添加React Native所需要的依赖;
  • 创建index.js并添加你的React Native代码;
  • 创建一个Activity来承载React Native,在这个Activity中创建一个ReactRootView来
  • 为React Native服务的容器;
  • 启动React Native的Packager服务,运行应用;
  • 运行、打包;

1、创建一个React Native项目

在做混合开发之前我们首先需要创建一个没有Android和iOS模块的React Native项目。我们可以通过两种方式来创建一个这样的React Native项目:

  1. 通过npm安装react-native的方式添加一个React Native项目;
  2. 通过react-native init来初始化一个React Native项目;

1.通过npm安装react-native的方式添加一个React Native项目

第一步:创建一个名为RNApp的目录,然后在该目录下添加一个包含如下信息的package.json:

{
  "name": "RNApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  }
}

第二步:在为package.json添加react-native
在该目录下执行:

npm install --save react-native

执行完上述命令之后,你会看到如下警告:

image

其中,有一条警告npm WARN react-native@0.57.5 requires a peer of react@16.6.1 but none is installed.告诉我们需要安装react@16.6.1

npm install --save react@16.6.1

至此,一个不含Android和iOS模块的React Native项目便创建好了。

2. 通过react-native init来初始化一个React Native项目;

除了上述方式之外,我们也可以通过react-native init命令来初始化一个React Native项目。

react-native init RNApp

上述命令会初始化一个完成的名为RNApp的React Native项目,然后我们将里面的android和ios目录删除,替换成已存在Android和iOS项目。

2. 添加React Native所需要的依赖

在上文中我们已经创建了个一个React Native项目,接下来我们来看一下如何将这个React Native项目和我们已经存在的Native项目进行融合。

在进行融合之前我们需要将已经存在的Native项目放到我们创建的RNApp下,比如:我有一个名为MyAndroidTest的Android项目,将其放到RNApp目录下:


第一步:配置maven

接下来我们需要为已经存在的MyAndroidTest项目添加 React Native依赖,在RNApp/MyAndroidTest/app/build.gradle文件中添加如下代码:

dependencies {
    implementation 'com.android.support:appcompat-v7:23.0.1'
    ...
    implementation "com.facebook.react:react-native:+" // From node_modules
}

然后,我们为MyAndroidTest项目配置使用的本地React Native maven目录,在RNApp/MyAndroidTest/build.gradle文件中添加如下代码:

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

提示:为确保你配置的目录正确,可以通过在Android Studio中运行Gradle sync 看是否有 “Failed to resolve: com.facebook.react:react-native:0.x.x” 的错误出现,没有错误则说明配置正确,否则说明配置路由有问题。

第二步:配置权限

接下来我们为APP运行配置所需要的权限:检查你项目中的AndroidManifest.xml文件中看是否有如下权限:

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

如果没有,则需要将上述权限添加到AndroidManifest.xml中。

另外,如果需要访问 DevSettingsActivity界面(即开发者菜单),

则还需要在 AndroidManifest.xml 中声明:

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

提示:上述图片就是RN 开发调试弹框中的Dev Settings功能,打开该功能会弹出上图的一个界面,这个界面就是DevSettingsActivity。

第三步:指定要ndk需要兼容的架构(重要)

Android不能同时加载多种架构的so库,现在很多Android第三方sdks对abi的支持比较全,可能会包含armeabi, armeabi-v7a,x86, arm64-v8a,x86_64五种abi,如果不加限制直接引用会自动编译出支持5种abi的APK,而Android设备会从这些abi进行中优先选择某一个,比如:arm64-v8a,但如果其他sdk不支持这个架构的abi的话就会出现crash。如下图:

所以需要在app/gradle 文件中添加如下代码:

defaultConfig {
....�
    ndk {
        abiFilters "armeabi-v7a", "x86"
    }
}

上述代码的意思是,限制打包的so库只包含armeabi-v7ax86

3.创建index.js并添加你的React Native代码

通过上述两步,我们已经为MyAndroidTest项目添加了React Native依赖,接下来我们来开发一些JS代码。

在RNApp目录下创建一个index.js文件并添加如下代码:

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('RNApp', () => App);

上述代码,AppRegistry.registerComponent('RNApp', () => App);目的是向React Native注册一个名为RNApp的组件

另外,在上述代码中我们引用了一个App.js文件:

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

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          这个是RN界面
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
 });

这个App.js文件代表了我们React Native的一个页面

以上就是为本次演示所添加的React Native代码,你也可以根据需要添加更多的React Native代码以及组件出来。

4. 为React Native创建一个Activity来作为容器

经过上述3、4步,我们已经为MyAndroidTest项目添加了React Native依赖,并且创建一些React Native代码和注册了一个名为RNApp的组件,接下来我们来学习下如何在MyAndroidTest项目中使用这个RNApp组件。

为React Native创建一个Activity来作为容器,有两种方法

  • 使用RNPageActivity来作为RN容器
  • 使用ReactPageActivity来作为RN容器

使用RNPageActivity来作为RN容器

首先我们需要创建一个Activity来作为React Native的容器,

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
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 RNPageActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        // 这个"RNApp"名字一定要和我们在index.js中注册的名字保持一致AppRegistry.registerComponent()
        mReactRootView.startReactApplication(mReactInstanceManager, "RNApp", null);

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
}

参数说明

  • setBundleAssetName:打包时放在assets目录下的JS bundle包的名字,App release之后会从该目录下加载JS bundle;
  • setJSMainModulePath:JS bundle中主入口的文件名,也就是我们上文中创建的那个index.js文件;
  • addPackage:向RN添加Native Moudle,在上述代码中我们添加了new MainReactPackage()这个是必须的,另外,如果我们创建一些其他的Native Moudle也需要通过addPackage的方式将其注册到RN中。需要指出的是RN除了这个方法外,也提供了一个addPackages方法用于批量向RN添加Native Moudle;
  • setUseDeveloperSupport:设置RN是否开启开发者模式(debugging,reload,dev memu),比如我们常用开发者弹框;
  • setInitialLifecycleState:通过这个方法来设置RN初始化时所处的生命周期状态,一般设置成LifecycleState.RESUMED就行,和下文讲的Activity容器的生命周期状态关联;
  • mReactRootView.startReactApplication:它的第一个参数是mReactInstanceManager,第二个参数是我们在index.js中注册的组件的名字,第三个参数接受一个Bundle来作为RN初始化时传递给JS的初始化数据。

在中AndroidManifest.xml注册一个RNPageActivity

Android系统要求,每一个要打开的Activity都要在·AndroidManifest.xml·中进行注册:

<activity
    android:name=".RNPageActivity"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar" />

上述代码中我们为RNPageActivity添加了一个@style/Theme.AppCompat.Light.NoActionBar类型的theme,这也是React Native UI组件所要求的主题。

为ReactInstanceManager添加Activity的生命周期回调

一个 ReactInstanceManager可以被多个activitiesfragments共享,所以我们需要在Activity的生命周期中回调ReactInstanceManager的对于的方法。

 @Override
protected void onPause() {
    super.onPause();

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

@Override
protected void onResume() {
    super.onResume();

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

@Override
public void onBackPressed() {
    if (mReactInstanceManager != null) {
        mReactInstanceManager.onBackPressed();
    } else {
        super.onBackPressed();
    }
}

@Override
protected void onDestroy() {
    super.onDestroy();

    if (mReactInstanceManager != null) {
        mReactInstanceManager.onHostDestroy(this);
    }
    if (mReactRootView != null) {
        mReactRootView.unmountReactApplication();
    }
}

从上述代码中你会发现有个不属于Activity生命周期中的方法onBackPressed,添加它的目的主要是为了当用户单击手机的返回键之后将事件传递给JS,如果JS消费了这个事件,Native就不再消费了,如果JS没有消费这个事件那么RN会回调invokeDefaultOnBackPressed代码。

@Override
public void invokeDefaultOnBackPressed() {
    super.onBackPressed();
}

添加开发者菜单

在RN中有个很好用的工具开发者菜单,我们平时调试RN应用时对它的使用频率很高,接下来我们来为MyAndroidTest添加开着菜单。

public boolean onKeyUp(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {//Ctrl + M 打开RN开发者菜单
        mReactInstanceManager.showDevOptionsDialog();
        return true;
    }
    return super.onKeyUp(keyCode, event);
}

通过上代码即可监听Ctrl + M来打开RN开发者菜单。

使用ReactPageActivity来作为RN容器

在上述的代码中我们都是通过ReactInstanceManager来创建和加载JS的,然后重写了Activity的生命周期来对ReactInstanceManager进行回调,另外,重写了onKeyUp来启用开发者菜单等功能。

另外,查看RN的源码你会发现在RN sdk中有个叫ReactActivity的Activity,该Activity是RN官方封装的一个RN容器。另外,在通过react-native init命令初始化的一个项目中你会发现有个MainActivity是继承ReactActivity的,接下来我们就来继承ReactActivity来封装一个RN容器。

package com.zxj.myandroidtest;

import com.facebook.react.ReactActivity;

public class ReactPageActivity extends ReactActivity{
    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "RNApp";
    }
}

另外,我们需要实现一个MainApplication并添加如下代码:

package com.zxj.myandroidtest;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application 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";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

上述代码的主要作用是为ReactActivity提供ReactNativeHost,查看源码你会发现在ReactActivity中使用了ReactActivityDelegate,在ReactActivityDelegate中会用到MainApplication中提供的ReactNativeHost

 protected ReactNativeHost getReactNativeHost() {
    return ((ReactApplication) getPlainActivity().getApplication()).getReactNativeHost();
}

另外实现了MainApplication之后需要在AndroidManifest.xml中添加MainApplication

以上就是通过继承ReactActivity的方式来作为RN容器的。

那么这两种方式各有什么特点:

  • 通过ReactInstanceManager的方式:灵活,可定制性强;
  • 通过继承ReactPageActivity的方式:简单,自带开发者菜单,可定制性差;

5. 运行React Native

经过上述的步骤,我们已经完成了对一个现有Android项目MyAndroidTest添加了RN,并且通过两种方式分别创建了一个RNPageActivityReactPageActivity的Activity来加载我们在JS中注册的名为RNApp的RN 组件。

我们先打开AndroidStudio,在MainActivity中添加一个跳转到RN界面的按钮

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void onSkipClick(View view) {
        startActivity(new Intent(this,RNPageActivity.class));
    }
}

接下来我们来启动RN服务器,运行MyAndroidTest项目打开RNPageActivityReactPageActivity来查看效果:

npm start

在RNApp的根目录运行上述命令,来启动一个RN本地服务:

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

编译执行一切顺利进行之后,在进入到 RNPageActivity或者ReactPageActivity 时应该就能立刻从 packager 中读取 JavaScript 代码并执行和显示:

gif

6、打包

虽然,通过上述步骤,我们将RN和我们的MyAndroidTest项目做了融合,但打包MyAndroidTest你会发现里面并不包含JS部分的代码,如果要将JS代码打包进Android Apk包中,可以通过如下命令:

react-native bundle --platform android --dev false --entry-file index.js --bundle-output MyAndroidTest/app/src/main/assets/index.android.bundle --assets-dest MyAndroidTest/app/src/main/res/

参数说明

  • --platform android:代表打包导出的平台为Android;
  • --dev false:代表关闭JS的开发者模式;
  • -entry-file index.js:代表js的入口文件为index.js;
  • --bundle-output:后面跟的是打包后将JS bundle包导出到的位置;
  • --assets-dest:后面跟的是打包后的一些资源文件导出到的位置;

注意:把上述命令中的路径替换为你实际项目的路径。如果 assets 目录不存在,则需要提前自己创建一个。
提示:JS bundle一定要正确放到你的Android言语的assets目录下,这个和我们上文中配置的setBundleAssetName("index.android.bundle")进行对应。

上面命名运行成功后会在assets目录下生成一个index.android.bundle文件,然后在使用AS进行打包就可以了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,471评论 25 707
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 12,426评论 2 59
  • 期待已久的新课上线啦!解锁React Native开发新姿势,一网打尽React Native最新与最热技术,点我...
    CrazyCodeBoy阅读 20,160评论 3 32
  • 杜牧写《赠别》:“娉娉袅袅十三余,豆蔻梢头二月初。春风十里扬州路,卷上珠帘总不如。就是下面这种植物。其实早在公元5...
    冰眉铁面阅读 383评论 2 1
  • 嘴里含着小半碗隔夜的凉茶,“噗”的一口,尽数吐在刚刚磨好的柴刀刀刃上,拿袖口随意擦拭了下嘴角水渍,小三百用恰好余老...
    李怪怪阅读 369评论 0 3