Mac OS 搭建 React Native 環境

如果 React Native 環境搭建完畢
那么下面的這幾篇文章也許能夠幫到你
如何創建 React Native 應用
如何在源生項目中使用 React Native
React Native 如何真機 release 模式運行
React Native 如何用 Pushy 進行熱更新

如果你覺得對你有所幫助, 記得【關注】,感謝支持,后期還會有更新。

一、關于 React Native 的簡單介紹

2015年3月26日 Facebook 在 F8 大會上開源了 React Native
React Native 它可以使用 JavaScript 和 React 開發跨平臺的移動應用。
并且 Facebook 已經在多項產品中使用了React Native,并且將持續地投入建設 React Native。

圖片摘自知乎

二、安裝 Homebrew

Homebrew 是 OS X 或者 macOS 的套件管理器,我們可以通過它來獲取并安裝很多組件。

安裝步驟
  • 終端執行指令
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  • 使用下面指令查看 homebrew 是否安裝成功
brew -v

三、安裝 Node.js

  • 安裝方法一
  • 安裝方法二
    • 使用 homebrew 安裝 Node.js 默認安裝的是最新版本,一般 node 大于 4.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

四、推薦安裝的工具

1. WatchMan

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

使用 homebrew 安裝 watchman
brew install watchman

2. Flow

Flow 是一個靜態的JS類型檢查工具。
譯注:你在很多示例中看到的奇奇怪怪的冒號問號,以及方法參數中像類型一樣的寫法,都是屬于這個flow工具的語法。
這一語法并不屬于ES標準,只是Facebook自家的代碼規范。
所以新手可以直接跳過(即不需要安裝這一工具,也不建議去費力學習flow相關語法)

使用 homebrew 安裝 flow
brew install flow

3. Nuclide

Nuclide (此鏈接需要科學上網)是由 Facebook 提供的基于 atom 的集成開發環境,
可用于編寫、[運行](http://nuclide.io/docs/platforms/react-nativ

Snip20161116_4.png

e/#running-applications) 和 調試 React Native 應用。
點擊這里閱讀 Nuclide的入門文檔
譯注:React Native 官網更推薦使用 WebStormSublime Text 來編寫 React Native 應用。

3. Yarn、React Native

Yarn 是 Facebook 提供的替代 npm 的工具,可以加速 node 模塊的下載。
React Native 的命令行工具用于執行創建、初始化、更新項目、運行打包服務(packager)等任務。

使用 終端 安裝 React Native
npm install -g yarn react-native-cli

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

sudo chown -R `whoami` /usr/local

或者直接使用

sudo npm install -g yarn react-native-cli

4. Xcode

React Native 目前需要 Xcode 8.1 或更高版本。
你可以通過App Store或是到 Apple開發者官網上下載。
這一步驟會同時安裝 Xcode IDE 和 Xcode 的命令行工具。
雖然一般來說命令行工具都是默認安裝了,但你最好還是啟動Xcode
并在 Xcode | Preferences | Locations 菜單中檢查一下是否裝有某個版本的 Command Line Tools 的
Xcode 命令行工具中也包含一些必須的工具,比如 git 等。

5. Genymotion (可以不安裝)

Genymotion 是一個第三方模擬器,它比 Google 官方的模擬器更易設置且性能更好。
但是,它只針對個人用戶免費。

  1. 下載并安裝 Genymotion 打開 Genymotion
  2. 如果你尚未安裝 VirtualBox 它有可能會提示你安裝
  3. 創建一個模擬器并啟動
  4. 按下 ?+M

可以打開開發者菜單(在安裝并啟動了React Native 應用之后)

你也可以在 Nuclide 中打開 AwesomeProject
文件夾 然后 運行,或是雙擊 ios/AwesomeProject.xcodeproj 文件然后在 Xcode 中點擊 Run 按鈕。

或者你可以進行創建一個你自己的 React Native 的應用

如何創建 React Native 應用
如何在源生項目中使用 React Native
React Native 如何真機 release 模式運行
React Native 如何用 Pushy 進行熱更新
如果你覺得對你有所幫助, 可以點贊關注,支持一下,后期還會有更新。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容