在React中将道具从Stack Navigator传递到Drawer Navigator - Native

时间:2018-02-14 12:14:02

标签: react-native react-navigation

我想根据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;

我该如何处理这个问题。

0 个答案:

没有答案