Mac配置React-Native開發環境

安裝相關軟體

Homebrew

/// Homebrew用來安裝mac上面軟體工具
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
複製程式碼

Node

brew install node

注意：安裝完node如果用npm安裝其他包時進度緩慢可以設定npm映象：

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
複製程式碼

React-Native整合環境

sudo npm install -g react-native-cli

Xcode：執行iOS

去app Store下載即可

Android Studio：執行android

下載地址：www.android-studio.org

可選安裝

Watchman

監控檔案變化
brew install watchman
複製程式碼

Flow

靜態的JS型別檢查工具(實際開發基本可以忽略)
brew install flow
複製程式碼

React開發工具

選擇Atom作為開發React-native編輯器

Atom

下載地址: atom.io

React調式工具

調式工具我們用Facebook開發的：Nuclide

Nuclide

是由Facebook提供的基於atom的整合開發環境，可用於編寫、執行和 除錯React Native應用，開啟Atom Setting介面：

點選Packages搜尋到Nuclide點選install即可（重啟atom會自動安裝Nuclide依賴包）

Atom開發React/React-Native有力外掛

• atom-react-autocomplete React程式碼提示外掛
• language-babel React開發核心外掛
• atom-react-native-style React-native 元件css樣式提示外掛
• autocomplete-js-import js包匯入路徑提示外掛
• autocomplete-modules React modules匯入提示外掛
• autocomplete-paths 載入本地檔案自動提示路徑外掛
• language-javascript-jsx JavaScript, ES6, ES7, React JSX, Flow支援外掛
• react-es6-snippets es6寫react語法提示外掛

構建React-Native專案

/// 用reac-native 初始化並且建立名為ProjectName的React-native專案
react-native init ProjectName
/// cd 到ProjectName目錄下下面
npm start                /// 啟動開發伺服器
react-native run ios     /// 即可執行在ios模擬器上面
react-native run android /// 即可執行在android模擬器上面
複製程式碼

個人網站: www.wuhaichao.com

github: https://github/netyouli