博客更新日志 GitHub 简中文档

首页指南 EAS 参考学习

存档 Expo Snack Discord 和论坛新闻邮件

使用 Resend

编辑页面

了解如何在 Expo 和 React Native 应用中集成 Resend，以通过 Expo Router 的 API 路由以编程方式发送电子邮件。

Resend 是一个面向开发者的电子邮件 API 平台。它允许你通过 API 以编程方式发送、接收和管理电子邮件。你可以用它发送用于新闻通讯、营销邮件等场景的事务性邮件。该 API 还允许你为邮件事件设置 webhooks、管理用于送达率的域名，以及通过 webhooks 接收邮件。

本指南演示了将 Resend 与 Expo 和 React Native 项目集成的基本步骤。

如何使用 Resend 从你的 Expo 应用发送电子邮件

如何使用 Resend 从你的 Expo 应用发送电子邮件

将 Resend 与 Expo Router API 路由集成，以编程方式发送电子邮件并部署到 EAS Hosting。

前提条件

在开始之前，你需要具备以下内容：

一个使用 Expo Router 的项目
一个 Expo 账户，用于使用 EAS Hosting 部署 API 路由
全局安装的 EAS CLI（npm install -g eas-cli）
一个 Resend 账户

1

创建 Resend API 密钥

前往 Resend 控制台 > API Keys，然后点击 Create API Key 生成一个 API 密钥。

生成 API 密钥后，将其保存到 Expo 项目的 .env.local 文件中：

.env.local

RESEND_API_KEY=YOUR_RESEND_API_KEY

注意：不要将 .env.local 文件提交到你的版本控制系统（VCS），例如 Git。API 密钥是敏感信息，不应公开暴露。你必须将该文件添加到 .gitignore 文件中以忽略它。

2

安装 Resend SDK

在你的 Expo 项目中，使用以下命令安装 Resend SDK：

Terminal

- npx expo install resend

resend SDK 库是一个仅限服务器端使用的库。它允许你从应用的服务器端代码发送电子邮件。由于本指南使用 API Routes 来处理邮件提交，因此你需要将 resend 作为 Expo 项目的一部分进行安装。

3

启用并创建 API 路由

要在你的 Expo 项目中启用 API Routes，你需要在 app 配置文件中将 web.output 设置为 server：

app.json

{
  "web": {
    "output": "server"
  }
}

然后，创建一个 API 路由来处理邮件提交。在 src/app 目录中，创建一个名为 api/audience+api.ts 的新文件。+api.ts 扩展名由 Expo Router 用于将该文件识别为 API Route。为了测试集成，你可以添加下面这段最小代码，使用 Resend SDK 向收件人发送邮件：

src/app/api/audience+api.ts

import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(request: Request) {
  const body = await request.json();
  const { email } = body;

  if (!email) {
    return Response.json({ success: false });
  }

  await resend.contacts.create({
    email: email,
    // 自行提供动态值
    firstName: 'Steve',
    lastName: 'Wozniak',
    unsubscribed: false,
  });

  return Response.json({ success: true });
}

在上面的代码片段中，当匹配到 /api/audience 路由时，会执行 POST request function。该函数接收一个 Request 对象作为参数，其中包含 HTTP 请求体。然后，函数从请求体中提取 email，并将其发送到 Resend API 以将其添加到 audience 中。

4

添加基础 URL

为了让 Expo 应用能够访问该 API 路由，你需要在 Expo 项目中将基础 URL 添加为环境变量。将以下代码添加到你的 .env.local 文件中：

.env.local

EXPO_PUBLIC_BASE_URL=https://example-resend.expo.app # 通过 EAS Hosting 部署后的 URL
EXPO_PUBLIC_BASE_URL_LOCAL=http://localhost:8081 # 仅在本地测试时需要

要在本地测试 Resend 集成，你可以使用 EXPO_PUBLIC_BASE_URL_LOCAL 指向本地开发服务器，其 URL 会在你运行 npx expo start 时提供。在本指南后面，当你将应用部署到 EAS Hosting 时，请确保将 EXPO_PUBLIC_BASE_URL 更新为部署后的 URL。

请注意，只有以前缀 EXPO_PUBLIC_ 开头的变量才能在前端代码中使用，因此你可以将上述内容以及 Resend API 密钥放在同一个 .env 文件中，但 RESEND_API_KEY 只能在服务器端代码中访问（也就是以 +api 结尾的文件）。

5

在你的 Expo 项目中添加表单

下面的示例代码展示了一个用于收集应用用户邮箱地址的简单表单。在实际场景中，你会希望为表单添加校验和错误处理。例如，以下代码添加到 src/app/index.tsx 文件中：

src/app/index.tsx

import { useRef, useState } from 'react';
import { Alert, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';

export default function Index() {
  const [email, setEmail] = useState('');
  const inputRef = useRef<TextInput>(null);

  const handleSubmit = async () => {
    if (!email) {
      alert('Email 是必填项。');
      return;
    }

    if (inputRef.current) {
      inputRef.current.blur();
    }

    try {
      const response = await fetch(
        `${process.env.EXPO_PUBLIC_BASE_URL_LOCAL}/api/audience`, // 部署到 EAS Hosting 后切换为 `EXPO_PUBLIC_BASE_URL`
        {
          method: 'POST',
          body: JSON.stringify({ email }),
        }
      );

      // 你可以在这里处理其他响应校验。

      await response.json();

      Alert.alert('成功', '邮件发送成功。', [
        {
          text: '继续',
        },
      ]);
    } catch (error) {
      alert('出错了。');
      console.error(error);
    }
  };

  return (
    <View style={styles.container}>
      <TextInput
        placeholder="邮箱"
        value={email}
        onChangeText={setEmail}
        ref={inputRef}
        autoCapitalize="none"
        keyboardType="email-address"
        style={styles.input}
      />
      <Pressable style={styles.button} onPress={handleSubmit}>
        <Text style={styles.buttonText}>发送邮件</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    borderWidth: 1,
    borderColor: 'gray',
    padding: 10,
    width: '60%',
    height: '6%',
    borderRadius: 10,
    marginBottom: 10,
    margin: 20,
  },
  button: {
    padding: 10,
    backgroundColor: '#000000',
    borderRadius: 10,
  },
  buttonText: {
    color: 'white',
    textAlign: 'center',
  },
});

6

将 API 路由部署到 EAS Hosting

为了让 API 路由（/api/audience）可通过 URL 访问，你可以将其部署到 EAS Hosting。

运行以下命令导出 web 和 API 资源。导出的文件会保存在 dist 目录中，API 路由文件也是该目录的一部分：

Terminal

- npx expo export --platform web

运行以下命令通过 EAS Hosting 创建生产部署：

Terminal

- eas deploy --prod

eas deploy --prod 命令将会：

如果你还没有 EAS 项目，会自动创建一个
提示你为项目选择预览 URL。请确保该 URL 与你 .env.local 文件中的 EXPO_PUBLIC_BASE_URL 值相同。这将使 API 路由在生产部署后仍可从你的 Expo 应用中访问

注意：在部署之前，你需要在表单页面（src/app/index.tsx）中使用 EXPO_PUBLIC_BASE_URL 作为你的托管域名。

了解更多关于 Resend

有关 Resend 的 API 和用法的更多信息，请参阅 Resend 官方文档。