iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Mobile Development

30 天程式邊緣人 - React Native 的孤獨開發指南系列 第 7

[Day07- React Native]建立 React Native 專案

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
  1. 設定 Android Studio 的環境參數

請到 Appearance & BehaviorSystem SettingsAndroid 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"
  1. 設定 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 androidnpx react-native run-android

iOS

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

上一篇
[Day06 - UI/UX] 建立 APP Design Guideline
下一篇
[Day08 - React Native] 路由,使用 React Native Navigation
系列文
30 天程式邊緣人 - React Native 的孤獨開發指南15

尚未有邦友留言

立即登入留言