轉載來自iOS 2018最新搭建 React Native 開發環境教程內容稍作了修改

React Native 簡介

• ReactNative 是移動端目前最熱的框架之一, 著力於提高多平臺開發的開發效率 —— 僅需學習一次，編寫任何平臺。(Learn once, write anywhere)。
• Facebook 已經在多項產品中使用了 React Native，並且將持續地投入建設 React Native。
• React Native 可以通過更新遠端 JS，直接更新 app, 用 JavaScript 調起 native元件，將增強與高效能元件交給 React Native 來處理 。
• 相比其他 hybrid 框架而言, React Native並非通過 webview 來呼叫原生元件,而是直接呼叫作業系統自帶的 javascriptCore, 所以更高效。

環境搭建

官方中文文件
官方英文文件 [英語好的話可以看這個.]
主要的環境以iOS端為例:

• Mac OS X 作業系統
• Xcode, 7.3版本以上
• Node.js, 6.2.1版本以上
• watchman 和 flow
• NVM

下面圖文結合詳細介紹下 React Native 在 Mac 環境下的安裝流程, 帶你一步步搭建環境, 執行 第一個專案 Hello World.

安裝過程請時刻保持翻牆狀態

Xcode 的安裝

App Store 安裝

Node.js 的安裝

官網安裝Node.js

Homebrew 的安裝

官網安裝Homebrew (macOS 缺失的軟體包的管理器)
一步一步安裝就好了

通過 Homebrew 安裝 watchman 和 flow

React Native 包管理器使用了 watchman ，flow 是 Facebook 公司出品的一個型別檢查庫，它同樣被 React Native 所採用.

如果安裝過程中遇到問題，你可能需要更新 brew 和相關依賴包,
使用的命令列： brew update brew upgrade.
如果出現錯誤，你需要修復本地的 brew 安裝程式，brew doctor 可以幫助你找到問題所在。

安裝好 Homebrew 之後，依次執行以下命（比較耗時）：

• brew -v 檢查brew版本
• brew install watchman 安裝watchman
• brew install flow 安裝flow
  
  

  install watchman.png
  
  
  

  install flow.png

安裝 react-native-cli 命令列工具

接下來通過 NPM 安裝反應母語 -CLI 的命令列工具。在 MAC 終端中輸入如下命令，其中 -g 表示全域性安裝。
sudo npm install -g react-native-cli

NVM 的安裝

Reace Native 使用 NVM 管理不同的 node 和 npm.

在終端輸入命令安裝NVM:

git clone https://github.com/creationix/nvm

進入nvm檔案 在終端依次輸入以下命令:

• cd nvm/
• ls
• source nvm.sh
• nvm
• nvm ls -remote N/A
• nvm ls

建立專案

搭建好RN環境以後，我們來建立一個HelloWorld專案。
首先在桌面上建立一個名為 rn_helloworld 的資料夾
在終端進入建立的資料夾 (cd)
建立專案

執行專案

或者cd 進入資料夾後 終端執行專案也是可以的
react-native run-ios

專案執行起來, 開啟App.js 就可以進行程式設計了, 程式設計儲存後直接在模擬器上 command+R 重新整理即可.