文章

Expo初识

Expo初识

发表于 更新于
作者 独行的风
10 分钟阅读
Expo初识

Expo初识

Create universal native apps with React that run on Android, iOS, and the web. Iterate with confidence.

使用React创建在Android、iOS和web上运行的通用原生应用。自信地迭代。

开发者可以无需考虑环境问题

体验demo - teddy

该demo旨在打造全功能模版，包含一些基本功能的使用，如**路由（含身份验证）、远程打包、热更新**等；

该文档就记录了一些主要的脚本命令及流程，看demo更完整。

teddy（泰迪）小猪佩奇里面佩奇的玩偶🧸🧸🧸

GitHub - hutaoao/expo-teddy: react-native 框架 Expo demo项目，包含了 路由 热更新等基础功能示例！

优势

  • **React Native集成：**Expo基于Facebook的React Native框架，允许开发者用JavaScript和React语法编写跨平台的应用。
  • **统一的SDK：**Expo有自己的SDK，其中包含了许多预封装的模块，如地图、推送通知、相机和音频等，使得添加这些常见功能变得简单易行。
  • **热更新（Hot Reloading）：**Expo支持实时重载，极大地提高了开发效率，开发者可以迅速看到代码更改的效果。
  • **原生模块支持：**虽然大部分功能可以通过SDK实现，但当需要自定义原生模块时，Expo的eject功能可以让应用脱离Expo环境，转为完全的React Native项目，从而可以直接进行原生代码的修改。
  • **即用型工具：**包括二维码扫描、设备检测、远程控制等功能，使得调试和分享应用程序变得更加简单。
  • 基于文件系统的本机路由：expo-router

创建项目

保证node环境是好的就行

npx create-expo-app@latest

可以使用--template选项选择以下模板之一，或将其作为参数传递给选项。例如，--template default。

模板描述
default默认模板。旨在构建跨屏应用。包括推荐工具，如 Expo CLI、Expo Router 库和启用的 TypeScript 配置。适用于大多数应用。
blank无需配置导航即可安装所需的最低限度的 npm 依赖项。
blank-typescript启用了 TypeScript 的空白模板。
tabs安装并配置基于文件的路由，并启用 Expo Router 和 TypeScript。
bare-minimum生成带有本机目录（ android和ios ）的空白模板。npx expo prebuild
在安装期间运行。

expo常用命令

命令描述
npx expo start启动开发服务器（无论您使用的是开发版本还是 Expo Go）。
npx expo prebuild使用Prebuild生成原生 Android 和 iOS 目录。(如修改app.json配置 需执行该命令重新输出 Android 和 iOS 目录才会体现出)
npx expo run:android在本地编译原生 Android 应用程序。
npx expo run:ios在本地编译原生 iOS 应用程序。
npx expo install package-name--fix通过向此命令添加选项，用于安装新库或验证和更新项目中的特定库。
npx expo lint设置并配置ESLint。如果 ESLint 已配置，此命令将检查你的项目文件。

运行

方式一：Expo Go

在没有自定义本地模块的有限沙箱中尝试应用程序开发。非常适合快速测试Expo。不适合长期项目。

  • 手机安装 Expo Go
    • cd expo-demo
    • npm run android 运行到Android
    • npm run ios 运行到iOS

方式二：Development build

使用开发工具构建自己的应用程序。支持自定义本地模块。用于生产项目。

以Android为例：

  • 安装EAS CLI

npm install -g eas-cli

  • 创建一个Expo帐户并登录

eas login

  • 配置项目（在项目根目录运行）

eas build:configure

  • 打包

eas build --platform android --profile development

环境变量

.env

Expo CLI 将自动从.envEXPO_PUBLIC_文件中加载带有前缀的环境变量以供在您的 JavaScript 代码中使用。

在项目目录的根目录中创建一个.env文件，并在新行中以以下形式添加特定于环境的变量EXPO_PUBLIC_[NAME]=VALUE：

EXPO_PUBLIC_API_URL=https://staging.example.com
EXPO_PUBLIC_API_KEY=abc123

现在您可以在源代码中直接使用环境变量：

1
2
3
4
5
6
7
8
9
10
11

import { Button } from 'react-native';

function Post() {
  const apiUrl = process.env.EXPO_PUBLIC_API_URL;

  async function onPress() {
    await fetch(apiUrl, { ... })
  }

  return <Button onPress={onPress} title="Post" />;
}

当您运行 时npx expo start，应用程序包中的process.env.EXPO_PUBLIC_API_URL将被替换为https://staging.example.com。您可以在编辑代码时更新变量，而无需重新启动 Expo CLI 或清除缓存。您需要执行完全重新加载（例如，摇动手势，然后在 Expo Go 或您的开发版本中重新加载）才能看到更新的值。

不要将敏感信息（例如私钥）存储在EXPO_PUBLIC_变量中。这些变量将以纯文本形式显示在已编译的应用程序中。

使用多个 .env 文件定义单独的环境

可以有单独的**.env**、.env.development、.env.production等文件，它们将根据标准优先级加载。

如果你创建了特定于环境的文件，例如**.env.**production，则可以NODE_ENV在运行 Expo CLI 时通过设置来加载它：

**NODE_ENV=production npx expo start**

将按以下顺序覆盖（最高定义的变量覆盖较低的变量）:

层级优先级文件名环境应该忽略.gitignore吗？
第一名（最高）.env.development.local发展是的！
第一.env.test.local测试是的！
第一.env.production.local生产是的！
第二.env.local无论文件在哪里确实。
第三.env.development发展不。
第三.env.test测试不。
第三.env.production生产不。
最后的.env所有环境视情况而定（见下文
）

Expo Application Services 中的环境变量

如果您按照环境变量指南中的说明在**.env文件中为本地开发设置变量，则可以在eas.json**中的构建配置文件中设置相同的变量。例如，您可以在本地开发时将 API URL 变量设置为本地后端服务器，在测试时将 API URL 变量设置为测试服务器，在生产构建时将 API URL 变量设置为生产服务器。

在这种情况下，你的**.env**文件可能如下所示：

1

EXPO_PUBLIC_API_URL=http://api.local

将任何适用的.env文件添加到您的.gitignore（和.easignore，如果您的项目有的话）文件中，这样它们就不会随您的 EAS Build 作业一起上传：

1
2

# ignores all .env files
.env*

然后，您可以在eas.json中为每个构建配置文件设置相同的环境变量：

eas.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14

{
  "build": {
    "production": {
      "env": {
        "EXPO_PUBLIC_API_URL": "https://api.production.com"
      }
    },
    "test": {
      "env": {
        "EXPO_PUBLIC_API_URL": "https://api.test.com"
      }
    }
  }
}

任何引用都process.env.EXPO_PUBLIC_API_URL将根据环境替换为适用的值。**

‼️本地的 .env、.env.development、.env.production如果被.****gitignore忽略没有上传的话，则使用的是eas.json中的环境变量（需要重新eas build ...）； ‼️如果本地的 .env、.env.development、.env.production没有被.****gitignore忽略则优先使用对应的环境变量

使用库（含第三方库）

Use libraries

使用Expo Router

安装依赖

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar

设置入口

1
2
3

{
  "main": "expo-router/entry"
}

热更新

安装

npx expo install expo-updates

配置项目

eas update:configure

先配置EAS Build > eas build:configure

移动开发, reactnative
reactnative
本文由作者按照 CC BY 4.0 进行授权