首先需要說(shuō)明react-native官方只維護(hù)最新版本的工具鏈蹦漠，所以在后需要搭建環(huán)境過(guò)程中需謹(jǐn)慎選擇所需要的工具鏈和sdk等等。
提示：有條件的情況下建議使用手機(jī)熱點(diǎn)的方式车海，下載速度很快笛园。
必須安裝的依賴(lài)有：Node、Watchman 和 Xcode侍芝。
1研铆、安裝homebrew
終端執(zhí)行
/usr/bin/ruby?-e?"$(curl -fsSL?https://raw.githubusercontent.com/Homebrew/install/master/install)"
由于安裝過(guò)程實(shí)在緩慢，最后參考如下文檔方法成功安裝州叠。
可以使用清華大學(xué)的鏡像源來(lái)安裝
然后安裝Node和Watchman
Watchman則是由 Facebook 提供的監(jiān)視文件系統(tǒng)變更的工具棵红。安裝此工具可以提高開(kāi)發(fā)時(shí)的性能（packager 可以快速捕捉文件的變化從而實(shí)現(xiàn)實(shí)時(shí)刷新）。
brew install node && brew install watchman
注意：node版本需＞10
安裝完 Node 后建議設(shè)置 npm 鏡像（淘寶源）以加速后面的過(guò)程（或使用科學(xué)上網(wǎng)工具）咧栗。
# 使用nrm工具切換淘寶源npx nrm use taobao
# 如果之后需要切換回官方源可使用 npx nrm use npm
2逆甜、安裝Xcode
appstore里下載Xcode
React Native 目前需要Xcode 10 或更高版本。你可以通過(guò) App Store 或是到Apple 開(kāi)發(fā)者官網(wǎng)上下載致板。這一步驟會(huì)同時(shí)安裝 Xcode IDE交煞、Xcode 的命令行工具和 iOS 模擬器。
Xcode是用來(lái)構(gòu)建react-native項(xiàng)目的ios工具,與之對(duì)應(yīng)的是安卓的Android Studio
3斟或、Xcode 的命令行工具
啟動(dòng) Xcode素征，并在Xcode | Preferences | Locations菜單中檢查一下是否裝有某個(gè)版本的Command Line Tools。Xcode 的命令行工具中包含一些必須的工具萝挤，比如git等御毅。
如果你之前全局安裝過(guò)舊的react-native-cli命令行工具，請(qǐng)使用npm uninstall -g react-native-cli卸載掉它以避免一些沖突平斩。
至此亚享，react-native在Mac端所需要的環(huán)境已經(jīng)搭建完畢。
下面讓我們開(kāi)始初始化一個(gè)項(xiàng)目
npx react-native?init xxx
這里有一點(diǎn)需要特別注意：不要單獨(dú)使用常見(jiàn)的關(guān)鍵字作為項(xiàng)目名（如class, native, new, package等等）绘面。請(qǐng)不要使用與核心模塊同名的項(xiàng)目名（如react, react-native等）。請(qǐng)不要在目錄、文件名中使用中文揭璃、空格等特殊符號(hào)晚凿。
提示：可以使用--version參數(shù)（注意是兩個(gè)杠）創(chuàng)建指定版本的項(xiàng)目。例如npx react-native init MyApp --version 0.44.3瘦馍。注意版本號(hào)必須精確到兩個(gè)小數(shù)點(diǎn)歼秽。
項(xiàng)目初始化完成可以看到上圖所示界面。
下面我們把項(xiàng)目編譯一下
終端執(zhí)行
yarn ios
# 或者
yarn react-native?run-ios
終端執(zhí)行的命令需要等待很久情组，建議使用xcode運(yùn)行項(xiàng)目燥筷，且可以自己選擇模擬器型號(hào)。
上圖是launchPackager院崇，也就是前端打包編譯react-native項(xiàng)目時(shí)的服務(wù)器肆氓，執(zhí)行命令后會(huì)自動(dòng)打開(kāi)此打包器。在開(kāi)發(fā)過(guò)程中無(wú)需關(guān)閉它底瓣，只需要刷新模擬器中的頁(yè)面即可谢揪。
最終可以看到在模擬器中有如下畫(huà)面,就是前端編譯運(yùn)行react-native項(xiàng)目成功。
在此需要說(shuō)明的是剛才提到的Xcode捐凭，同樣可以用來(lái)打包運(yùn)行react-native
我們?cè)赬code中打開(kāi)剛才的項(xiàng)目
必須要特別注意的是Xcode只能識(shí)別ios目錄拨扶，并對(duì)其進(jìn)行編譯和打包。所以一定要打開(kāi)ios目錄而不是根目錄茁肠。也就是xxx.xcworkspace
在Xocde中打開(kāi)項(xiàng)目患民，如上圖。
如上圖是在Xcode中打開(kāi)ShopPortal中的ios目錄后的界面垦梆。
現(xiàn)在我們點(diǎn)擊左上角的灰色啟動(dòng)按鈕來(lái)啟動(dòng)項(xiàng)目
正常情況下匹颤，會(huì)看到Xcode中提示build successful的彈窗。
此時(shí)項(xiàng)目已經(jīng)被啟動(dòng)在模擬器中奶赔。如上圖惋嚎。
在左上角可以選擇切換模擬器或者連接真機(jī)，這里就不細(xì)說(shuō)了站刑。將會(huì)在后續(xù)的系列文章中具體介紹另伍。
同樣的如果想在終端中啟動(dòng)其他版本的模擬器也是可以的只需要執(zhí)行以下命令
yarn react-native?run-ios?--simulator?“xxx”;
如使用IPhone 8模擬器啟動(dòng)項(xiàng)目
yarn react-native?run-ios?--simulator?"IPhone 8”
至此，mac系統(tǒng)下ios環(huán)境搭建教程全部結(jié)束绞旅。
下一篇將介紹Windows系統(tǒng)下Android環(huán)境搭建
如果你在搭建環(huán)境過(guò)程中遇到任何問(wèn)題摆尝，歡迎在下方評(píng)論，我會(huì)第一時(shí)間回復(fù)因悲。
