React Native 官網

現在有許多可以建立雙平台的工具，像是 Golang 的 Flutter，還有 Vue.js 的 Vue Native 這些都可以嘗試看看。就 React Native 來說，如果你不想要設定東設定西，有更快速的 Expo 可以選擇。

身為一個只會用磚塊蓋房子買不起新成屋的小碼農，我們就從 React Naitve 開始吧！

系統環境

如果你是第一次開始玩 React Native，請先安裝好 Android Studio，Mac 要記得裝 Xcode。

Node 環境可以直接裝 NVM，本文章使用的開發環境：

這邊是到時候要再確認的項目

• node v15.14.0
• npm 7.7.6
• Xcode 12.2
• Android Studio Arctic Fox

環境建置

可以參考官方 Enviroment setup

在這邊我以 MacOS 為例來解說

Android 設定

因為剛剛我們已經安裝了 nvm 所以 nodejs 安裝的步驟就跳過。我們來安裝JDK：

1. 利用 Homebrew 安裝 JDK

brew install --cask adoptopenjdk/openjdk/adoptopenjdk8

2. 設定 Android Studio 的環境參數

請到 Appearance & Behavior → System Settings → Android SDK

• 選擇 SDK Platforms 標籤，勾選 Android 10(Q)
• 確定 SDK Tools 標籤中，有勾選 Android SDK Platform (version 29) 以及 Google APIs Intel x86 Atom System Image

也可以在設定完 ANDROID_HOME 後執行下面的指令

sdkmanager "platforms;android-29" "system-images;android-29;default;x86_64" "system-images;android-29;google_apis;x86"
sdkmanager "cmdline-tools;latest" "build-tools;29.0.2"

3. 設定 ANDROID_HOME

到你的 ~/.bashrc (如果有使用 zsh 就到 ~/.zshrc) 加入

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

iOS 設定

1. 安裝 CocoaPods

sudo gem install cocoapods

建立起始專案

cd 到你的目錄底下後，輸入輸入建立專案：

npx react-native init YourProjectName

YourProjectName 就看你的 APP 要叫什麼名字，另外要注意只接受駝峰式的命名，不能用 dash 分隔。

接下來就來看一下起始畫面的部分，Android 如果是第一次啟動，需要開啟 Android Studio 進行 Gradle Sync。iOS 的話可以跑一次 npx pod-install 來同步套件。

Android

1. 現在已經可以打開 Android Studio 點啟動按鈕，來開始 React Native 的開發
2. 或是下 yarn android 或 npx react-native run-android

iOS

1. 可以直接開啟 Xcode 開發，右上角選好想要的模擬器後啟動就好。
2. 可以下 yarn ios 或 npx react-native run-ios