Android原生项目集成React Native的方法
开发环境准备
首先按照来安装react native在安卓平台上所需的一切依赖软件(比如npm)。
在应用中添加js代码
在项目的根目录中运行:
$ npm init $ npm install --save react react-native $ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
npm init创建了一个空的node模块(其实就是创建了一个package.json描述文件),而npm install则创建了node_modules目录并把react和react-native下载到了其中。至于第三步curl命令,其实质是下载.flowconfig配置文件,这个文件用于约束js代码的写法。这一步非必需,可跳过。下面我们打开新创建的package.json文件,然后在其scripts字段中加入:
"start": "node node_modules/react-native/local-cli/cli.js start"
现在你的package.json内容应该类似这样:
{ "name": "react-example", "version": "1.0.0", "description": "this is my first react example", "main": "index.js", "scripts": { "test": "echo \"error: no test specified\" && exit 1", "start": "node node_modules/react-native/local-cli/cli.js start" }, "keywords": [ "react", "android", "example" ], "author": "max", "license": "isc", "dependencies": { "react": "^15.4.2", "react-native": "^0.42.3" } }
接下来在项目根目录中创建index.android.js文件,然后将下面的代码复制粘贴进来:
'use strict'; import react from 'react'; import { appregistry, stylesheet, text, view } from '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: 'center', margin: 10, }, }); appregistry.registercomponent('react-example', () => helloworld);
准备工作
在你的app中 build.gradle 文件中添加 react native 依赖:
dependencies { ... compile "com.facebook.react:react-native:+" // from node_modules. }
然后sync的时候可能会有如下报错(坑一):
error:conflict with dependency 'com.google.code.findbugs:jsr305' in project ':app'. resolved versions for app (3.0.0) and test app (2.0.1) differ. see for details.
google一下解决方案,我们需要在app的build.gradle中添加如下代码:
android { configurations.all { resolutionstrategy.force 'com.google.code.findbugs:jsr305:1.3.9' } }
编译完美通过!哈哈~
在项目的 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" } } ... }
正常情况下项目的build.gradle文件和node_modules目录都是在根目录下面,所以需要把
url "$rootdir/../node_modules/react-native/android" 改为 url "$rootdir/node_modules/react-native/android"
接着,在 androidmanifest.xml 清单文件中声明网络权限:
<uses-permission android:name="android.permission.internet" />
如果需要访问 devsettingsactivity 界面,也需要在 androidmanifest.xml 中声明:
<activity android:name="com.facebook.react.devsupport.devsettingsactivity" />
添加原生代码
想要通过原生代码调用 react native ,就像这样,我们需要在一个 activity 中创建一个 reactrootview 对象,将它关联一个 react application 并设为界面的主视图。
如果你想在安卓5.0以下的系统上运行,请用 com.android.support:appcompat 包中的 appcompatactivity 代替 activity 。
public class myreactactivity 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") .setjsmainmodulename("index.android") .addpackage(new mainreactpackage()) .setusedevelopersupport(buildconfig.debug) .setinitiallifecyclestate(lifecyclestate.resumed) .build(); // 注意这里的react-example必须对应“index.android.js”中的 // “appregistry.registercomponent()”的第一个参数 mreactrootview.startreactapplication(mreactinstancemanager, "react-example", null); setcontentview(mreactrootview); } @override public void invokedefaultonbackpressed() { super.onbackpressed(); } @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(); } } @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-example必须对应“index.android.js”中的“appregistry.registercomponent()”的第一个参数,以及package.json中的name属性保持一致
我们需要把 myreactactivity 的主题设定为 theme.appcompat.light.noactionbar ,因为里面有许多组件都使用了这一主题。
<activity android:name=".myreactactivity" android:label="@string/app_name" android:theme="@style/theme.appcompat.light.noactionbar"> </activity>
配置权限以便开发中的红屏错误能正确显示
如果你的设备版本在23及以上,你需要确认你的app是否具有overlay permission
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... } } } }
运行你的应用
运行应用首先需要启动开发服务器(packager)。你只需在项目根目录中执行以下命令即可:
$ npm start
你可以把你的myreactactivity作为launchactivity,直接启动,或者从别的activity跳转过去都可以,现在你只需要run app,下面贴出我的mainactivity的代码
public class mainactivity extends appcompatactivity { private static final int overlay_permission_req_code = 0x1111; @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); 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); } } findviewbyid(r.id.text1).setonclicklistener(new view.onclicklistener() { @override public void onclick(view v) { intent intent = new intent(mainactivity.this, myreactactivity.class); startactivity(intent); } }); } @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... } } } } }
界面中只有一个textview,点击跳转到myreactactivity
真是个悲伤地故事,跳转报错了。
继续google大法寻求帮助:
我们需要在module中新建一个assets目录,android studio为我们提供了非常方便的方式,一键搞定!
然后我们在根目录的命令行执行如下命令:
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --sourcemap-output app/src/main/assets/index.android.map --assets-dest app/src/main/res/
这是为了把react native的代码打包到android的assets目录中,命令执行完毕之后,我们会发现assets目录中多了三个文件,
这个就是我们react native的代码打包之后的样子,然后我们run app。
然后我们就会惊喜的发现app成功运行起来啦!
但是
到这里并没有结束,我们试着摇晃一下手机,开启传说中的debug设置对话框,但是好像并没有反应,难道是摇晃的力度不够?我们使出吃奶的力气摇晃手机,还是没卵用~而且有的同学可能已经发现了,我们刚才用的是官方的打包命令,才完成了app的显示。也就是说我们现在用的是app内部的代码,而不是我们本地node服务上的代码。
这个就是官方教程的一个坑,我们回到初始化activity的地方,修改一点点代码。
mreactrootview = new reactrootview(this); mreactinstancemanager = reactinstancemanager.builder() .setapplication(getapplication()) .setbundleassetname("index.android.bundle") .setjsmainmodulename("index.android") .addpackage(new mainreactpackage()) // .setusedevelopersupport(buildconfig.debug) //开发者支持,buildconfig.debug的值默认是false,无法使用开发者菜单 .setusedevelopersupport(true) //开发者支持,开发的时候要设置为true,不然无法使用开发者菜单 .setinitiallifecyclestate(lifecyclestate.resumed) .build(); // 注意这里的react-example必须对应“index.android.js”中的 // “appregistry.registercomponent()”的第一个参数 mreactrootview.startreactapplication(mreactinstancemanager, "peoplus", null);
setusedevelopersupport方法并没有起作用,因为这个config.debug默认值为false,所以这个地方我们手动写成true。我们这个时候重新run一遍程序,发现非常完美。到此结束。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
Android原生项目集成React Native的方法
-
Android原生App跳转到React Native App实现方法
-
React Native集成到现有Android Studio项目
-
React Native踩坑:集成到现有Android原生应用、RN与Android相互调用
-
Android原生项目集成React Native踩坑记
-
React native集成到Android原生应用
-
集成 React Native 到现有Android项目
-
Android原生项目集成React Native
-
Android原生项目集成React Native
-
Android原生集成react-native