React Native Expo项目调用邮件功能报错：Cannot read property 'mail' of null

我创建了一个测试App，尝试在React Native项目中调用设备默认邮件应用发送简单邮件。使用Expo环境，在iPhone 13上通过Expo运行应用时，持续出现以下错误：

TypeError: Cannot read property 'mail' of null, js engine: hermes

我的代码非常简洁，仅实现调用默认邮件应用的功能，代码如下：

import { Alert, Text, View, Button } from "react-native";
import Mailer from "react-native-mail";
// npm install react-native-mail --save

function sendEmail() {
  console.log(content)
  Mailer.mail(
    {
      subject: "Test",
      recipients: ["support@example.com"], // replace with your email
      body: ' Account Id: #123123',
      isHTML: true,
    },
    (error, event) => {
      Alert.alert(
        error,
        event,
        [
          { text: 'Ok', onPress: () => console.log('OK: Email Error Response') },
          { text: 'Cancel', onPress: () => console.log('CANCEL: Email Error Response') }
        ],
        { cancelable: true }
      )
    });
}

export default function Index() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Text>I hope this works</Text>
      <Button
        onPress={sendEmail}
        title="Email Me"
        color="#841584"
      />
    </View>
  );
}

以下是我的package.json依赖示例：

},
  "dependencies": {
    "@expo/vector-icons": "^14.0.0",
    "@react-navigation/native": "^6.0.2",
    "expo": "~51.0.9",
    "expo-constants": "~16.0.2",
    "expo-font": "~12.0.6",
    "expo-linking": "~6.3.1",
    "expo-router": "~3.5.14",
    "expo-splash-screen": "~0.27.4",
    "expo-status-bar": "~1.12.1",
    "expo-system-ui": "~3.0.4",
    "expo-web-browser": "~13.0.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.1",
    "react-native-email": "^2.1.0",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-mail": "^6.1.1",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "4.10.1",
    "react-native-screens": "3.31.1",
    "react-native-web": "~0.19.10"
  },

核心原因 #

react-native-mail是第三方原生模块，而Expo Go是预构建的通用客户端，无法直接加载未预打包的原生模块，导致你导入的Mailer对象为null，调用Mailer.mail时触发报错。

推荐解决步骤 #

使用Expo官方提供的expo-mail-composer，它完全适配Expo环境，无需配置原生代码，步骤如下：

1. 安装依赖

npx expo install expo-mail-composer

2. 替换原有代码为以下实现

import { Alert, Text, View, Button } from "react-native";
import * as MailComposer from 'expo-mail-composer';

function sendEmail() {
  MailComposer.composeAsync({
    subject: "Test",
    recipients: ["support@example.com"],
    body: 'Account Id: #123123',
    isHtml: true,
  }).then(result => {
    if (result.status === 'sent') {
      console.log('邮件已发送');
    } else if (result.status === 'cancelled') {
      console.log('邮件发送已取消');
    }
  }).catch(error => {
    Alert.alert('发送失败', error.message, [
      { text: '确定', onPress: () => console.log('错误提示已确认') }
    ]);
  });
}

export default function Index() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Text>I hope this works</Text>
      <Button
        onPress={sendEmail}
        title="Email Me"
        color="#841584"
      />
    </View>
  );
}

备选方案（不推荐） #

如果一定要使用react-native-mail，需要通过EAS Build构建自定义Expo开发客户端，将该原生模块打包进客户端中。但这种方式流程繁琐，维护成本高，远不如官方模块高效。

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