在 React Native 中发送一个 email

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

您可以使用带有mailto方案的链接模块来打开邮件应用程序。

导入Linking模块：

import { Linking } from 'react-native';

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

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

您还可以使用canOpenURL() function 检查链接是否受支持：

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 。

要设置 email 主题和正文，只需将您的 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}`;