天天看点

android 添加React Native支持

<a href="https://facebook.github.io/react-native/docs/integration-with-existing-apps.html" target="_blank">英文官方文档</a>

<a href="http://reactnative.cn/docs/0.31/integration-with-existing-apps.html" target="_blank">中文官方文档</a>

用android studio创建一个基本的android hello world程序

android 添加React Native支持

2016-09-28_172701.png

在项目根目录中通过npm向导生成package.json文件,在cmd中输入命令:

<code>npm init</code>

android 添加React Native支持

2016-09-28_173638.png

在package.json文件中添加启动脚本

<code>"start": "node node_modules/react-native/local-cli/cli.js start"</code>

android 添加React Native支持

2016-09-28_174027.png

注:这里可能会报一个json的错误,请仔细检查json:

android 添加React Native支持

添加react-native npm依赖,在命令行输入

<code>npm install react react-native --save</code>

创建index.android.js文件

在你app的build.gradle文件中添加react native依赖库

android 添加React Native支持

2016-09-28_175004.png

在你project的build.gradle文件中添加react native路径

android 添加React Native支持

2016-09-28_175125.png

修改androidmanifest.xml文件中添加权限

<code>&lt;uses-permission android:name="android.permission.internet" /&gt;</code>

添加androidreactactivity

build android项目否则上一步,代码导入包会报错

android 添加React Native支持

2016-09-28_185145.png

将androidreactactivity加入androidmanifest.xml文件中

将devsettingsactivity配置加入到androidmanifest.xml文件中

最终的androidmanifest.xml文件内容为

在mainactivity中添加button,添加点击事件启动androidreactactivity

在命令行中输入:npm start

android 添加React Native支持

qq截图20160928191415.png

启动android程序

android 添加React Native支持

0617b9760dba2a9368d75155fe14b0dc.jpg

android 添加React Native支持

674a73c4b407f69da4716f9841b8ef1e.jpg

android 添加React Native支持

ea81a6edbad0d41be037e8737f548c3a.jpg