У меня есть экран с кнопками Signin
и Signup
. Когда пользователь нажимает SigninButton
, я отправляю его на экран входа в систему. На экране входа в систему есть два текстовых ввода, которые получают адрес электронной почты и пароль от пользователя. В случае успеха пользователь отправляется на главный экран. Если нет, то бросаю error
текст. Но если пользователь вернется с панели навигации и вернется к экрану входа в систему, ввод электронной почты и сообщение об ошибке все еще будут отображаться там. Я использую redux
, я не могу очистить реквизиты, содержащие электронную почту и текст ошибки. Я пробовал componentWillUnmount
, componentWillMount
и т. Д., Но все еще не могу найти подходящее место, чтобы очистить эти реквизиты. Это код на моем экране входа в систему;
class LoginScreen extends Component {
componentWillReceiveProps(nextProps) {
this.onAuthComplete(nextProps);
}
onAuthComplete(props) {
if (props.user) {
this.props.navigation.navigate('main');
}
}
render() {
return(
<View style={styles.container}>
<SigninForm />
</View>
);
}
}
const styles = StyleSheet.create({
........
}
});
const mapStateToProps = ({ auth }) => {
const { user, email, error } = auth;
return { user, email, error };
}
export default connect(mapStateToProps, { emailChanged, loginUser })(LoginScreen);
а также это код в редукторе;
import ......
const INITIAL_STATE = {
email: '',
password: '',
user: null,
error: '',
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case EMAIL_CHANGED:
return {...state, email: action.payload };
case PASSWORD_CHANGED:
return {...state, password: action.payload };
case LOGIN_USER:
return {...state, error: ''};
case LOGIN_USER_SUCCESS:
return {...state, ...INITIAL_STATE, user: action.payload};
case LOGIN_USER_FAIL:
return {...state, error: 'Authentication Failed', password: ''};
default:
return state;
}
};
А вот код SigninForm;
import React, { Component } from 'react';
import { View, Dimensions, Text } from 'react-native';
import { connect } from 'react-redux';
import { FormInput, FormLabel } from 'react-native-elements';
import { AuthButton } from './';
import { emailChanged, passwordChanged, loginUser } from '../actions';
const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;
class SigninForm extends Component {
onEmailChange(text) {
this.props.emailChanged(text);
}
onPasswordChange(text) {
this.props.passwordChanged(text);
}
onButtonPress() {
const { email, password } = this.props;
this.props.loginUser({ email, password });
}
render() {
return(
<View style={styles.viewStyle}>
<FormLabel labelStyle={styles.labelStyle}>Email</FormLabel>
<FormInput
placeholder='Enter your email'
keyboardType="email-address"
containerStyle={styles.containerStyle}
inputStyle={styles.inputStyle}
onChangeText={this.onEmailChange.bind(this)}
value={this.props.email}
/>
<FormLabel labelStyle={styles.labelStyle}>Password</FormLabel>
<FormInput
placeholder='Enter a password'
secureTextEntry={true}
containerStyle={styles.containerStyle}
inputStyle={styles.inputStyle}
onChangeText={this.onPasswordChange.bind(this)}
value={this.props.password}
/>
<Text style={styles.errorTextStyle}>
{this.props.error}
</Text>
<AuthButton
title='Sign In'
backgroundColor='#eb4454'
onPress={this.onButtonPress.bind(this)}
/>
</View>
);
}
}
const styles = {
viewStyle: {
top: SCREEN_HEIGHT * -0.15
},
containerStyle: {
marginBottom: 10,
width: SCREEN_WIDTH * 0.80,
borderBottomColor: '#3c143c'
},
labelStyle: {
color: '#3c143c',
fontFamily: 'System',
fontSize: 20
},
inputStyle: {
color: '#3c143c',
fontFamily: 'System',
fontSize: 20
},
errorTextStyle: {
fontSize: 20,
alignSelf: 'center',
color: 'red'
}
}
const mapStateToProps = ({ auth }) => {
const { email, password, error } = auth;
return { email, password, error };
}
export default connect(mapStateToProps, { emailChanged, passwordChanged, loginUser })(SigninForm);