React-Native之Android:植入原生应用

​基于官方文档http://reactnative.cn/docs/embedded-app-android.html#content

由于官方文档语焉不详,一些详细步骤没有配置好的话很容易植入失败,这里工具是AS,我是在Mac上做的,,尝试并且最终成功了。

React植入原生应用步骤:(注意是Mac上的,windows尚未尝试)

步骤1:  植入前提

一个已有的、基于gradle构建的Android应用

Node.js,参见官方文档了解相关的设置操作。(环境是否配置好的检验标准是能否成功初始化一个RN工程并运行在手机上)

步骤2: 在App里添加依赖和权限

在App里的build.gradle文件中(不是project目录下那个build.gradle),添加React Native依赖:

compile 'com.facebook.react:react-native:0.18.+'

尽量选择React Native库的最新稳定版本。

然后,在AndroidManifest.xml里增加Internet访问权限:

步骤3: 添加原生代码,即以React为View的Activity

官方文档目前是0.18版本以前的,我这里按照0.18版本的(基本一样的,只是官方又进一步封装给我们用)

新建MyReactActivity,继承ReactActivity,代码如下。

只有三个抽象方法需要实现,默认是返回null,需要修改。

public class MyReactActivity  extends ReactActivity{

@Override

protected String getMainComponentName() {

return "myreactactivity";  //注册的react组件名,一会在JS里要用到

}

@Override

protected boolean getUseDeveloperSupport() {

return BuildConfig.DEBUG; // Debug模式,这个模式才能在JS里作调试

}

@Override

protected List getPackages() {

return Arrays.asList(

new MainReactPackage()

);  //返回带有官方已有的package的集合

}

}

由于是Activity,需要建立完毕后在AndroidManifest.xml里注册。

此外,也要注册另外一个开发菜单Activity(官方API),否则不能调出开发设置界面


<activity android:name=".MyReactActivity"

android:screenOrientation="portrait"

android:configChanges="keyboard|keyboardHidden|orientation|screenSize" />

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

步骤4: 添加React环境

打开控制台,在当前工程根目录里执行(AS直接点击下面的控制台就可以)

npm init

会有提示,说执行 npm help json可以查看下面具体属性的定义 和npm install --save可以生成包。

注意:就算有需要,也不要马上输入这两个命令来做,输了也不会有作用,因为下面已经开始要你输入name属性了。

然后会要求依次输入name,version,description,main,test command,author,license等属性。

这是要生成的package.json里的内容。具体该怎么填写,建议control + C 退出当前命令后执行 npm help json,

然后把这个帮助说明文档一点点全部复制下来(不大),大致看看注意要点,后面填写时不明白的就查查看。

需要提示一点是这些属性有的不能随便写,否则构建不成功。

我的那些属性最终如下,有些是根据自己的React模块填写的,有的是根据刚才那个帮助文档填写的。

{

"name": "myreactactivity",

"version": "0.0.1",

"description": "this is the package.json",

"main": "index.js",

"scripts": {

"start": "node_modules/react-native/packager/packager.sh" //这个是后面添加的

},

"repository": {

"type": "git",

"url": "git+https://github.com/npm/npm.git"

},

"author": "patrick",

"license": "ISC",

"bugs": {

"url": "https://github.com/npm/npm/issues"

},

"homepage": "https://github.com/npm/npm#readme",

"dependencies": {

"react-native": "^0.18.1"

}

}

然后再在控制台里执行

npm install --save react-native

会下载nodejs和RN等的依赖。

执行完以后控制台应该不会出现WARN信息,若出现的话很可能就是构建不成功(可以继续往下操作步骤,不行的话就是这一步没成功),

若的确构建不成功,很大可能是上面的package.json的有些属性填写不正确。需要重新npm init。

继续在控制台执行

curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

现在打开新创建的package.json文件然后在scripts字段下添加如下内容:

"start": "node_modules/react-native/packager/packager.sh" // 我的上面已经有的就是在这一步添加的

步骤5: 添加JS代码

在project目录下(也就是package.json所在目录)新建名为index.android.js的JS文件,在里面拷贝如下内容

'use strict';

var React = require('react-native');

var {

Text,

View

} = React;

class myreactactivity extends React.Component {

render() {

return (

Hello, World

)

}

}

var styles = React.StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

},

hello: {

fontSize: 20,

textAlign: 'center',

margin: 10,

},

});

React.AppRegistry.registerComponent('myreactactivity', () => myreactactivity);

这就是个JS文件,会ReactJS的可以随便写了,只要引入的组件名对的上就好。

步骤6: 添加安卓关联代码

上面的新建的MyReactActivity可以设置为入口activity,也可以设置为普通activity。

如果打算设置为入口activity的话,就在清单文件里自己配置就可以,不需要额外代码;

如果打算设置为普通acitivity,就按正常原生activity一样配置和用代码启动就好。

总结一句话就是:启动和加载这个MyReactActivity按照原生Activity一样配置和加载就好。

步骤7: 运行应用

先在工程目录下启动JS服务器,在控制台运行

npm start

然后启动APP,用AS的正常Run就可以。

第一次到MyReactActivity界面肯定是红屏,需要摇出开发菜单设置IP和端口,然后Reload JS就行。

正常情况下现在可以看到Hello World了。

如果还是红屏的话就需要看看显示的错误是啥并且针对修改了。

PS:用Mac的话有个找原因的小窍门,打开Xcode(没有的话需要下载,免费的),在手机上运行RN时,出错的信息可以在Xcode上看到具体的错误信息。这在解决一些红屏问题时很有用。

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

推荐阅读更多精彩内容