在 React Native 中发送电子邮件

Question

我是 React Native 的新手。我的应用程序中有一个文本输入区域。我想将用户写的文本发送到我的 gmail。我该怎么做？

这是我的代码：

import React, { useState } from "react"
import { View, Text, TextInput } from "react-native"
import ModalButton from "./ModalButton"
import styles from "./theme"



const StoreReview = (props) => {

    const [comment, setComment] = useState('')

    return (
        <View style={styles.container}>
            <Text style={styles.headerText}>
                We are very sorry about this.
                Can you share your experiences?
            </Text>
            <View style={styles.commentArea}>
                <TextInput
                    onChangeText={setComment}
                    value={comment}
                    multiline={true}
                />
            </View>
            <View style={styles.button}>
                <ModalButton
                    buttonText={'Send'}
                    onPress={() => {
                        console.log(comment, 'send that commet to gmail')
                    }}
                />
            </View>
        </View>
    )
}
export default StoreReview

Answer 1

您可以使用 Linking 模块和 mailto 方案来打开邮件应用程序。

导入Linking模块：

import { Linking } from 'react-native';

然后，使用其openURL()功能打开邮件应用程序：

await Linking.openURL('mailto:youremail@example.com');

您也可以使用canOpenURL()函数查看是否支持link:

const url = 'mailto:youremail@example.com';

const supported = await Linking.canOpenURL(url);

if (supported) {
  await Linking.openURL(url);
}

因此，在您的示例中，它看起来像：

import React, { useState, useCallback } from 'react';
import { View, Text, TextInput, Linking } from 'react-native';
import ModalButton from './ModalButton';

const StoreReview = (props) => {
    const [comment, setComment] = useState('');

    const emailAddress = 'youremail@example.com';
    const url = `mailto:${emailAddress}?body=${comment}`;

    const handlePress = useCallback(async () => {
        const supported = await Linking.canOpenURL(url);

        if (supported) {
            await Linking.openURL(url);
        }
    }, [url]);

    return (
        <View style={styles.container}>
            <Text style={styles.headerText}>
                We are very sorry about this.
                Can you share your experiences?
            </Text>
            <View style={styles.commentArea}>
                <TextInput
                    onChangeText={setComment}
                    value={comment}
                    multiline={true}
                />
            </View>
            <View style={styles.button}>
                <ModalButton
                    buttonText="Send"
                    onPress={handlePress}
                />
            </View>
        </View>
    );
}

export default StoreReview;

编辑： 我刚意识到您想在电子邮件正文中包含 comment。

要设置电子邮件主题和正文，只需将 URL 从 mailto:youremail@example.com 更改为 mailto:youremail@example.com?subject=Hello&body=World。

因此，在您的情况下，URL 应该是：

const [comment, setComment] = useState('');

const emailAddress = 'youremail@example.com';
const url = `mailto:${emailAddress}?body=${comment}`;

在 React Native 中发送电子邮件

Send an email in react native

javascript

email

react-native