Android原生集成react-native
在原有的 android 应用中集成 react-native。假设我们现在已经有了一个 android 原生应用 myapplication。
#第一步：进入到项目更目录下，新建一个空文件夹，命名为 android，然后将原本目录下所有的文件都移动到这个 android 文件夹下。
所以现在项目的根目录就是 myapplication，更目录下有一个 android 文件夹，里面是原来所有 android 原生应用的文件。
#第二步：在项目更目录下新建一个 package.json 文件用来安装所需要的 npm 依赖。package.json 文件内容大概为
{
"name": "myapplication",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"@babel/core": "^7.0.0-beta.42",
"babel-core": "^7.0.0-bridge.0",
"react": "16.3.0-alpha.1",
"react-native": "^0.54.2"
}
}
需要注意的是这里的 name 一定要与项目的名称保持一样。 react 和 react-native 以及其它库的版本根据当前最新版本适当修改即可。
然后在更目录下执行 npm install 即可。
#第三部：用 android studio 打开 android 下面的原生应用。在 app 的 build.gradle 文件中的 dependencies 闭包下加上一句
compile "com.facebook.react:react-native:+"
官网上是这么说的，同时官网上还要求了
compile 'com.android.support:appcompat-v7:23.0.1'
但是实际应用中发现一方面并不需要一定是 v7:23.0.1，而且更重要的是 compile 方式即将不支持了。换用 implementation。
而且新建 android 原生应用的时候会默认使用最新的编译库（当前是27）所以要是按照官网上的话，不仅需要修改便宜版本为23，
同时使用 compile。这样会导致很多问题。所以直接按照下面的配置就可以了：
//app: build.gradle
dependencies {
implementation 'com.android.support:appcompat-v7:27.1.1'
…… ……
implementation "com.facebook.react:react-native:+"
}
这样就不会有问题了。接着修改 project 的 build.gradle 文件，在 allprojects 闭包中的 repositories 闭包下添加 maven 依赖，
//project: build.gradle
allprojects {
repositories {
maven {
// all of react native (js, android binaries) is installed from npm
url "$rootdir/../node_modules/react-native/android"
}
...
}
...
}
这两部都修改完之后点击提示的 sync now. 构建完成之后应该不会出现错误。
#第四步：在 androidmanifest.xml 中添加网络权限:
当然如果是在 debug 模式下，方便调试还可以在
添加完之后大概为：
…………>
…… ……
#第五步：新建 app.js 和 index.js 文件，就像原本的 react-native 项目中那样，只是要记住在 index.js 文件中注册的名称比如
appregistry.registercomponent('myapplication', () => app); 这里的 myapplication
#第六步：因为在 debug 模式下的错误信息都是显示在悬浮窗中的，所以如果是在 android 6.0 或者以上的中，
我们需要动态的申请这个权限（当然，如果是在 release 模式下并不需要这个权限）。权限在希望启动 react-native 界面的活动下申请，
比如这里我们希望在 main2activity 这个活动中启动
private final int overlay_permission_req_code = 1;
@override
protected void oncreate(bundle savedinstancestate) {
…… ……
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);
}
}
}
接着重写活动的 onactivityresult() 方法以处理用户对于上述权限的处理
@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) {
if (!settings.candrawoverlays(this)) {
// system_alert_window permission not granted
}
}
}
}
#第七部：将 react-native 组件加进来，在我们希望启动 react-native 的活动（这里的 main2activity）类实现
defaulthardwarebackbtnhandler 接口，然后通过 reactrootview 这个类将 react-native 组件加进来
public class main2activity 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();
// 注意这里的名称（myapplication）必须与 index.js 文件中注册的名称一样
mreactrootview.startreactapplication(mreactinstancemanager, "myapplication", null);
setcontentview(mreactrootview);
}
@override
public void invokedefaultonbackpressed() {
super.onbackpressed();
}
}
这里可以看到，通过 setcontentview(mreactrootview) 方法将 react-native 的视图作为了这个活动的视图了。
做完这一步之后还需要注意，因为 react-native 界面顶部是没有 android 自带的 actionbar 的，所以我们需要把这个活动下视图的
actionbar 去掉，只要在
androidmanifest.xml 文件下对应的活动下修改视图的主题就可以了
android:theme="@style/theme.appcompat.light.noactionbar"> #第八步：将活动的生命周期传递给 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 protected void ondestroy() { super.ondestroy(); if (mreactinstancemanager != null) { mreactinstancemanager.onhostdestroy(this); } if (mreactrootview != null) { mreactrootview.unmountreactapplication(); } } 同时在这个活动下，把后退按钮传递给 react-native： @override public void onbackpressed() { if (mreactinstancemanager != null) { mreactinstancemanager.onbackpressed(); } else { super.onbackpressed(); } } 另外，如果是在模拟器环境下，ctrl + m 按键调出调试面板是非常有用的，所以我们也可以重写这个按钮的事件 @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 run-android 一般会有问题，不能正确的打开本地服务器。 一般用 android studio 将程序安装到手机或者模拟器上之后再通过 npm start 手动打开本地服务器. #最后还有一个问题，如果是运行在 64 位的手机或者模拟器上，程序会失败，提示错误信息为 dlopen failed: "/data/data/package/lib-main/libgnustl_shared.so" is 32-bit instead of 64-bit 这个好像是因为 react-native 要求的 .so 文件不支持 64 位的手机，解决办法就是 在 app:build.gradle 文件中在加上两个闭包 defaultconfig { …… …… ndk { abifilters "armeabi-v7a", "x86" } packagingoptions { exclude "lib/arm64-v8a/libgnustl_shared.so" } } 好了，到此就成功将 react-native 集成到 android 原生应用中啦！！！ 下面是完整的 main2activity 活动的文件内容： ========================================================================================================= import android.content.intent; import android.net.uri; import android.os.build; import android.provider.settings; import android.support.v7.app.appcompatactivity; 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 main2activity extends appcompatactivity implements defaulthardwarebackbtnhandler { private final int overlay_permission_req_code = 1; private reactrootview mreactrootview; private reactinstancemanager mreactinstancemanager; @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); 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); } } 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(); mreactrootview.startreactapplication(mreactinstancemanager, "myapplication", null); setcontentview(mreactrootview); } @override public void invokedefaultonbackpressed() { super.onbackpressed(); } @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) { if (!settings.candrawoverlays(this)) { // 如果悬浮窗权限申请失败的话…… } } } } @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 protected void ondestroy() { super.ondestroy(); if (mreactinstancemanager != null) { mreactinstancemanager.onhostdestroy(this); } if (mreactrootview != null) { mreactrootview.unmountreactapplication(); } } @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 android 打包命令： 事先在 ./android/app/src/main/ 下要有一个 assets 文件夹，没有的话就手动建立一个即可 （附带，引用这个文件夹下的资源可通过 file:///android_asset/xxx） react-native bundle --platform android --dev false --entry-file index.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/ 例如这里就用 react-native bundle --platform android --dev false --entry-file index.js --bundle-output ./android/app/src/main/assets/index.android.bundle --assets-dest ./android/app/src/main/res/