如何启动和打开电子邮件客户端React-native?


76

我不想撰写电子邮件。我只希望能够从本机应用程序在用户设备(iOS和Android)上启动主电子邮件应用程序。

场景:注册后,我会向用户发送一封验证电子邮件。


我们只是遇到了同样的问题。 这个答案向您展示了如何mail client picker在android中打开一个,而不仅仅是需要类似ios的东西。
miah

Answers:


133

反应本机打开邮件功能

<Button onPress={() => Linking.openURL('mailto:support@example.com') }
      title="support@example.com" />

使用主题和正文来响应本机打开邮件功能

<Button onPress={() => Linking.openURL('mailto:support@example.com?subject=SendMail&body=Description') }
      title="support@example.com" />

反应本机开放URL

<Button onPress={() => Linking.openURL('https://www.google.co.in/') }
      title="www.google.co.in" />

##不要忘记导入

import { Linking } from 'react-native'

注意: iOS模拟器不支持此功能,因此必须在设备上进行测试。


13
openURL('mailto:...')打开一封电子邮件进行撰写,而不是电子邮件客户端,Jasan明确表示他不想这样做。
miah

17
注意: iOS模拟器不支持此功能,因此必须在设备上进行测试。
Ben Butterworth

@Vishal Vaghasiya在此电子邮件URL中,如果我通过传递了包含更多内容的正文!然后包含被削减。需要你同样的关注
砸落Janaksinh

22

不幸的是,没有一个答案是正确的

我不想撰写电子邮件。我只想能够启动主电子邮件应用程序

我希望有相同的行为:

  1. 带按钮的登录屏幕 Open Email App
  2. 用户打开他的电子邮件应用程序
  3. 他可以单击魔术链接以返回应用程序

与带有魔术链接的Slack Onboarding大致相同。

在此处输入图片说明

我找到了一个带有库react-native-email-link的解决方案。您可以从React Native打开电子邮件客户端(用于“魔术链接”类型功能)。

  • 适用于Android。
  • 如果要在iOS上尝试,则需要具有真实的设备,因为mail.appiOS Simulator上没有。

12

为此,您可以使用react natives链接模块。这是指向模块https://facebook.github.io/react-native/docs/linking.html的链接。

例: Linking.openURL('mailto:example@gmail.com?subject=example&body=example')


9
但是我不想发送邮件。我只想启动邮件应用供用户阅读邮件。尤其是我刚刚发送的验证电子邮件
jasan

您是否找到了只打开电子邮件应用程序而不在RN中编写新电子邮件的解决方案?
mindbomb

1
这对我有用,尽管第一个&应该是?
mvandillen

7
请注意,这会在模拟器中引发错误,因为未安装邮件应用程序
Michael FalckWedelgård18年

7

要在iOS上打开电子邮件应用程序

 Linking.canOpenURL('message:')
    .then(supported => {
        if (!supported) {
          console.log('Cant handle url')
        } else {
          return Linking.openURL('message:')
        }
      })
      .catch(err => {
        console.error('An error occurred', err)
      })

2

您可以使用此方法打开任何电子邮件客户端,并发送包含一些数据的电子邮件。

export const sendEmailViaEmailApp = (toMailId, subject, body) => {
  if (!isUndefined(toMailId)) {
    let link = `mailto:${toMailId}`;
  if (!isUndefined(subject)) {
    link = `${link}?subject=${subject}`;
  }
 if (isUndefined(subject)) {
   link = `${link}?body=${body}`;
 } else {
   link = `${link}&body=${body}`;
 }

Linking.canOpenURL(link)
  .then(supported => {
    if (supported) {
      // 'mailto:support@example.com?subject=Billing Query&body=Description'
      Linking.openURL(link);
    }
  })
  .catch(err => console.error('An error occurred', err));
} else {
  console.log('sendEmailViaEmailApp -----> ', 'mail link is undefined');
 }
};

将此方法放在utils类中,并在需要的地方使用此方法


2
import { Linking } from 'react-native'

React Native Open Mail 

<TouchableOpacity onPress={() => Linking.openURL('mailto:support@example.com')}>
   <Text>support@example.com</Text>
</TouchableOpacity>


React Native Open Mail With Subject & Body 

<TouchableOpacity onPress={() => Linking.openURL('mailto:support@example.com?subject=sendmail&body=details')}>
   <Text>support@example.com</Text>
</TouchableOpacity>

this will only work in real device. not working in iOS simulator.



0
<TouchableOpacity onPress={()=>{ 
  Linking.openURL('mailto:support@domain.com?subject=mailsubject&body=mailbody');
                            }}>
    <View><Text>Contact Us</Text></View>
 </TouchableOpacity>

这对我有用。



0

Expo.io纯js / typescript解决方案:

import * as IntentLauncher from 'expo-intent-launcher';

// ...

  public openMailClientIOS() {
    Linking.canOpenURL('message:0')
      .then(supported => {
        if (!supported) {
          console.log('Cant handle url')
        } else {
          return Linking.openURL('message:0')
            .catch(this.handleOpenMailClientErrors)
        }
      })
      .catch(this.handleOpenMailClientErrors)
  }

  public openMailClientAndroid() {

    const activityAction = 'android.intent.action.MAIN'; // Intent.ACTION_MAIN
    const intentParams: IntentLauncher.IntentLauncherParams = {
      flags: 268435456, // Intent.FLAG_ACTIVITY_NEW_TASK
      category: 'android.intent.category.APP_EMAIL' // Intent.CATEGORY_APP_EMAIL
    };

    IntentLauncher.startActivityAsync(activityAction, intentParams)
      .catch(this.handleOpenMailClientErrors);
  }

在iOS中搭配Mail使用,在Android中运作

Android Intent文档:https//developer.android.com/reference/android/content/Intent#ACTION_MAIN

世博会IntentLauncher文档:https://docs.expo.io/versions/latest/sdk/intent-launcher/


0

对于开放式邮件应用程序,我已经使用过,并且对我有用

const subject = "Mail Subject"
const message = "Message Body"
Linking.openURL(`mailto:support@domain.com?subject=${subject}&body=${message}`)

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.