安裝依賴(lài)

必須安裝的依賴(lài)有：Node、Watchman、Xcode 和 CocoaPods。
雖然你可以使用任何編輯器來(lái)開(kāi)發(fā)應(yīng)用（編寫(xiě) js 代碼），但你仍然必須安裝 Xcode 來(lái)獲得編譯 iOS 應(yīng)用所需的工具和環(huán)境。

Node & Watchman

我們推薦使用Homebrew來(lái)安裝 Node 和 Watchman。在命令行中執(zhí)行下列命令安裝（如安裝較慢可以嘗試阿里云的鏡像源）

brew install node
brew install watchman

成功截圖如下:

圖1

圖2

如果你已經(jīng)安裝了 Node，請(qǐng)檢查其版本是否在 v12 以上。安裝完 Node 后建議設(shè)置 npm 鏡像（淘寶源）以加速后面的過(guò)程（或使用科學(xué)上網(wǎng)工具）。

注意：不要使用 cnpm！cnpm 安裝的模塊路徑比較奇怪，packager 不能正常識(shí)別！

# 使用nrm工具切換淘寶源
npx nrm use taobao

# 如果之后需要切換回官方源可使用
npx nrm use npm

成功截圖如下:

圖3

Watchman則是由 Facebook 提供的監(jiān)視文件系統(tǒng)變更的工具。安裝此工具可以提高開(kāi)發(fā)時(shí)的性能（packager 可以快速捕捉文件的變化從而實(shí)現(xiàn)實(shí)時(shí)刷新）。

Yarn

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模塊的下載。

npm install -g yarn

成功截圖如下：

圖4

安裝完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方庫(kù)名代替npm install 某第三方庫(kù)名。

Xcode

我這邊之前安裝過(guò)了，具體參考React Native

CocoaPods

具體參考React Native

創(chuàng)建項(xiàng)目

如果你之前全局安裝過(guò)舊的react-native-cli命令行工具，請(qǐng)使用npm uninstall -g react-native-cli卸載掉它以避免一些沖突。
使用 React Native 內(nèi)建的命令行工具來(lái)創(chuàng)建一個(gè)名為"AwesomeProject"的新項(xiàng)目。這個(gè)命令行工具不需要安裝，可以直接用 node 自帶的npx命令來(lái)使用（注意 init 命令默認(rèn)會(huì)創(chuàng)建最新的版本）

npx react-native init AwesomeProject

注意一：請(qǐng)不要在目錄、文件名中使用中文、空格等特殊符號(hào)。請(qǐng)不要單獨(dú)使用常見(jiàn)的關(guān)鍵字作為項(xiàng)目名（如 class, native, new, package 等等）。請(qǐng)不要使用與核心模塊同名的項(xiàng)目名（如 react, react-native 等）。

注意二：0.60 及以上版本的原生依賴(lài)是通過(guò) CocoaPods 集成安裝的。CocoaPods 的倉(cāng)庫(kù)在國(guó)內(nèi)也很難訪問(wèn)。如果在 CocoaPods 的依賴(lài)安裝步驟卡很久（命令行停在 Installing CocoaPods dependencies），請(qǐng)務(wù)必使用穩(wěn)定的代理軟件并確定其配置對(duì)命令行有效。

如果你是想把 React Native 集成到現(xiàn)有的原生項(xiàng)目中，則步驟完全不同，請(qǐng)參考集成到現(xiàn)有原生應(yīng)用

我在執(zhí)行這一步操作的時(shí)候出現(xiàn)了錯(cuò)誤如下:

圖5

發(fā)現(xiàn)是公司的網(wǎng)做了限制，導(dǎo)致安裝github上面的三方庫(kù)沒(méi)有安裝成功，之后我切換成自己的熱點(diǎn)，進(jìn)入剛創(chuàng)建項(xiàng)目/ios，執(zhí)行

pod install --repo-update

成功截圖如下:

圖6

圖7

編譯并運(yùn)行 React Native 應(yīng)用

在你的項(xiàng)目目錄中運(yùn)行yarn ios或者yarn react-native run-ios

cd AwesomeProject
yarn iOS
# 或者
yarn react-native run-ios

成功的話(huà)，你會(huì)發(fā)現(xiàn)會(huì)自動(dòng)開(kāi)啟你的電腦終端，然后你的模擬器也會(huì)運(yùn)行起來(lái)，如下:

圖8

圖9

圖10

其他錯(cuò)誤

如果出現(xiàn)下載失敗的話(huà)，可能是你的網(wǎng)有問(wèn)題，可以采用科學(xué)上網(wǎng)，可以避免很多錯(cuò)誤