1. 程式人生 > >在Mac上搭建React Native開發環境

在Mac上搭建React Native開發環境

概述

前面我們介紹過在window環境下開發React Native專案,今天說說怎麼在mac上搭建一個RN的開發環境。

配置mac開發環境

基本環境安裝

1.先安裝Homebrew:用於安裝NodeJS和其他工具。
這裡寫圖片描述
注:Homebrew詳解,對這個比較瞭解的略過,我也是用mac沒多久,這裡給小白普及下。
Homebrew全稱Homebrew is the easiest and most flexible way to install the UNIX tools Apple didn’t include with OS X。是一個包管理器,用於在Mac上安裝一些OS X沒有的UNIX工具(比如著名的wget),Homebrew將這些工具統統安裝到了 /usr/local/Cellar 目錄中,並在 /usr/local/bin 中建立符號連結。
安裝Homebrew:

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

這裡寫圖片描述
然後一路回車
這裡寫圖片描述
最後出現success,就表示安裝成功了。
這裡寫圖片描述
安裝完成後,可以用brew doctor命令檢測下是否有什麼衝突的地方。關於Homebrew其他的介紹可以自行檢視官網資料。

安裝 Node.js

React Native 需要 NodeJS 4.0或更高版本,Homebrew的Node預設包是6.0版本的,所以直接安裝即可:

 brew install node

這裡寫圖片描述

安裝React Native 命令列工具npm

之前我們說過npm是一個包管理工具,它是用來管理node的,詳細介紹請看npm詳解
命令列工具可以輕鬆建立和初始化工程:

npm install -g react-native-cli

注:如果出現錯誤 :EACCES: permission denied,使用命令: sudo npm install -g React-native-cli.

安裝Yarn

Yarn是Facebook提供的替代npm的工具,可以加速node模組的下載。React Native的命令列工具用於執行建立、初始化、更新專案、執行打包服務(packager)等任務。

npm install -g
yarn react-native-cli

其他建議安裝

Watchman

Whtchman是Facebook開發的一個檢測檔案系統變化的工具,在RN開發中可以檢測js檔案等是否有變化,從而達到儲存及編譯的效果。這個在windows中也有,個人覺得可裝也可以不裝,直接手機上reload也是可以的。

 brew install watchman

Flow

靜態型別檢查工具

brew install flow

Nuclide

Facebook推出的一款React Native整合開發環境(IDE),不過我不太喜歡,我一般用webstorm+Android/ios 的ide。

快速開發React Native

每次學習一門新的語言,我們總是總喜歡來一個helloWord。

react-native init HelloWord

cd HelloWord 

react-native run-ios

注:也可以用Xcode開啟iOS/HelloWord.xcodeproj 並點選Run按鈕。
小提示:react-native命令列從npm官方源拖程式碼時會遇上麻煩。請將 npm倉庫源替換成淘寶的:

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

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

關於在mac上怎麼搭建Android的執行環境這裡不在講解,大家可以看看我之前的文章React 和Android的整合,這篇文章也是補了之前RN在windows環境下開發,而沒有在mac下開發,後面我們將講解怎麼在mac上開發一款RN應用。