Wie starte und öffne ich den E-Mail-Client React-native?

76

Ich möchte keine E-Mail verfassen. Ich möchte nur in der Lage sein, die Haupt-E-Mail-App auf dem Gerät eines Benutzers (iOS und Android) über eine reaktionsnative App zu starten.

Szenario: Ich werde dem Benutzer bei der Anmeldung eine Bestätigungs-E-Mail senden.

Jasan
quelle
Wir sind gerade auf dasselbe Problem gestoßen. Diese Antwort zeigt Ihnen, wie Sie ein mail client pickerAndroid-Gerät öffnen und nicht nur etwas Ähnliches für iOS benötigen.
Miah

Antworten:

133

Reagieren Sie auf die native Open Mail-Funktion

<Button onPress={() => Linking.openURL('mailto:[email protected]') }
      title="[email protected]" />

Reagieren Sie auf die native Open Mail-Funktion mit Betreff und Text

<Button onPress={() => Linking.openURL('mailto:[email protected]?subject=SendMail&body=Description') }
      title="[email protected]" />

Native native URL reagieren

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

## Vergiss nicht zu importieren

import { Linking } from 'react-native'

Hinweis: Wird im iOS-Simulator nicht unterstützt, daher müssen Sie auf einem Gerät testen.

Vishal Vaghasiya
quelle
13
openURL('mailto:...')öffnet eine E-Mail zum Verfassen, nicht den E-Mail-Client, was Jasan ausdrücklich sagt, dass er nicht will.
Miah
17
Hinweis: Wird im iOS-Simulator nicht unterstützt, daher müssen Sie auf einem Gerät testen.
Ben Butterworth
@ Vishal Vaghasiya In dieser E-Mail-URL, wenn ich Körper mit etwas mehr enthalten habe enthalten !! Dann wird enthalten abgeschnitten. Brauchen Sie Ihre Aufmerksamkeit für das gleiche
Zala Janaksinh
22

Leider ist keine der Antworten richtig .

Ich möchte keine E-Mail verfassen. Ich möchte nur die Haupt-E-Mail-App starten können

Ich möchte das gleiche Verhalten haben:

  1. Anmeldebildschirm mit einer Schaltfläche Open Email App
  2. Der Benutzer öffnet seine E-Mail-App
  3. Er kann auf den magischen Link klicken, um wieder in die App zu gelangen

Mehr oder weniger das gleiche wie das Slack Onboarding mit dem magischen Link.

Geben Sie hier die Bildbeschreibung ein

Ich habe eine Lösung mit dem React-Native-Email-Link der Bibliothek gefunden . Sie können einen E-Mail-Client über React Native öffnen (für die Funktion "Magischer Link").

  • Funktioniert unter Android.
  • Wenn Sie iOS ausprobieren möchten, benötigen Sie ein echtes Gerät, da es mail.appunter iOS Simulator kein Gerät gibt .
David Leuliette
quelle
12

Zu diesem Zweck können Sie das Link-Modul "React Natives" verwenden. Hier ist ein Link zum Modul https://facebook.github.io/react-native/docs/linking.html .

Beispiel: Linking.openURL('mailto:[email protected]?subject=example&body=example')

tnyN
quelle
9
Aber ich möchte keine Post senden. Ich möchte nur die Mail-App starten, damit der Benutzer Nachrichten lesen kann. Besonders die Bestätigungs-E-Mail, die ich gerade gesendet habe
Jasan
Haben Sie jemals eine Lösung gefunden, um nur die E-Mail-App zu öffnen, ohne neue E-Mails in RN zu verfassen?
Mindbomb
1
Dies funktioniert für mich, obwohl das erste & sollte ein?
Mvandillen
7
Beachten Sie, dass dies einen Fehler im Simulator
auslöst
7

So öffnen Sie die E-Mail-App unter 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)
      })
Daniel
quelle
2

Mit dieser Methode können Sie jeden E-Mail-Client öffnen und eine E-Mail mit einigen Daten senden.

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:[email protected]?subject=Billing Query&body=Description'
      Linking.openURL(link);
    }
  })
  .catch(err => console.error('An error occurred', err));
} else {
  console.log('sendEmailViaEmailApp -----> ', 'mail link is undefined');
 }
};

Platzieren Sie diese Methode in einer utils-Klasse und verwenden Sie diese Methode, wo immer Sie möchten

Aakash Daga
quelle
2
import { Linking } from 'react-native'

React Native Open Mail 

<TouchableOpacity onPress={() => Linking.openURL('mailto:[email protected]')}>
   <Text>[email protected]</Text>
</TouchableOpacity>


React Native Open Mail With Subject & Body 

<TouchableOpacity onPress={() => Linking.openURL('mailto:[email protected]?subject=sendmail&body=details')}>
   <Text>[email protected]</Text>
</TouchableOpacity>

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

pragnesh
quelle
0

Ich denke, das folgende npm-Modul sollte das haben, wonach Sie suchen. Leider werden native Bibliotheken verwendet, sodass Sie einige reaktionsnative Links ausführen müssen.

https://www.npmjs.com/package/react-native-mail

cbartondock
quelle
Könnten Sie bitte ein Beispiel geben, wie dies mit dem von Ihnen erwähnten Modul erreicht werden kann?
Shaked Sayag
0
<TouchableOpacity onPress={()=>{ 
  Linking.openURL('mailto:[email protected]?subject=mailsubject&body=mailbody');
                            }}>
    <View><Text>Contact Us</Text></View>
 </TouchableOpacity>

Diese Arbeit für mich.!

Jitender Badoni
quelle
0

Expo.io reine js / Typoskript-Lösung:

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

Funktioniert in iOS mit Mail, funktioniert in Android

Android Intent-Dokumente: https://developer.android.com/reference/android/content/Intent#ACTION_MAIN

Expo IntentLauncher doc: https://docs.expo.io/versions/latest/sdk/intent-launcher/

Alex Ross
quelle
0

Für die Open Mail App habe ich so verwendet und es funktioniert für mich

const subject = "Mail Subject"
const message = "Message Body"
Linking.openURL(`mailto:[email protected]?subject=${subject}&body=${message}`)
Akshay Italiya
quelle