如何在React Native中将表单内容发送为邮件？

下面是几个实用的实现方案，覆盖不同场景需求：

1. 调用第三方邮件服务API #

像SendGrid、Mailgun这类邮件服务都提供REST API，可以直接在React Native里通过fetch或axios调用。注意不要把API密钥直接写在客户端代码里，建议通过环境变量管理，或者用后端中转（见下一个方案）避免密钥泄露。

示例代码（以SendGrid为例）：

import axios from 'axios';

const sendEmail = async (formData) => {
  try {
    await axios.post('https://api.sendgrid.com/v3/mail/send', {
      personalizations: [{ to: [{ email: '目标收件邮箱' }] }],
      from: { email: '你的认证发件邮箱' },
      subject: formData.subject,
      content: [{ type: 'text/plain', value: formData.message }]
    }, {
      headers: {
        'Authorization': `Bearer ${process.env.SENDGRID_API_KEY}`,
        'Content-Type': 'application/json'
      }
    });
    return { success: true };
  } catch (error) {
    console.error('邮件发送失败:', error);
    return { success: false, error: error.message };
  }
};

2. 自建后端中转（推荐） #

直接在客户端调用邮件API有密钥泄露风险，更安全的方式是搭建一个简单的后端服务（比如Node.js/Express），前端把表单数据传给后端，由后端调用邮件服务API发送。

后端示例（Node.js/Express） #

const express = require('express');
const axios = require('axios');
const app = express();
app.use(express.json());

app.post('/send-email', async (req, res) => {
  const { to, subject, message } = req.body;
  try {
    await axios.post('https://api.sendgrid.com/v3/mail/send', {
      personalizations: [{ to: [{ email: to }] }],
      from: { email: '你的认证发件邮箱' },
      subject,
      content: [{ type: 'text/plain', value: message }]
    }, {
      headers: {
        'Authorization': `Bearer ${process.env.SENDGRID_API_KEY}`,
        'Content-Type': 'application/json'
      }
    });
    res.json({ success: true });
  } catch (error) {
    res.status(500).json({ success: false, error: error.message });
  }
});

app.listen(3000, () => console.log('后端服务运行在3000端口'));

前端调用示例 #

const sendEmail = async (formData) => {
  try {
    const response = await fetch('http://你的后端服务器地址/send-email', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(formData),
    });
    return await response.json();
  } catch (error) {
    console.error('请求后端失败:', error);
    return { success: false };
  }
};

3. 唤起系统邮件应用 #

如果不需要自动发送，而是让用户手动确认发送，可以用react-native-mail或expo-mail-composer（Expo项目）这类库，直接唤起手机自带的邮件应用，自动填充表单内容。

示例（Expo项目）：

import * as MailComposer from 'expo-mail-composer';

const sendEmail = async (formData) => {
  const mailOptions = {
    recipients: ['目标收件邮箱'],
    subject: formData.subject,
    body: formData.message,
  };
  const result = await MailComposer.composeAsync(mailOptions);
  return result.status === MailComposer.MailComposerStatus.SENT;
};

这种方式无需配置第三方服务，也没有安全风险，但依赖用户的操作完成发送。

内容的提问来源于stack exchange，提问作者dfg