Facebook React Native 配置小結

2015 年 9 月 15 號，React Native for Android 發佈。至此，React 基本完成了對多端的支持。基於 React / React Native 能夠：

• H5, Android, iOS 多端代碼複用

• 實時熱部署

目前使用 React Native 開發只能在 Mac 系統 上進行。因此配置都是基於Mac os.

環境配置

 首先須要安裝的有:

       Homebrew(brew):

       Homebrew 是 Mac 中的一個安裝包管理器。沒有安裝的話，點擊這裏安裝 個人版本以下:

       

bogon:~ weichunsheng$ brew -v
Homebrew 0.9.5 (git revision 8017; last commit 2015-10-03)
bogon:~ weichunsheng$ 

　　版本太低將會致使沒法安裝後續幾個組件。可用 brew update 升級。

  Node.js 和 npm

      Node.js 須要 4.0 及其以上版本。安裝好以後，npm 也有了。

      經過 nvm 安裝 Node.js

      nvm 是 Node.js 的版本管理器，能夠輕鬆安裝各個版本的 Node.js 版本。

      安裝 nvm 能夠經過 Homebrew 安裝:

      brew install nvm

      或者 按照這裏的方法 安裝。

      而後安裝 Node.js：

nvm install node && nvm alias default node

也能夠直接下載安裝 Node.js： https://nodejs.org/en/download/

安裝 watchman 和 flow

這兩個包分別是監控文件變化和類型檢查的。安裝以下：

brew install watchman
brew install flow

安裝 React-Native

經過 npm 安裝便可：

npm install -g react-native-cli

APP 開發環境的設置

• iOS

  XCode 6.3 及其以上便可。

• Android

  這個比較麻煩。

設置環境變量：ANDROID_HOME

export ANDROID_HOME=/usr/local/opt/android-sdk

 

SDK Manager 安裝如下包：

Android SDK Build-tools version 23.0.1

Android 6.0 (API 23)

Android Support Repository

配置完畢。

---

---

---

初始化第一個hello world項目

文檔提到：

react-native init x 項目名稱

等待一段時間以後（具體視網絡狀況而定）時間比較長，項目初始化完成。

進入到項目目錄：

cd 項目名稱 運行： ls -l total 24 drwxr-xr-x 14 srain staff 476 Sep 21 09:52 android -rw-r--r-- 1 srain staff 1023 Sep 21 11:47 index.android.js -rw-r--r-- 1 srain staff 1065 Sep 20 11:58 index.ios.js drwxr-xr-x 6 srain staff 204 Sep 20 11:58 ios drwxr-xr-x 5 srain staff 170 Sep 21 10:31 node_modules -rw-r--r-- 1 srain staff 209 Sep 20 11:58 package.json 

其中 android 和 ios 中分別爲兩個平臺的項目文件。index.android.js 和 index.ios.js 爲兩個頁面對應的 js 文件。

運行項目

無論是 iOS 仍是 Android，在開發調試階段，都須要在 Mac 上啓動一個 HTTP 服務，稱爲`Debug Server`，默認運行在 8081 端口，APP 通 Debug Server 加載 js。 iOS 和 Android 的模擬器，鏈接 Mac 本機的服務都很方便。可是經過 USB 或者 Wifi 鏈接調試，就稍微麻煩一些了。

IOS

  仍是很是簡單，XCode 打開項目，點擊運行就好。修改 index.ios.js, 在模擬器中 ⌘ + R 從新載入 js 便可看到相應的變化。

  iOS 真機調試也簡單，修改HTTP地址便可。

jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];

　　

Android

按照官方文檔，須要一個模擬器（Genymotion模擬器也能夠）。可是不像 iOS，Android 開發平時更可能是直接用真機進行開發和調試，如何運行部署到真機。

運行命令

react-native run-android

 

而後就會部署到模擬器，修改 index.android.js ，調出模擬器菜單鍵，選擇從新載入 js 便可看到變化。

 

示例 APP 直接部署到真機，紅色界面報錯，沒法鏈接到 Debug Server。

若是是 5.0 或者以上機型，可經過 adb 反向代理端口，將 Mac 端口反向代理到測試機上。

adb reverse tcp:8081 tcp:8081

若是 5.0 如下機器，應用安裝到測試機上以後，搖動設備，在彈出菜單中選擇 Dev Setting > Debug Server host for device，而後填入 Mac 的 IP 地址

 

在 Android Studio 中調試開發

在 Android Studio 打開項目，而後編譯部署到真機。

這個時候，在命令行啓動 Debug Server 便可：

react-native start

官方文檔：https://facebook.github.io/react-native/docs/getting-started.html#content 參考：http://www.liaohuqiu.net/cn/posts/react-native-1/     https://github.com/creationix/nvm#installation     http://www.jianshu.com/p/cd2a8c5ee1c7     http://wiki.jikexueyuan.com/project/react-native/NativeComponentsAndroid.html     http://www.tuicool.com/articles/V3U3UbU