[RN] React Native & Expo（1）

終於開始React Native的學習。主要的參考資料依然是React Native的官方文檔。但我不會像官方文檔寫得那樣事無巨細，一些基本的概念我也不會多做解釋。在閱讀這一系列文章之前，你需要先瞭解React，在這篇文章可以找到並學習。

環境搭建

我使用MacBook進行開發，因此我僅對於macOS的搭建過程做說明。其他的作業系統可以去到RN的官方網站查看。

基礎環境

基本環境需要Node和Watchman，在macOS下使用homebrew來安裝：

brew install node
brew install watchman

Android 環境

要使用RN開發Android應用程式，需要安裝JDK和Android Studio。

JDK

對於JDK，可以使用OpenJDK或者Oracle JDK，官方推薦使用由Azul提供的名為Zulu的OpenJDK發行版。因這個發行版同時對Intel和Apple Silicon的晶片提供支援。

brew tap homebrew/cask-versions
brew install --cask zulu17

0.73版本的RN需要OpenJDK 17。

Android

配置Android環境的步驟稍微有些麻煩。

• 安裝Android Studio
• 安裝Android SDK：在Welcome頁面按如下步驟：
  
  
  
• 配置Android SDK環境變數：我使用的shell是fish，如果你使用的和我不一樣，比如bash或者zsh，請自行修改.bashrc檔案或.zshrc檔案。至於我，我需要修改$HOME/.config/fish/config.fish檔案，增加環境變數如下：

set -x ANDROID_HOME $HOME/Library/Android/sdk
set -x PATH $ANDROID_HOME/emulator $PATH
set -x PATH $ANDROID_HOME/tools $PATH
set -x PATH $ANDROID_HOME/tools/bin $PATH
set -x PATH $ANDROID_HOME/platform-tools $PATH

如果你的ANDROID_HOME中沒有tools目錄，需要在SDK Manager中安裝Android SDK tools。

使用echo $ANDROID_HOME來查看環境變數是否設定成功。

• 添加AVD虛擬機或連結物理機作為承載裝置

iOS環境

使用RN開發iOS程式需要XCode和CocoaPods。

XCode

在App Store中你可以方便地安裝到XCode，這個步驟也同樣會安裝 Xcode IDE、Xcode Command Line Tools和iOS虛擬機。

在XCode > Settings > Location查看是否有某個版本的Command Line Tools。

在XCode > Settings > Platforms查看並下載iOS images。

CocoaPods

這是一個適用於iOS的套件管理器，相當於iOS的npm，RN需要使用它來管理iOS相關的依賴。使用Homebrew來安裝：

brew install cocoapods

有一定的機率仍然會出現問題，可能是其中的ruby版本問題。需要注意，可以在後期build的時候安裝。

Windows或macOS環境

React Native官方並不支援使用其開發Windows或macOS程式，但微軟對其提供了支援——React Native for Windows + macOS。只需要安裝幾個外掛，即可將其編譯到Windows或macOS平台。我們稍後再說明。

創建專案

雖然我們安裝好了完整的開發環境，但是我們仍然推薦使用Expo沙箱來創建和調試App，這是一種簡潔、優雅和高效的方式。

推薦使用WebStorm來創建一個Expo專案，需要安裝Expo外掛，可以在WebStorm官方的Extension Market找到。

然後使用npm web、npm ios或npm android來分別啟動不同的平台。