在 Windows 上搭建 React Native IOS 開發環境

xnng發表於2019-03-01

在 windows 上開發 React Native IOS App 一定需要 Mac OS X 作業系統嗎?答案几乎是肯定的,下面這是 2016 年的答案,時隔兩年過去了依然沒有什麼好的解決方案。

create-react-native-app + Expo 倒是可以不需要 OS X 作業系統,但是需要一個 iPhone,我依然沒有。即使有,這種方式也不適合用來開發。

所以,在 Windows 上安裝虛擬機器似乎是一個最佳選擇。經過我的實踐,只要電腦記憶體不小於 8 GB,處理器不是太渣開發體驗基本上是可以接受的。

在 Windows 上搭建 React Native IOS 開發環境

本文的寫作順序為:安裝 VMware 14 => 解鎖 VMware => 安裝 OS X => 更新作業系統 => 安裝開發工具 => 執行 RN 初始化的應用

安裝 VMware 14

以下是我的 VM,下載後解壓,安裝時雙擊、下一步就行了,裡面包含有啟用碼。

bgrc.oss-cn-hangzhou.aliyuncs.com/dl/VMware14…

解鎖 VMware

蘋果公司做了一些限制,不允許在虛擬機器上安裝 Mac OS,VMware 也應該沒有拿到授權,所以預設是沒有安裝 Mac OS 的選項,不過有第三方工具是可以解鎖這個功能的。這是此工具的下載地址:bgrc.oss-cn-hangzhou.aliyuncs.com/dl/vmUnlock…

解壓後右鍵管理員身份執行 win-install.cmd 程式即可。

解鎖功能後建立一個虛擬機器,然後如圖所示選中 Mac OS 的映象,此映象較大,可以去百度網盤下載,連結:pan.baidu.com/s/1cp6ubiKG… 密碼:ma9g

之後在自定義硬體的時候,分配的記憶體和 CPU 核心數都可以為主機的一半。按預設分配的也可以,後面隨時都可以改的。(不過最好 CPU 是有多少給多少,因為虛擬機器內作業系統的顯示卡是由主機的 CPU 虛擬化的,主機的處理器好不好會直接影響到安裝後的系統畫面是否流暢)

在 Windows 上搭建 React Native IOS 開發環境

安裝 OS X

初次開啟虛擬機器的時候是會有一個報錯的,開啟 Mac OS 的安裝目錄(非虛擬機器安裝目錄),找到 macOS 10.12.vmx 檔案,在 smc.present = "TRUE" 後面新增一行 smc.version = 0。之後再次開啟虛擬機器就會進入載入系統的介面。

在 Windows 上搭建 React Native IOS 開發環境

接下來來到下面這個介面,按如圖所示的操作進行分割槽,然後將系統安裝在此分割槽內。

在 Windows 上搭建 React Native IOS 開發環境

重啟後就是一些自定義設定了,建議先選擇不連線到網際網路(就算現在選擇了聯網也無法登陸 Apple ID),快速設定一個賬戶進入到系統。

在 Windows 上搭建 React Native IOS 開發環境

進入到系統之後就可以安裝 VMtools 了

在 Windows 上搭建 React Native IOS 開發環境

安裝好 VMtools 之後就可以讓 Mac OS 全屏顯示了

在 Windows 上搭建 React Native IOS 開發環境

共享資料夾也順便設定下吧,我這裡把 Windows 的 D 盤和 OS X 做了一個共享,這樣兩個系統互相傳輸和訪問檔案就很方便了。

在 Windows 上搭建 React Native IOS 開發環境

在 Windows 上搭建 React Native IOS 開發環境

更新作業系統

到這裡還不能說已經安裝好了 OS X,因為還不能登入 Apple ID,至少我的是不能登陸的,它給了我這樣的提示

需要使用安裝 macOS 10.13 或更高版本的 Mac 才能以此 Apple ID 登入
複製程式碼

所以,接下來要升級系統到 10.13,其實也很簡單,開啟 App Store,在更新頁面的首頁就有安裝選項。

在 Windows 上搭建 React Native IOS 開發環境

更新下載並安裝完後,下次重啟時會讓登入 Apple ID,還會讓輸入上一次使用過的蘋果裝置的密碼。

到這裡就完成了 Mac OS X 的安裝了。

安裝開發工具

首先去 App Store 安裝 XCode,大概有 5.3 G

接著開啟終端執行一下命令安裝包管理器 brew

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

有了包管理器後就可以本方便地安裝 node

$ brew install node
複製程式碼

為了讓 npm 下載東西比較快,這裡設定下淘寶映象

$ npm config set registry https://registry.npm.taobao.org --global
$ npm config set disturl https://npm.taobao.org/dist --global
複製程式碼

然後安裝 yarn 和 react-native 命令列工具,這裡 yarn 是可選的

$ 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
複製程式碼

到這裡 React Native 的 IOS 環境就裝完了

執行 RN 初始化的應用

用以下幾條命令就可以初始化一個 React Native 應用並啟動

$ react-native init testApp
$ cd testApp
$ react-native run-ios
複製程式碼

圖中為了節省時間是提前啟動了一個 IOS 模擬器的,正常情況下它會在上面的命令執行後自動啟動。

在 Windows 上搭建 React Native IOS 開發環境

按 win + D 可以開啟模擬器選項開啟熱載入,之後改動程式碼,頁面就會自動重新整理。

在 Windows 上搭建 React Native IOS 開發環境

最後再來測試下虛擬機器的效能,再用 XCode 開啟此專案並啟動了一個 8 plus 模擬器,兩個模擬器同時執行加上 XCode、VSCode、Node 終端、瀏覽器也依然是非常流暢的。看來分配個 4 G 記憶體是完全 OK 的。

在 Windows 上搭建 React Native IOS 開發環境

Enjoy it!?

相關文章