首页 > 解决方案 > 在已发送电子邮件的正文中写下一个在另一个下的文本 -React Native

问题描述

我是 React 本机和 javascript 的新手。在应用程序中,我创建了一个屏幕供用户通过电子邮件向我发送他们的想法。邮件正文中的所有文本并排排列。但我希望他们一个接一个。我怎样才能提供这个?这是我收到的电子邮件:

在此处输入图像描述

我希望它是这样的:

在此处输入图像描述

我的代码:

import React, { useCallback, useState } from "react"
import { StyleSheet, View, Text, TextInput, Linking } from "react-native"
import DeviceInfo from 'react-native-device-info';

import { colors } from "../../theme/Colors"
import Fonts from "../../theme/Fonts"
import { units } from "../../theme/Units"
import ModalButtonWithBackground from "./ModalButtonWithBackground"



const StoreReview = (props) => {

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

    let brand = DeviceInfo.getBrand();
    let model = DeviceInfo.getModel()

    let body = (brand + ' ' + model )

    const emailAddress = ['example@gmail.com', 'example2@gmail.com'];
    const url = `mailto:${emailAddress}?subject=${'Error'}&body=${body + " " + comment}`;

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

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

    return (
        <View style={styles.container}>
            <View style={styles.commentArea}>
                <TextInput
                    onChangeText={setComment}
                    value={comment}
                    multiline={true}
                />
            </View>
            <View style={styles.button}>
                <ModalButtonWithBackground
                    buttonText={'Send'}
                    onPress={() => {
                        sendEmail()
                        props.onPressCloseModal()
                    }}
                />
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        marginTop: units.height / 144,
        height: units.height / 2.88,
        justifyContent: 'space-between',
    },
    headerText: {
        fontFamily: Fonts.type.bold,
        fontSize: Fonts.size(20),
        color: colors.WHITE,
        textAlign: 'center',
        marginHorizontal: units.width / 7.87
    },
    commentArea: {
        width: units.width / 1.13,
        height: units.height / 7.2,
        backgroundColor: colors.WHITE,
        alignSelf: 'center',
        borderRadius: 5,
    },
    button: {
        marginTop: 4
    }
})

export default StoreReview

标签: javascriptreact-native

解决方案


您可以在模板文字中使用\n 换行符

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

const brand = DeviceInfo.getBrand();                 // Sony
const model = DeviceInfo.getModel();                 // G8341
const systemName = DeviceInfo.getSystemName();       // Android
const systemVersion = DeviceInfo.getSystemVersion(); // 9

const emailAddresses = [
  'example@gmail.com',
  'example2@gmail.com',
];

const to = emailAddresses.join(',');
const subject = 'Error';
const body = `${brand} ${model}\n${systemName} ${systemVersion}\n${comment}`;

const url = `mailto:${to}?subject=${subject}&body=${body}`;

// …

对于Comments here评论,这将创建一个新的电子邮件,准备发送到example@gmai.comexample2@gmai.com,主题为Error和以下正文。

身体:

Sony G8341
Android 9
Comments here

这是一个有点简化的小吃(检查components/EmailComposer.js文件)


推荐阅读