Expo 簡介

Expo 是一個用於 React 應用的框架和平台。其 Expo SDK 提供了 React Native 和 Native 的組件或工具，幫助開發者僅使用 JavaScript/TypeScript，在 iOS、Android 和 Web 應用上開發、構建、部署和快速迭代。 -- https://docs.expo.dev/

背景

開發、構建、發布基於 React Native 的 App 時，可能要修改 Native 的代碼或 App 配置，這就需要安裝 Xcode 或 Android Studio，配置環境，以及熟悉 iOS 或 Android 開發。這對開發者來說存在相當大的成本。

Expo 已經幫你集成了這些，你只需專注 JavaScript/TypeScript 的代碼開發，你可以從 Expo SDK 引入 React Native 或 Native 的組件，另外可以下載 Expo Go App，便於在真機上調試代碼、預覽效果。

開發

初始化項目

# Install the command line tools
$ npm install --global expo-cli
# Create a new project
$ expo init my-project

目錄結構

├── App.tsx
├── app.json # app 配置如圖標、名稱、版本等等
├── assets
├── babel.config.js
├── node_modules
├── package.json
├── tsconfig.json
└── yarn.lock

修改默認入口

// app.json
{
  "expo": {
    "description": "",
    "entryPoint": "./index.ts"
  }
}

// index.ts
import { registerRootComponent } from 'expo';
import App from '@src/App';

registerRootComponent(App);

安裝功能模塊

$ expo install expo-camera

有 yarn.lock 時，expo install 使用 yarn 安裝

有 package-lock.json 時， expo install 使用 npm 安裝

發布

Expo 也是個沙盒平台，可以在 Expo Go App 訪問開發者發布的代碼，例如 React Native 官方文檔里樣例 demo

最后，Expo 的一套集成工具讓前端開發者無需過多關注 Native 的配置，大大降低了開發成本，使 App 可以快速迭代。

本博客所有文章除特別聲明外，均采用 BY-NC-SA 許可協議。轉載請注明出處！