React Native Note：開發環境建置

發表於 更新於 分類於 ， 閱讀次數： Disqus： 文章字數： 909 所需閱讀時間 ≈ 3 分鐘

讓被臉書拋棄的孩子帶我邁向大前端之路🥴。
安裝 0.70 版
2024/04/05: 安裝 0.73 版

Setting up the development environment
分為 Expo Go 與 React Native CLI 兩。簡單來說前者適合新手，建制過程較為簡單，對客製化較不友善，可以用來建構簡單的 App；後者適合較大型專案，需要對各平台客製化時較方便。
為了體驗全面一點，選擇 React Native CLI。
其餘步驟照著官網就行。

環境是 macOS

安裝 Homebrew

Homebrew
Homebrew Documentation

在 terminal 中使用官網提供的安裝指令。

command line tool
1
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安裝流程結束後 terminal 會提示兩條指令來將 Homebrew 加入 PATH。
執行完兩條指令後輸入 brew help 看是否正常。

command line tool
1
2
3
(echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> /Users/username/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"
brew help

安裝 Node & Watchman

command line tool
1
2
brew install node
brew install watchman

Android

需要 Node、Watchman、React Native command line interface、JDK、Android Studio

安裝 Java Development Kit

command line tool
1
2
brew tap homebrew/cask-versions
brew install --cask zulu11

2024/04/05:

command line tool
1
2
brew tap homebrew/cask-versions
brew install --cask zulu17

不同版本的 React Native 專案，可能需要不同的 java 版本，建議使用 java version manager 來管理，如：SDKMAN!

安裝 Android Studio

照著官方文件需求載 Android Studio，並下載特定 SDK。

設定 ANDROID_HOME 環境參數。

command line tool
1
vim ~/.zprofile

i 進入 insert mode
填入
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
esc 跳出 insert mode
:wq 存擋並離開 vim

command line tool
1
2
3
source ~/.zprofile
echo $ANDROID_HOME
echo $PATH

PATH 中應該要包含 ANDROID_HOME 的路徑。

進 Android Studio 查看 Appearance & Behavior → System Settings → Android SDK 的路徑與上述相同。

iOS

需要 Node、Watchman、React Native command line interface、Ruby version manager、Xcode、CocoaPods

安裝 Ruby Version Manager (RVM)

Ruby Version Manager (RVM)
Installing RVM

補充：RVM 在下載特定 Ruby 版本時可能遭遇一些難以解決的錯誤，如：Cannot install Ruby 2.7.4 and 3.0.2 on Mac - NoMethodError - Nil ，其中有人建議使用 rbenv
2024/04/05: RVM 依然有問題，直接載 rbenv 吧

安裝 gpg

command line tool
1
brew install gpg

安裝 GPG keys

command line tool
1
gpg --keyserver keyserver.ubuntu.com --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB

本來是要用 gpg2 的指令，但好像統一名稱為 gpg 了。

安裝 RVM

command line tool
1
2
\curl -sSL https://get.rvm.io | bash -s stable
source /Users/wengchengwei/.rvm/scripts/rvm

安裝 React Native 要求的 Ruby 版本

react-native/.ruby-version

command line tool
1
rvm install ruby-2.7.6

查看當前 Ruby 版本

command line tool
1
ruby --version

安裝 Xcode

用網頁安裝，不要用 App Store 裝。
官方目前要求使用 10 或以上版本。
本次實作安裝 14.3
2024/04/05: 15.2

安裝 CocoaPods

Getting Started

command line tool
1
sudo gem install cocoapods

最終環境

Android Studio: Android Studio Flamingo | 2022.2.1
Xcode: 14.3
Ruby: ruby 2.7.6p219 (2022-04-12 revision c9c2245c0a) [arm64-darwin22]

2024/04/05:
java:
openjdk 17.0.10 2024-01-16 LTS
OpenJDK Runtime Environment Zulu17.48+15-CA (build 17.0.10+7-LTS)
OpenJDK 64-Bit Server VM Zulu17.48+15-CA (build 17.0.10+7-LTS, mixed mode, sharing)
Android Studion:
Android Studio Iguana | 2023.2.1 Patch 1
Xcode: 15.2
Ruby: ruby 2.7.6p219 (2022-04-12 revision c9c2245c0a) [arm64-darwin22]

專案相關指令

建立新專案

command line tool
1
npx react-native@latest init ProjectName

Start Metro

基本上用不到這個指令，直接 Run on iOS 或 Android 比較方便。

command line tool
1
npx react-native start

Run on iOS

command line tool
1
npx react-native run-ios

Run on Android

command line tool
1
npx react-native run-android

從 git 拉下既有專案

進入專案資料夾，在 run 之前使用以下指令安裝需要的東西

command line tool
1
npm install

有安裝 yarn 的話則使用

command line tool
1
yarn install

切換 node 版本

專案可能需要使用特定版本的 node，這時就需要使用 node 版本控制軟體進行切換，如 nvm