我需要按一下按鈕在 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(
'[email protected]',
'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;
uj5u.com熱心網友回復：
瀏覽器旨在防止您以靜默方式發送電子郵件
......因為這會給最終用戶帶來安全風險，不是嗎？
相反，您應該向您的服務器發送通知，并讓服務器發送電子郵件。
uj5u.com熱心網友回復：
您不能在沒有注意到用戶的情況下從用戶的手機發送電子郵件。這將是惡意軟體（“惡意軟體”的縮寫）。
您應該有一個后端服務器并使用 API 從服務器發送電子郵件。只需在您的 APP 中呼叫 API。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/354833.html
標籤：javascript 反应原生 电子邮件 背景 jsx