react native學習筆記(一)

LOVE快樂發表於2018-03-30

1.搭建開發環境

參照連結:https://reactnative.cn/docs/0…
本機環境 mac os 10.13


(1)必須軟體 Homebrew

Homebrew是什麼
Homebrew是一款Mac OS平臺下的軟體包管理工具,擁有安裝、解除安裝、更新、檢視、搜尋等很多實用的功能。簡單的一條指令,就可以實現包管理,而不用你關心各種依賴和檔案路徑的情況,十分方便快捷。。
官方解釋:
Homebrew是以最簡單,最靈活的方式來安裝蘋果公司在MacOS中不包含的UNIX工具。
參考連結:https://blog.csdn.net/sir_cod…

(2)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

(3)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 某第三方庫名。

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或Visual Studio Code來編寫React Native應用。所有這些開發工具都是跨平臺的。其中webstorm是收費的,體量較大,功能較多,基本無需配置。其他工具免費,相對輕量,但或多或少需要下載外掛和配置。

測試安裝
!!!注意!!!:init命令預設會建立最新的版本,而目前最新的0.45及以上版本需要下載boost等幾個第三方庫編譯。這些庫在國內即便翻牆也很難下載成功,導致很多人無法執行iOS專案!!!中文網在論壇中提供了這些庫的國內下載連結。如果你嫌麻煩,又沒有對新版本的需求,那麼可以暫時建立0.44.3的版本。

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

react-native init AwesomeProject

cd AwesomeProject

react-native run-ios

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

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

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

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

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

相關文章