RN 學習小記之使用 Expo 創建項目

由於業務需要，開始學習 RN 以備後面的需求，而雖然之前有用過 RN 但是專案搭建等都是封裝好的腳手架，對本身其實了解不算太多，於是打算記錄一下個人從頭搭建 RN 專案的一個過程。順帶進行一個資料收集。

適合：有前端基礎，有前端基本開發環境，想了解一下 Expo 搭建 RN 專案過程的人群

RN 相關資料#

官方網站：Site Unreachable
- Introduction · React Native
- Core Components and APIs · React Native
中文網：簡介・React Native 中文網
Expo 官網： Expo
Github 資源
- GitHub - jondot/awesome-react-native Awesome React Native 是一個很棒的風格列表，它策劃了最好的 React Native 庫、工具、教程、文章等。
- GitHub - infinitered/ignite Ignite 是 Expo 和裸 React Native 中最受歡迎的 React Native 應用程式樣板，是六年多持續 React Native 開發的結晶。
博文
- 📝 沒 2 年 React Native 開發經驗，你都遇不到這些坑 - 掘金

開發環境#

win 下搭建安卓開發環境#

安卓上，要注意的就是安裝 Android Studio & Android SDK，Android Studio 默認會安裝最新版本的 Android SDK。目前編譯 React Native 應用需要的是 Android 13 (Tiramisu) 版本的 SDK（注意 SDK 版本不等於終端系統版本，RN 目前支持 android 5 以上設備）。你可以在 Android Studio 的 SDK Manager 中選擇安裝各版本的 SDK。

1. 安裝 Android Studio#

Download and install Android Studio 下載並安裝 Android Studio。在 Android Studio 安裝向導中，確保選中以下所有項目旁邊的框：

Android SDK
Android SDK Platform
Android Virtual Device
如果您尚未使用 Hyper-V： Performance (Intel ® HAXM) （有關 AMD 或 Hyper-V，請參見此處）

2. 安裝安卓 SDK#

Android Studio 默認安裝最新的 Android SDK。使用本機代碼構建 React Native 應用程式尤其需要 Android 13 (Tiramisu) SDK。可以通過 Android Studio 中的 SDK 管理器安裝其他 Android SDK。

打開 Android Studio，單擊 “More Actions” 按鈕並選擇 “SDK Manager”。
從 SDK Manager 中選擇 “SDK Platforms” 選項卡，然後勾選右下角 “Show Package Details” 旁邊的框。查找並展開 Android 13 (Tiramisu) 條目，然後確保選中以下項目：

Android SDK Platform 33
Intel x86 Atom_64 System Image 或者 Google APIs Intel x86 Atom System Image

Pasted image 20230620141725.png
3. 接下來，選擇 “SDK Tools” 選項卡並選中 “Show Package Details” 旁邊的複選框。查找並展開 Android SDK Build-Tools 條目，然後確保選擇了 33.0.0 （ps: 現在是 34.0.0了）

配置 ANDROID_HOME 環境變量
高級系統設置 - 環境變量 - 單擊 New... 創建一個新的 ANDROID_HOME 用戶變量，指向您的 Android SDK 的路徑：

Pasted image 20230620141904.png

默認情況下，SDK 安裝在以下位置：

%LOCALAPPDATA%\Android\Sdk

eg: C:\Users\xxxx\AppData\Local\Android\Sdk

可以在 Android Studio 設置中的Appearance & Behavior → System Settings → Android SDK 下找到 SDK 的實際位置。

Pasted image 20230620141558.png

驗證環境變量已添加：

打開 powershell
複製並粘貼 Get-ChildItem -Path Env:\ 到 powershell
驗證 ANDROID_HOME 已添加

Pasted image 20230620142037.png

使用 Expo#

為什麼用 Expo ？#

Expo 是一組工具、庫和服務，可以通過編寫 JavaScript 來構建本地的 iOS 和 android 應用程式。說人話，就是在 React Native 的基礎上再封裝了一層，讓我們的開發更方便，更快速。

做過移動端的同學在做跨平台之前肯定會擔心一個點，就是各種原生功能（相機，相冊，定位，藍牙等等），使用 expo 的話，會比你開發一個裸的 React Native 真的會快很多，而且會少踩很多坑

沒有做過移動端的前端那就更需要這個了，不然移動端的一些隱藏的限制和坑，會讓你很頭疼
——React Native 基於 Expo 開發（一）專案搭建 - 掘金

接下來將根據官網教程，搭建一個 Expo 的應用程式： Create your first app - Expo Documentation

初始化 Expo 專案#

使用 create-expo-app 來初始化一個新的 Expo 應用程式。它是一個命令行工具，允許創建一個安裝了 expo 包的新 React Native 專案。

npx create-expo-app StickerSmash
cd StickerSmash

在官方文檔裡下載演示專案所需的圖片等靜態資源，將專案中的 assets 替換： Download assets

現在，讓我們在我們最喜歡的代碼編輯器或 IDE 中打開專案目錄。在本教程中，我們將使用 VS Code 作為示例。

啟動專案#

Install dependencies 安裝依賴

要在 Web 上運行該專案，我們需要安裝以下有助於在 Web 上運行該專案的依賴項：

npx expo install react-dom react-native-web @expo/webpack-config

啟動

npx expo start

Scan QR code	啟動成功

Expo 推薦配合庫#

以下是一些 Expo 官方推薦與之配合的庫：

安全區域庫 react-native-safe-area-context
- react-native-safe-area-context 提供了一個靈活的 API，用於訪問 Android 和 iOS 的設備安全區域插入信息。它還提供了一個 SafeAreaView 組件，您可以使用該組件代替 View 來插入視圖以自動考慮安全區域。
動畫庫 react-native-reanimated
- 在您的 Expo 專案中，您可以使用 React Native 的動畫 API。然而，如果你想使用性能更好的更高級的動畫，你可以使用 react-native-reanimated 庫。它提供了一個 API，可以簡化創建流暢、強大且可維護的動畫的過程。
存儲數據 Store data - Expo Documentation
- expo-secure-store 提供了一種在設備本地加密和安全存儲鍵值對的方法。

還有其他的一些推薦庫，可以看這裡

開始使用 React Native 和 Expo SDK - 掘金

AppAuth，AuthSession：通過 OAuth 對用戶進行認證
SplashScreen：在啟動應用程式時製作一個閃屏（官方文檔）
localization 管理你的應用程式的 l10n/i18n，以達到本地化的目的
AppLoading：加載資產、字體等。
MapView：在應用程式中使用地圖
ImagePicker or ImageManipulator ：從設備上打開圖像或視頻
Sharing：在應用程式和設備之間共享數據
SecureStore: 在設備存儲器上保存數據
Camera: 使用設備的攝像頭拍攝照片和視頻
Notifications：來自 Expo 推送服務的推送通知