搭建React Native開發環境

搭建React Native開發環境

本文檔是Mac下搭建的環境，針對的目標平臺不一樣，以及開發 iOS 和 Android 的不一樣，環境搭建也有差別。

Github地址：https://github.com/facebook/react-native

官方地址：http://facebook.github.io/react-native/docs/getting-started.html

中文版的地址：https://reactnative.cn/

前提條件

Homebrew是OS X的套件(包)管理器，用於安裝Node.js和一些其餘必須的工具軟件。
安裝Homebrew，這樣就能夠用Homebrew方式安裝Node，watchman了

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

建議按期運行如下命令來保證Homebrew的最新版本

brew update && brew upgrade

必需要安裝的依賴： Node、Watchman 和 React Native 命令行工具以及 Xcode。

Node, Watchman

推薦使用Homebrew來安裝 Node 和 Watchman。在命令行中執行下列命令安裝：

brew install node
brew install watchman

node安裝成功後npm自動也就有了，直接下載安裝Node.js
Watchman是由 Facebook 提供的監視文件系統變動的工具，能夠快速捕捉文件的變化從而實現實時刷新

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

Yarn 是 Facebook 提供的替代 npm 的工具，能夠加速 node 模塊的下載。React Native 的命令行工具用於執行建立、初始化、更新項目、運行打包服務（packager）等任務。

npm install -g yarn react-native-cli

Xcode

React Native 目前須要Xcode。你能夠經過 App Store 下載。這一步驟會同時安裝 Xcode IDE、Xcode 的命令行工具和 iOS 模擬器。

Xcode 的命令行工具
啓動 Xcode，並在Xcode | Preferences | Locations菜單中檢查一下是否裝有某個版本的Command Line Tools。Xcode 的命令行工具中包含一些必須的工具，好比git等。

運行 React Native 應用

無論是 iOS 仍是 Android，在開發調試階段，都須要在 Mac 上啓動一個 HTTP 服務，稱爲Debug Server，默認運行在 8081 端口，APP 通 Debug Server 加載 js。

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

其餘說明

查詢react-native的npm包最新版本

npm info react-native

升級或者降級npm包的版本

npm install --save react-native@0.18

更新項目templates文件

新的npm包會包含更新在運行react-native init命令生成的一些動態文件，例如init建立項目的時候會生成iOS和Android的子項目，咱們能夠經過如下的命令進行獲取最新的代碼

react-native upgrade

WebStom設置React Native代碼提示

從gitHub上下載xml插件，而後將ReactNative.xml複製到 ~/Library/Preferences/WebStorm10/templates ，而後重啓 WebStrom。

git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate