React Native（一）：搭建開發環境、出Hello World

---

歡迎一起來學習React Native，QQ羣：672509442

---

簡述

爲了避免Android平臺和IOS平臺的重複開發，對於性能要求不太高的應用可以採用React Native進行開發，以減少開發成本，這裏就簡單介紹一下React Native的開發環境搭建。（以Mac爲例）

必須安裝的軟件

因爲React Native離不開JavaScript，不管是Android還是IOS都需要安裝以下軟件

Homebrew

Homebrew是Mac系統的包管理器，安裝的目的是方便安裝Node等其他的軟件

安裝方法：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Tips：在Max OS X 10.11（El Capitan)版本中，homebrew在安裝軟件時可能會碰到/usr/local目錄不可寫的權限問題。可以使用下面的命令修復：

sudo chown -R `whoami` /usr/local

Node

使用剛剛安裝的Homebrew來安裝Node（React Native目前需要NodeJS5.0或者更高版本）

安裝方法：

brew install node

安裝完以後建議設置npm鏡像以加速

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

Yarn、React Native的命令行工具（react-native-cli）

Yarn是Facebook提供的替換npm的工具，可以加速node模塊的下載

react-native-cli用於完成創建項目、初始化、運行、更新、打包等任務

安裝方法：

brew install node

Tips：如果你看到EACCES: permission denied這樣的權限報錯，那麼請參照上文的homebrew譯註，修復/usr/local目錄的所有權：

sudo chown -R `whoami` /usr/local

Android需要做的

配置ANDROID_HOME環境變量

確保ANDROID_HOME環境變量正確地指向了你安裝的Android SDK的路徑。具體的做法是把下面的命令加入到~/.bash_profile文件中

如果你不是通過Android Studio安裝的sdk，則其路徑可能不同，請自行確定清楚。

export ANDROID_HOME=~/Library/Android/sdk

然後使用下列命令使其立即生效（否則重啓後才生效）：

source ~/.bash_profile

可以使用echo $ANDROID_HOME檢查此變量是否已正確設置。

$ echo $ANDROID_HOME
~/Library/Android/sdk

Android Studio

需要Android Studio2.0或更高版本
。。。。。。
安裝教程略過

安裝Android Studio只有一個目的：使用Android模擬器，當然使用Genymotion也是可以的,用真機當然更好了。

IOS需要做的

Apple大法好，Apple就是吊，IOS要做的很簡單，打開App Store，安裝Xcode，然後就咩有然後了，開幹。

推薦安裝的軟件

Watchman

Watchman是由Facebook提供的監視文件系統變更的工具。安裝此工具可以提高開發時的性能（packager可以快速捕捉文件的變化從而實現實時刷新），總之就是爲了更快。

brew install watchman

其實還有很多工具例如：Flow、Nuclide等，但是沒那麼常用，像Flow入門較麻煩，就不說了。我們常用WebStorm或Sublime Text就行了。

Nuclide，這個要說一下，由於RN開發主要是編寫JS代碼，我們使用自己順手的工具就好，但是程序編譯、打包都需要敲命令行完成，所以Nuclide就是爲了解決這個問而生的，但是目前只是基於Atom的一個插件，使用Nuclide之前必須安裝Atom，效果不是很好，但是相信FB會把它越做越好吧，就像Android Studio之於Eclipse。

測試安裝

重點來了，忙了半天，試試行不行。

react-native init MyApp
cd MyApp

這兩步走完，項目已經創建好了，並且已經切換到項目目錄。
接下來打開Android和IOS的模擬器，運行項目就行了

Android

react-native run-android

IOS

react-native run-ios

如下圖

出Hello World

修改index.android.js和index.ios.js，增加Android和IOS標籤
如下圖

---

歡迎一起來學習React Native，QQ羣：672509442

---