基于官方文档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),否则不能调出开发设置界面
android:screenOrientation="portrait" android:configChanges="keyboard|keyboardHidden|orientation|screenSize" /> 步骤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上看到具体的错误信息。这在解决一些红屏问题时很有用。