开发环境准备
首先按照来安装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的时候可能会有如下报错（坑一）：
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的代码打包到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一遍程序，发现非常完美。到此结束。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
LongClick原理、上下文菜单原理、EditText长按弹窗原理、WebView长按弹窗自定义、修复WebView全选重复bug ———————————————— 版权声明：本文为CSDN博主「
JobScheduler 实现 特定时间，特定条件（系统空闲，电池电量，磁盘空间 ……）下执行任务
温习Android基础知识——《第一行代码（第三版）》读书笔记 Chapter 10 Service
网友评论