我想根据API的响应导航到Drawer Navigation中的 Stack Navigator 中给出的屏幕。另外,我需要帮助将抽屉中的道具传递给Stack Navigator,反之亦然。
以下是我的代码
** App.js **
import {
DrawerNavigator,
StackNavigator
} from "react-navigation";
import LoginPage from "./Components/LoginPage";
import RegisterPage from "./Components/RegisterPage";
import Dashboard from "./Components/Dashboard";
const DrawerNavigation = DrawerNavigator({
Login: {
screen: LoginPage
},
Register: {
screen: RegisterPage
}
});
const StackNavigation = StackNavigator({
Drawer: {
screen: DrawerNavigation
},
Dashboard: {
screen: Dashboard
}
}, {
headerMode: "none"
});
但是当我打印道具时,我得到空白对象
//import liraries
import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
TextInput,
TouchableOpacity,
KeyboardAvoidingView
} from "react-native";
var validator = require("validator");
import { Constants } from "../_helpers/Constants";
import { loginFormStyles as styles } from "../_helpers/styles";
import UserServices from "../Services/userService";
// create a component
class LoginForm extends Component {
constructor(props) {
super(props);
this.state = {
isEmailValid: false,
isPasswordValid: false,
emailErrorMessage: "",
passwordErrorMessage: "",
email: "",
password: "",
username: "",
userID: "",
loginMessages: ""
};
}
validateEmail = email => {
if (validator.isEmail(email) && email !== "") {
this.setState(
{
isEmailValid: true,
emailErrorMessage: "",
email: email
},
function() {}
);
} else {
this.setState(
{
isEmailValid: false,
emailErrorMessage: Constants.ERRORS.USER_NAME
},
function() {}
);
}
};
validatePassword = password => {
var passwordRegex = new RegExp(
"^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})"
);
if (
passwordRegex.test(password) &&
password !== "" &&
password.length >= 8
) {
this.setState(
{ isPasswordValid: true, errorMessagePassword: "", password: password },
function() {}
);
} else {
this.setState(
{
isPasswordValid: false,
passwordErrorMessage: Constants.ERRORS.PASSWORD
},
function() {}
);
}
};
onLogin = () => {
let userServicesLogin = new UserServices();
let email = this.state.email;
let password = this.state.password;
let body = { email: email, password: password };
let header = {
"Content-Type": Constants.HEADERS.APPLICATION_JSON
};
userServicesLogin
.userLogin(body, header)
.then(responseJson => {
if (responseJson.status === "SUCCESS") {
this.setState({
username: responseJson.user.username,
userID: responseJson.user._id,
loginMessages: responseJson.message
});
} else if (responseJson.status === "ERROR") {
this.setState({
username: "",
userID: "",
loginMessages: responseJson.message
});
}
console.log(this.props)
})
.catch(error => {
console.log("error",error);
});
};
render() {
let validEmail = this.state.isEmailValid;
let validPassword = this.state.isPasswordValid;
let loginErrorMessage = this.state.loginMessages;
let errorMessageEmail = this.state.emailErrorMessage;
let errorMessagePassword = this.state.passwordErrorMessage;
return (
<KeyboardAvoidingView behavior="padding" style={styles.container}>
<Text style={styles.loginStatusMessage}>
{loginErrorMessage === "" ? "" : loginErrorMessage}
</Text>
<TextInput
style={styles.input}
placeholder="Enter your Username"
placeholderTextColor="#2C3A47"
returnKeyType="next"
onSubmitEditing={() => this.passwordInput.focus()}
autoCorrect={false}
keyboardType="email-address"
autoCapitalize="none"
onChangeText={email => this.validateEmail(email)}
/>
<Text style={styles.errorMessageEmail}>
{validEmail ? "" : errorMessageEmail}
</Text>
<TextInput
style={styles.input}
placeholder="Enter your Password"
secureTextEntry
placeholderTextColor="#2C3A47"
returnKeyType="go"
ref={input => (this.passwordInput = input)}
autoCapitalize="none"
onChangeText={password => this.validatePassword(password)}
onSubmitEditing={this.onLogin}
/>
<Text style={styles.errorMessagePassword}>
{validPassword ? "" : errorMessagePassword}
</Text>
<TouchableOpacity
activeOpacity={0.7}
style={
validEmail && validPassword
? styles.buttonContainerEnabled
: styles.buttonContainerDisabled
}
disabled={!(validEmail && validPassword) ? true : false}
onPress={this.onLogin}
>
<Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>
</KeyboardAvoidingView>
);
}
}
//make this component available to the app
export default LoginForm;
我该如何处理这个问题。