如何在 React Native 后台发送邮件
How to send a email in background in React Native
我需要在按下按钮时在 React Native 中发送一封电子邮件，但播放器应该不会注意到它已发送。他应该只会收到一条提醒，说电子邮件已发送，但一切都应该在后台完成。
我想在最后按下按钮时触发它。
我尝试过链接、第 3 方库和许多其他东西。
我已经被这个问题困扰一年多了。
这是我目前使用的代码（请不要笑）：
import React, {useState} from 'react';
import {
Button,
View,
TextInput,
Alert,
Image,
Dimensions,
Text,
StyleSheet,
TouchableOpacity,
ScrollView,
BackHandler,
} from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';
import { sendEmail } from './sendEmail'
function sendMail() {
sendEmail(
'epicprogrammer2009@gmail.com',
'Greeting!',
'I think you are up how many letters you get.'
).then(() => {
console.log('Our email successful provided to device mail ');
});
}
class Appointment extends React.Component {
constructor(props) {
super(props);
this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
this.state = {
purp: '',
date: '',
place: '',
name: '',
adress: '',
city: '',
desc: '',
isDatePickerVisible: false,
purpErr: '',
dateErr: '',
placeErr: '',
nameErr: '',
adressErr: '',
cityErr: '',
descErr: '',
};
}
componentWillMount() {
BackHandler.addEventListener(
'hardwareBackPress',
this.handleBackButtonClick,
);
}
componentWillUnmount() {
BackHandler.removeEventListener(
'hardwareBackPress',
this.handleBackButtonClick,
);
}
handleBackButtonClick() {
this.props.navigation.goBack(
this.props.navigation.navigate('Menu'),
);
return true;
}
showDatePicker = () => {
// this.setState({isDatePickerVisible: true});
};
hideDatePicker = () => {
// setDatePickerVisibility(false);
};
handleConfirm = (date) => {
// console.warn('A date has been picked: ', date);
// hideDatePicker();
};
sendMessage = () => {
};
purpVal = () => {
if (this.state.purp == '') {
this.setState({purpErr: 'Purpose feild cannot be empty'});
} else {
this.setState({purpErr: ''});
}
};
dateVal = () => {
if (this.state.date == '') {
this.setState({dateErr: 'Date feild cannot be empty'});
} else {
this.setState({dateErr: ''});
}
};
placeVal = () => {
if (this.state.place == '') {
this.setState({placeErr: 'Place feild cannot be empty'});
} else {
this.setState({placeErr: ''});
}
};
nameVal = () => {
if (this.state.name == '') {
this.setState({nameErr: 'Name feild cannot be empty'});
} else {
this.setState({nameErr: ''});
}
};
adressVal = () => {
if (this.state.adress == '') {
this.setState({adressErr: 'Adress feild cannot be empty'});
} else {
this.setState({adressErr: ''});
}
};
cityVal = () => {
if (this.state.city == '') {
this.setState({cityErr: 'City feild cannot be empty'});
} else {
this.setState({cityErr: ''});
}
};
descErr = () => {
if (this.state.desc == '') {
this.setState({descErr: 'Description feild cannot be empty'});
} else {
this.setState({descErr: ''});
}
};
submitCheck = () => {
if (this.state.purp == '') {
this.setState({purpErr: 'Purpose feild cannot be empty'});
} else {
this.setState({purpErr: ''});
}
if (this.state.date == '') {
this.setState({dateErr: 'Date feild cannot be empty'});
} else {
this.setState({dateErr: ''});
}
if (this.state.name == '') {
this.setState({nameErr: 'Name feild cannot be empty'});
} else {
this.setState({nameErr: ''});
}
if (this.state.adress == '') {
this.setState({adressErr: 'Adress feild cannot be empty'});
} else {
this.setState({adressErr: ''});
}
if (this.state.city == '') {
this.setState({cityErr: 'City feild cannot be empty'});
} else {
this.setState({cityErr: ''});
}
if (this.state.desc == '') {
this.setState({descErr: 'Description feild cannot be empty'});
} else {
this.setState({descErr: ''});
}
// purp: '',
// date: '',
// place: '',
// name: '',
// adress: '',
// city: '',
// desc: '',
Alert.alert('Your Appointment has been fixed we will contact you');
this.textInputName.clear();
this.textInputDesc.clear();
this.textInputCity.clear();
this.textInputPurp2.clear();
this.textInputPurp.clear();
this.textInputDate.clear();
};
sendEmail = () => {
};
static navigationOptions = {
title: 'Appointments',
};
render() {
const {isDatePickerVisible} = this.state;
const {navigate} = this.props.navigation;
const {width} = Dimensions.get('window').width;
const {height} = Dimensions.get('window').height;
return (
<ScrollView style={styles.conatiner}>
<View style={styles.logo}>
<Image
style={{width: 180, height: 180, marginLeft: 20, borderRadius: 150}}
source={require('../../Components/Images/home.jpg')}
/>
</View>
<View>
<Text
style={{
fontSize: 35,
fontWeight: 'bold',
textAlign: 'center',
marginTop: 10,
color: '#fff',
}}>
Satej Patil
</Text>
<Text
style={{
fontSize: 20,
textAlign: 'center',
marginTop: 5,
color: '#fff',
}}>
Fix Appointment
</Text>
</View>
<TextInput
placeholder="Place"
// keyboardType="number-pad"
placeholderTextColor="#fff"
style={{
marginTop: 45,
borderColor: '#fff',
borderBottomWidth: 2,
color: 'white',
width: 340,
alignSelf: 'center',
}}
onChangeText={(value) => this.setState({purp: value})}
value={this.state.purp}
ref={(inputP2) => {
this.textInputPurp2 = inputP2;
}}
/>
<View style={styles.loginForm}>
{/* <Text style={{fontSize: 23, marginLeft: 70, marginTop: 20}}>Its Time To Login!</Text> */}
<View style={styles.inputs}>
<View style={styles.inputs}>
<TextInput
placeholder="Purpose"
// keyboardType="number-pad"
placeholderTextColor="#fff"
style={{
marginTop: 45,
borderColor: '#fff',
borderBottomWidth: 2,
color: 'white',
}}
onBlur={() => this.purpVal()}
onChangeText={(value) => this.setState({purp: value})}
value={this.state.purp}
ref={(inputP) => {
this.textInputPurp = inputP;
}}
/>
<Text style={{color: 'red'}}>{this.state.purpErr}</Text>
<TextInput
placeholder="DD - MM - YYYY"
// keyboardType="number-pad"
placeholderTextColor="#fff"
style={{
marginTop: 45,
borderColor: '#fff',
borderBottomWidth: 2,
color: 'white',
height: 150,
}}
onBlur={() => this.descErr()}
onChangeText={(value) => this.setState({date: value})}
value={this.state.desc}
ref={(inputD) => {
this.textInputDesc = inputD;
}}
/>
<Text style={{color: 'red'}}>{this.state.dateErr}</Text>
<TextInput
placeholder="Enter Citizen Name Here"
// keyboardType="number-pad"
placeholderTextColor="#fff"
style={{
marginTop: 45,
borderColor: '#fff',
borderBottomWidth: 2,
color: 'white',
height: 150,
}}
onBlur={() => this.descErr()}
onChangeText={(value) => this.setState({name: value})}
value={this.state.desc}
ref={(inputD) => {
this.textInputDesc = inputD;
}}
/>
<Text style={{color: 'red'}}>{this.state.nameErr}</Text>
<TextInput
placeholder="City"
// keyboardType="number-pad"
placeholderTextColor="#fff"
style={{
marginTop: 45,
borderColor: '#fff',
borderBottomWidth: 2,
color: 'white',
}}
onBlur={() => this.cityVal()}
onChangeText={(value) => this.setState({city: value})}
value={this.state.city}
ref={(inputC) => {
this.textInputCity = inputC;
}}
/>
<Text style={{color: 'red'}}>{this.state.cityErr}</Text>
<TextInput
placeholder="Description"
// keyboardType="number-pad"
placeholderTextColor="#fff"
style={{
marginTop: 45,
borderColor: '#fff',
borderBottomWidth: 2,
color: 'white',
height: 150,
}}
onBlur={() => this.descErr()}
onChangeText={(value) => this.setState({desc: value})}
value={this.state.desc}
ref={(inputD) => {
this.textInputDesc = inputD;
}}
/>
<Text style={{color: 'red'}}>{this.state.descErr}</Text>
</View>
</View>
<View style={styles.loginButton}>
<Button
color="#B5B9BD"
title="Send"
onPress={sendMail()}
/>
</View>
<Text></Text>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
conatiner: {
flex: 1,
backgroundColor: '#3F4243',
},
logo: {
marginLeft: 80,
marginTop: 20,
},
loginForm: {
marginTop: 35,
marginLeft: 25,
},
loginButton: {
marginRight: 20,
marginTop: 25,
},
info: {
marginLeft: 45,
marginTop: 10,
},
inputs: {
marginRight: 25,
},
options: {
flexDirection: 'row',
marginTop: 30,
// marginRight: 20
},
signUp: {
marginLeft: 75,
width: 130,
},
loginAsGuest: {
width: 130,
},
});
export default Appointment;
浏览器旨在防止您静默发送电子邮件
...因为这会给最终用户带来安全风险，不是吗？
相反，您应该向您的服务器发送通知，并让服务器发送电子邮件。
您无法从用户 phone 处发送电子邮件而不注意到他们。这将是一个恶意软件（“恶意软件”的缩写）。
您应该有一个后端服务器，并使用 API 从服务器发送电子邮件。只需在您的 APP 中调用 API。
我需要在按下按钮时在 React Native 中发送一封电子邮件，但播放器应该不会注意到它已发送。他应该只会收到一条提醒，说电子邮件已发送，但一切都应该在后台完成。
我想在最后按下按钮时触发它。
我尝试过链接、第 3 方库和许多其他东西。 我已经被这个问题困扰一年多了。
这是我目前使用的代码（请不要笑）：
import React, {useState} from 'react';
import {
Button,
View,
TextInput,
Alert,
Image,
Dimensions,
Text,
StyleSheet,
TouchableOpacity,
ScrollView,
BackHandler,
} from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';
import { sendEmail } from './sendEmail'
function sendMail() {
sendEmail(
'epicprogrammer2009@gmail.com',
'Greeting!',
'I think you are up how many letters you get.'
).then(() => {
console.log('Our email successful provided to device mail ');
});
}
class Appointment extends React.Component {
constructor(props) {
super(props);
this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
this.state = {
purp: '',
date: '',
place: '',
name: '',
adress: '',
city: '',
desc: '',
isDatePickerVisible: false,
purpErr: '',
dateErr: '',
placeErr: '',
nameErr: '',
adressErr: '',
cityErr: '',
descErr: '',
};
}
componentWillMount() {
BackHandler.addEventListener(
'hardwareBackPress',
this.handleBackButtonClick,
);
}
componentWillUnmount() {
BackHandler.removeEventListener(
'hardwareBackPress',
this.handleBackButtonClick,
);
}
handleBackButtonClick() {
this.props.navigation.goBack(
this.props.navigation.navigate('Menu'),
);
return true;
}
showDatePicker = () => {
// this.setState({isDatePickerVisible: true});
};
hideDatePicker = () => {
// setDatePickerVisibility(false);
};
handleConfirm = (date) => {
// console.warn('A date has been picked: ', date);
// hideDatePicker();
};
sendMessage = () => {
};
purpVal = () => {
if (this.state.purp == '') {
this.setState({purpErr: 'Purpose feild cannot be empty'});
} else {
this.setState({purpErr: ''});
}
};
dateVal = () => {
if (this.state.date == '') {
this.setState({dateErr: 'Date feild cannot be empty'});
} else {
this.setState({dateErr: ''});
}
};
placeVal = () => {
if (this.state.place == '') {
this.setState({placeErr: 'Place feild cannot be empty'});
} else {
this.setState({placeErr: ''});
}
};
nameVal = () => {
if (this.state.name == '') {
this.setState({nameErr: 'Name feild cannot be empty'});
} else {
this.setState({nameErr: ''});
}
};
adressVal = () => {
if (this.state.adress == '') {
this.setState({adressErr: 'Adress feild cannot be empty'});
} else {
this.setState({adressErr: ''});
}
};
cityVal = () => {
if (this.state.city == '') {
this.setState({cityErr: 'City feild cannot be empty'});
} else {
this.setState({cityErr: ''});
}
};
descErr = () => {
if (this.state.desc == '') {
this.setState({descErr: 'Description feild cannot be empty'});
} else {
this.setState({descErr: ''});
}
};
submitCheck = () => {
if (this.state.purp == '') {
this.setState({purpErr: 'Purpose feild cannot be empty'});
} else {
this.setState({purpErr: ''});
}
if (this.state.date == '') {
this.setState({dateErr: 'Date feild cannot be empty'});
} else {
this.setState({dateErr: ''});
}
if (this.state.name == '') {
this.setState({nameErr: 'Name feild cannot be empty'});
} else {
this.setState({nameErr: ''});
}
if (this.state.adress == '') {
this.setState({adressErr: 'Adress feild cannot be empty'});
} else {
this.setState({adressErr: ''});
}
if (this.state.city == '') {
this.setState({cityErr: 'City feild cannot be empty'});
} else {
this.setState({cityErr: ''});
}
if (this.state.desc == '') {
this.setState({descErr: 'Description feild cannot be empty'});
} else {
this.setState({descErr: ''});
}
// purp: '',
// date: '',
// place: '',
// name: '',
// adress: '',
// city: '',
// desc: '',
Alert.alert('Your Appointment has been fixed we will contact you');
this.textInputName.clear();
this.textInputDesc.clear();
this.textInputCity.clear();
this.textInputPurp2.clear();
this.textInputPurp.clear();
this.textInputDate.clear();
};
sendEmail = () => {
};
static navigationOptions = {
title: 'Appointments',
};
render() {
const {isDatePickerVisible} = this.state;
const {navigate} = this.props.navigation;
const {width} = Dimensions.get('window').width;
const {height} = Dimensions.get('window').height;
return (
<ScrollView style={styles.conatiner}>
<View style={styles.logo}>
<Image
style={{width: 180, height: 180, marginLeft: 20, borderRadius: 150}}
source={require('../../Components/Images/home.jpg')}
/>
</View>
<View>
<Text
style={{
fontSize: 35,
fontWeight: 'bold',
textAlign: 'center',
marginTop: 10,
color: '#fff',
}}>
Satej Patil
</Text>
<Text
style={{
fontSize: 20,
textAlign: 'center',
marginTop: 5,
color: '#fff',
}}>
Fix Appointment
</Text>
</View>
<TextInput
placeholder="Place"
// keyboardType="number-pad"
placeholderTextColor="#fff"
style={{
marginTop: 45,
borderColor: '#fff',
borderBottomWidth: 2,
color: 'white',
width: 340,
alignSelf: 'center',
}}
onChangeText={(value) => this.setState({purp: value})}
value={this.state.purp}
ref={(inputP2) => {
this.textInputPurp2 = inputP2;
}}
/>
<View style={styles.loginForm}>
{/* <Text style={{fontSize: 23, marginLeft: 70, marginTop: 20}}>Its Time To Login!</Text> */}
<View style={styles.inputs}>
<View style={styles.inputs}>
<TextInput
placeholder="Purpose"
// keyboardType="number-pad"
placeholderTextColor="#fff"
style={{
marginTop: 45,
borderColor: '#fff',
borderBottomWidth: 2,
color: 'white',
}}
onBlur={() => this.purpVal()}
onChangeText={(value) => this.setState({purp: value})}
value={this.state.purp}
ref={(inputP) => {
this.textInputPurp = inputP;
}}
/>
<Text style={{color: 'red'}}>{this.state.purpErr}</Text>
<TextInput
placeholder="DD - MM - YYYY"
// keyboardType="number-pad"
placeholderTextColor="#fff"
style={{
marginTop: 45,
borderColor: '#fff',
borderBottomWidth: 2,
color: 'white',
height: 150,
}}
onBlur={() => this.descErr()}
onChangeText={(value) => this.setState({date: value})}
value={this.state.desc}
ref={(inputD) => {
this.textInputDesc = inputD;
}}
/>
<Text style={{color: 'red'}}>{this.state.dateErr}</Text>
<TextInput
placeholder="Enter Citizen Name Here"
// keyboardType="number-pad"
placeholderTextColor="#fff"
style={{
marginTop: 45,
borderColor: '#fff',
borderBottomWidth: 2,
color: 'white',
height: 150,
}}
onBlur={() => this.descErr()}
onChangeText={(value) => this.setState({name: value})}
value={this.state.desc}
ref={(inputD) => {
this.textInputDesc = inputD;
}}
/>
<Text style={{color: 'red'}}>{this.state.nameErr}</Text>
<TextInput
placeholder="City"
// keyboardType="number-pad"
placeholderTextColor="#fff"
style={{
marginTop: 45,
borderColor: '#fff',
borderBottomWidth: 2,
color: 'white',
}}
onBlur={() => this.cityVal()}
onChangeText={(value) => this.setState({city: value})}
value={this.state.city}
ref={(inputC) => {
this.textInputCity = inputC;
}}
/>
<Text style={{color: 'red'}}>{this.state.cityErr}</Text>
<TextInput
placeholder="Description"
// keyboardType="number-pad"
placeholderTextColor="#fff"
style={{
marginTop: 45,
borderColor: '#fff',
borderBottomWidth: 2,
color: 'white',
height: 150,
}}
onBlur={() => this.descErr()}
onChangeText={(value) => this.setState({desc: value})}
value={this.state.desc}
ref={(inputD) => {
this.textInputDesc = inputD;
}}
/>
<Text style={{color: 'red'}}>{this.state.descErr}</Text>
</View>
</View>
<View style={styles.loginButton}>
<Button
color="#B5B9BD"
title="Send"
onPress={sendMail()}
/>
</View>
<Text></Text>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
conatiner: {
flex: 1,
backgroundColor: '#3F4243',
},
logo: {
marginLeft: 80,
marginTop: 20,
},
loginForm: {
marginTop: 35,
marginLeft: 25,
},
loginButton: {
marginRight: 20,
marginTop: 25,
},
info: {
marginLeft: 45,
marginTop: 10,
},
inputs: {
marginRight: 25,
},
options: {
flexDirection: 'row',
marginTop: 30,
// marginRight: 20
},
signUp: {
marginLeft: 75,
width: 130,
},
loginAsGuest: {
width: 130,
},
});
export default Appointment;
浏览器旨在防止您静默发送电子邮件
...因为这会给最终用户带来安全风险，不是吗？
相反，您应该向您的服务器发送通知，并让服务器发送电子邮件。
您无法从用户 phone 处发送电子邮件而不注意到他们。这将是一个恶意软件（“恶意软件”的缩写）。
您应该有一个后端服务器，并使用 API 从服务器发送电子邮件。只需在您的 APP 中调用 API。