1、安裝依賴

必須安裝的依賴有：Node、Watchman、Xcode 和 CocoaPods。

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

1.1、Node & Watchman

我們推薦使用Homebrew來(lái)安裝 Node 和 Watchman。在命令行中執(zhí)行下列命令安裝（如安裝較慢可以嘗試阿里云的鏡像源）：
如果上面 Homebrew 安裝失敗可以參考https://juejin.cn/post/6951594084146348039

brew install node
brew install watchman

如果你已經(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

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

1.2、Yarn

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

npm install -g yarn

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

1.3、Xcode

React Native 目前需要Xcode 12 或更高版本。你可以通過(guò) App Store 或是到Apple 開(kāi)發(fā)者官網(wǎng)上下載。這一步驟會(huì)同時(shí)安裝 Xcode IDE、Xcode 的命令行工具和 iOS 模擬器。

1.3.1、Xcode 的命令行工具

啟動(dòng) Xcode，并在Xcode | Preferences | Locations菜單中檢查一下是否裝有某個(gè)版本的Command Line Tools。Xcode 的命令行工具中包含一些必須的工具，比如git等。

1.3.2、在 Xcode 中安裝 iOS 模擬器

安裝模擬器只需打開(kāi) Xcode > Preferences... 菜單，然后選擇 Components 選項(xiàng)，即可看到各種可供安裝的不同的 iOS 版本的模擬器。

1.3.3、CocoaPods

CocoaPods是用 Ruby 編寫的包管理器（可以理解為針對(duì) iOS 的 npm）。從 0.60 版本開(kāi)始 react native 的 iOS 版本需要使用 CocoaPods 來(lái)管理依賴。你可以使用下面的命令來(lái)安裝 CocoaPods。CocoaPods的版本需要 1.10 以上。

當(dāng)然安裝可能也不順利，請(qǐng)嘗試使用代理軟件或?qū)ふ乙恍﹪?guó)內(nèi)可用的鏡像源。

sudo gem install cocoapods

或者可以使用 brew 來(lái)安裝

brew install cocoapods

要了解更多信息，可以訪問(wèn)CocoaPods 的官網(wǎng)。

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

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

2.1、[可選參數(shù)] 指定版本或項(xiàng)目模板

你可以使用--version參數(shù)（注意是兩個(gè)杠）創(chuàng)建指定版本的項(xiàng)目。注意版本號(hào)必須精確到兩個(gè)小數(shù)點(diǎn)。

npx react-native init AwesomeProject --version X.XX.X

還可以使用--template來(lái)使用一些社區(qū)提供的模板，例如帶有TypeScript配置的：

npx react-native init AwesomeTSProject --template react-native-template-typescript

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

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

cd AwesomeProjectyarn ios# 或者yarn react-native run-ios

此命令會(huì)對(duì)項(xiàng)目的原生部分進(jìn)行編譯，同時(shí)在另外一個(gè)命令行中啟動(dòng)Metro服務(wù)對(duì) js 代碼進(jìn)行實(shí)時(shí)打包處理（類似 webpack）。Metro服務(wù)也可以使用yarn start命令單獨(dú)啟動(dòng)。

提示：如果此命令無(wú)法正常運(yùn)行，請(qǐng)使用 Xcode 運(yùn)行來(lái)查看具體錯(cuò)誤（run-ios 的報(bào)錯(cuò)沒(méi)有任何具體信息）。注意 0.60 版本之后的主項(xiàng)目文件是.xcworkspace，不是.xcodeproj！

很快就應(yīng)該能看到 iOS 模擬器自動(dòng)啟動(dòng)并運(yùn)行你的項(xiàng)目。

在正常編譯完成后，開(kāi)發(fā)期間請(qǐng)保持Metro命令行窗口運(yùn)行而不要關(guān)閉。以后需要再次運(yùn)行項(xiàng)目時(shí)，如果沒(méi)有修改過(guò) ios 目錄中的任何文件，則只需單獨(dú)啟動(dòng)yarn start命令。如果對(duì) ios 目錄中任何文件有修改，則需要再次運(yùn)行yarn ios命令完成原生部分的編譯。

yarn ios只是運(yùn)行應(yīng)用的方式之一。你也可以在 Xcode 中直接運(yùn)行應(yīng)用。注意 0.60 版本之后的主項(xiàng)目文件是.xcworkspace，不是.xcodeproj。

如果你無(wú)法正常運(yùn)行，先回頭仔細(xì)對(duì)照文檔檢查，然后可以看看討論區(qū)。

3.1、在真機(jī)上運(yùn)行

上面的命令會(huì)自動(dòng)在 iOS 模擬器上運(yùn)行應(yīng)用，如果你想在真機(jī)上運(yùn)行，則請(qǐng)閱讀在設(shè)備上運(yùn)行這篇文檔。

3.2、修改項(xiàng)目

現(xiàn)在你已經(jīng)成功運(yùn)行了項(xiàng)目，我們可以開(kāi)始嘗試動(dòng)手改一改了：

• 使用你喜歡的編輯器打開(kāi)App.js并隨便改上幾行。
• 在 iOS 模擬器中按下?-R就可以刷新 APP 并看到你的最新修改?。ㄈ绻麤](méi)有反應(yīng)，請(qǐng)檢查模擬器的 Hardware 菜單中，connect hardware keyboard 選項(xiàng)是否選中開(kāi)啟）

3.3、完成了！

恭喜！你已經(jīng)成功運(yùn)行并修改了你的第一個(gè) React Native 應(yīng)用。