使用 Resend

RESEND_API_KEY=YOUR_RESEND_API_KEY

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

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 });
}

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

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('电子邮件是必填项。');
      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',
  },
});