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程式

2016-09-28_172701.png

在項目根目錄中通過npm向導生成package.json檔案，在cmd中輸入指令:

<code>npm init</code>

2016-09-28_173638.png

在package.json檔案中添加啟動腳本

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

2016-09-28_174027.png

注：這裡可能會報一個json的錯誤，請仔細檢查json：

添加react-native npm依賴，在指令行輸入

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

建立index.android.js檔案

在你app的build.gradle檔案中添加react native依賴庫

2016-09-28_175004.png

在你project的build.gradle檔案中添加react native路徑

2016-09-28_175125.png

修改androidmanifest.xml檔案中添權重限

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

添加androidreactactivity

build android項目否則上一步，代碼導入包會報錯

2016-09-28_185145.png

将androidreactactivity加入androidmanifest.xml檔案中

将devsettingsactivity配置加入到androidmanifest.xml檔案中

最終的androidmanifest.xml檔案内容為

在mainactivity中添加button，添加點選事件啟動androidreactactivity

在指令行中輸入：npm start

qq截圖20160928191415.png

啟動android程式

0617b9760dba2a9368d75155fe14b0dc.jpg

674a73c4b407f69da4716f9841b8ef1e.jpg

ea81a6edbad0d41be037e8737f548c3a.jpg