[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

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