MacOS下搭建開(kāi)發(fā)環(huán)境React Native 目標(biāo)平臺(tái)ios

官網(wǎng):?https://reactnative.cn/docs/getting-started

我的博客:https://blog.csdn.net/weixin_43883485

開(kāi)發(fā)平臺(tái)：macOS
目標(biāo)平臺(tái)：iOS

安裝依賴

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

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

推薦使用Homebrew來(lái)安裝?Node和?Watchman。在命令行中執(zhí)行下列命令安裝
如果你沒(méi)有安裝 請(qǐng)先安裝?Homebrew

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

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í)刷新）。

下面是我電腦的brew node watchman版本

Yarn

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

npm install -g yarn

安裝完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方庫(kù)名代替npm install 某第三方庫(kù)名
yran源配置 參考我另外一篇博客:?Mac安裝yarn 設(shè)置鏡像

CocoaPods

CocoaPods是用Ruby編寫的包管理器。從0.60版本開(kāi)始react native的iOS版本需要使用CocoaPods來(lái)管理依賴。你可以使用下面的命令來(lái)安裝cocoapods。

當(dāng)然安裝可能也不順利，請(qǐng)嘗試翻墻或?qū)ふ乙恍﹪?guó)內(nèi)可用的鏡像源。
ps 如果這一步?jīng)]有成功 會(huì)導(dǎo)致項(xiàng)目啟動(dòng)失敗

sudo gem install cocoapods

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

brew install cocoapods

查看版本

pod --version

另外目前最新版本似乎不能在ruby2.6版本以下安裝，意味著如果你使用的macOS版本低于10.15 (Catalina) 則無(wú)法直接安裝。可以嘗試安裝較舊一些的版本。
如?sudo gem install cocoapods -v 1.8.4
因?yàn)槲业碾娔X是版本低于10.15 所以我使用?sudo gem install cocoapods -v 1.8.4

Xcode

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

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

創(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è)名為"FirstApp"的新項(xiàng)目。這個(gè)命令行工具不需要安裝，可以直接用 node 自帶的npx命令來(lái)使用（注意 init 命令默認(rèn)會(huì)創(chuàng)建最新的版本）：

這一步非常重要 鬼知道我在這里經(jīng)歷了什么...?CocoaPods 的倉(cāng)庫(kù)在國(guó)內(nèi)也很難訪問(wèn)。如果在 CocoaPods 的安裝步驟卡很久，可以試一下這個(gè)國(guó)內(nèi)鏡像

cd 文件路徑

npx react-native init FirstApp

運(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

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

ok我啟動(dòng)成功