React Native簡介和環境配置

ZY_FlyWay發表於2017-07-24
React Native

React Native是什麼



           Facebook於2015年9月15日釋出React Native，廣大開發者可以使用JavaScript和React開發跨平臺移動應用，React Native提倡元件化開發，即提供一個個封裝好的元件，然後元件相互巢狀形成新的元件。
          它充分利用了Facebook現有的業務輪子, 其核心設計理念：既擁有Native的使用者體驗、又保留React的開發效率。
         

React Native優勢

1. Native的原生控制元件有更好的體驗；
2. Native有更好的手勢識別；
3. Native有更合適的執行緒模型，儘管Web Worker可以解決一部分問題，但如影象解碼、文字渲染仍無法多執行緒渲染，這影響了Web的流暢性。

  
Learn once, write anywhere       





這樣說並不過分，其實我看到的一些APP原始碼其實是Learn once, run anywhere。


Virtual DOM：相對Browser環境下的DOM（文件物件模型）而言，Virtual DOM是DOM在記憶體中的一種輕量級表達方式（原話是lightweight representation of the document），可以通過不同的渲染引擎生成不同平臺下的UI，JS和Native之間通過Bridge通訊（React Native通訊機制詳解 « bang’s blog）。


React Native環境搭建

搭建地址:http://reactnative.cn/docs/0.46/getting-started.html

這裡簡要的copy下mac版的搭建，其他版本看中文網


安裝

必需的軟體

Homebrew#

Homebrew, Mac系統的包管理器，用於安裝NodeJS和一些其他必需的工具軟體。

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

譯註：在Max OS X 10.11（El Capitan)版本中，homebrew在安裝軟體時可能會碰到/usr/local目錄不可寫的許可權問題。可以使用下面的命令修復： 

sudo chown -R `whoami` /usr/local

Node

使用Homebrew來安裝Node.js.

React Native目前需要NodeJS 5.0或更高版本。本文釋出時Homebrew預設安裝的是最新版本，一般都滿足要求。 

brew install node

安裝完node後建議設定npm映象以加速後面的過程（或使用科學上網工具）。注意：不要使用cnpm！cnpm安裝的模組路徑比較奇怪，packager不能正常識別！

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

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

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

npm install -g yarn react-native-cli

安裝完yarn後同理也要設定映象源：

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

如果你看到EACCES: permission denied這樣的許可權報錯，那麼請參照上文的homebrew譯註，修復/usr/local目錄的所有權： 

sudo chown -R `whoami` /usr/local

安裝完yarn之後就可以用yarn代替npm了，例如用yarn代替npm install命令，用yarn add 某第三方庫名代替npm install --save 某第三方庫名。

注意：目前npm5（發文時最新版本為5.0.4）存在安裝新庫時會刪除其他庫的問題，導致專案無法正常執行。請儘量使用yarn代替npm操作。

Xcode

React Native目前需要Xcode 8.0 或更高版本。你可以通過App Store或是到Apple開發者官網上下載。這一步驟會同時安裝Xcode IDE和Xcode的命令列工具。

雖然一般來說命令列工具都是預設安裝了，但你最好還是啟動Xcode，並在Xcode | Preferences | Locations選單中檢查一下是否裝有某個版本的Command Line Tools。Xcode的命令列工具中也包含一些必須的工具，比如git等。

推薦安裝的工具

Watchman

Watchman是由Facebook提供的監視檔案系統變更的工具。安裝此工具可以提高開發時的效能（packager可以快速捕捉檔案的變化從而實現實時重新整理）。

brew install watchman

Flow

Flow是一個靜態的JS型別檢查工具。譯註：你在很多示例中看到的奇奇怪怪的冒號問號，以及方法引數中像型別一樣的寫法，都是屬於這個flow工具的語法。這一語法並不屬於ES標準，只是Facebook自家的程式碼規範。所以新手可以直接跳過（即不需要安裝這一工具，也不建議去費力學習flow相關語法）。

brew install flow

Nuclide

Nuclide（此連結需要科學上網）是由Facebook提供的基於atom的整合開發環境，可用於編寫、執行和 除錯React Native應用。

點選這裡閱讀Nuclide的入門文件。

譯註：我們更推薦使用WebStorm或Sublime Text來編寫React Native應用。

測試安裝

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

注意：init命令預設會建立最新的版本，而目前最新的0.45及以上版本需要下載boost庫編譯。此庫體積龐大，在國內即便翻牆也很難下載成功，導致很多人無法正常執行iOS專案，推薦暫時使用0.44.3的版本。

提示：你可以使用--version引數（注意是兩個槓）建立指定版本的專案。例如react-native init MyApp --version 0.44.3。注意版本號必須精確到兩個小數點。

提示：如果run-ios無法正常執行，請使用Xcode執行來檢視具體錯誤（run-ios的報錯沒有任何具體資訊）。

你也可以在Nuclide中開啟AwesomeProject資料夾 然後執行，或是雙擊ios/AwesomeProject.xcodeproj檔案然後在Xcode中點選Run按鈕。

修改專案

現在你已經成功執行了專案，我們可以開始嘗試動手改一改了：

  • 使用你喜歡的編輯器開啟index.ios.js並隨便改上幾行。
  • 在iOS Emulator中按下⌘-R就可以重新整理APP並看到你的最新修改！

完成了！

恭喜！你已經成功執行並修改了你的第一個React Native應用。




相關文章