0

我有以下代码。当我单击登录时，我想要进行某种验证，因此用户名和密码字段不为空。如果满足条件，我想导航到仪表板。下面是我的代码。我尝试在登录功能的末尾添加 this.props.navigation.navigate('Dashboard) 但不起作用。我不知道为什么，我不断收到错误 -设备：（62:31）未定义不是对象（评估'_this.props.navigation.navigate'）

import * as React from "react";
import {
  Text,
  View,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  StatusBar,
} from "react-native";

import Dashboard from "./Dashboard";

export default class LoginForm extends React.Component {
  constructor() {
    super();
    this.state = {
      username: "",
      password: "",
    };
  }
  handleUsername = (text) => {
    this.setState({ username: text });
  };

  handlePassword = (text) => {
    this.setState({ password: text });
  };

  login = () => {
    if (this.state.username === "" && this.state.password === "") {
      alert("Please enter username and password to sign in!");
    } else if (this.state.username === "") {
      alert("Please enter username to sign in!");
    } else if (this.state.password === "") {
      alert("Please enter password to sign in!");
    } else {
      this.props.navigation.navigate("Dashboard");
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <StatusBar barStyle="light-content" />
        <TextInput
          placeholder="username"
          placeholderTextColor="rgba(255,255,255,0.5)"
          returnKeyType="next"
          style={styles.input}
          onSubmitEditing={() => this.passwordInput.focus()}
          autoCapitalize="none"
          autoCorrect={false}
          onChangeText={this.handleUsername}
        />

        <TextInput
          placeholder="password"
          placeholderTextColor="rgba(255,255,255,0.5)"
          secureTextEntry
          returnKeyType="go"
          style={styles.input}
          maxLength={15}
          ref={(input) => (this.passwordInput = input)}
          onChangeText={this.handlePassword}
        />

        <TouchableOpacity style={styles.buttonContainer} onPress={this.login}>
          <Text style={styles.buttonText}>SIGN IN</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
    paddingVertical: 70,
  },

  input: {
    height: 50,
    backgroundColor: "rgba(255,255,255,0.2)",
    marginBottom: 15,
    color: "#FFF",
    paddingHorizontal: 10,
  },

  buttonContainer: {
    backgroundColor: "#27ae60",
    paddingVertical: 20,
  },

  buttonText: {
    textAlign: "center",
    color: "#FFFFFF",
    fontWeight: "700",
  },
});

下面是我的导航代码

 import React, { Component } from 'react';
 import { createStackNavigator } from 'react-navigation-stack';
 import { createAppContainer } from 'react-navigation';


 import SignIn from './components/SignIn';
 import ForgotPassword from './components/ForgotPassword';
 import Dashboard from './components/Dashboard'

   const screens = {
   SignIn: {
     screen: SignIn  
    },

   ForgotPassword: {
  screen: ForgotPassword
   },

  Dashboard: {
   screen: Dashboard
   } 
  };

  const config = {
  headerShown: false,
  initialRouteName: 'SignIn'
   }

  export default class App extends Component<Props> {
  render() {
   return (
   <AppContainer/>
  );
 }
 }

  const HomeStack = createStackNavigator(screens,config);
 const AppContainer = createAppContainer(HomeStack)
4

2 回答 2

1

您的构造函数应如下所示：

constructor(props) {
    super(props);
    this.state = {
        username: "",
        password: "",
    };
}

构造props函数中缺少参数。

于 2020-05-16T18:06:49.340 回答
0

似乎您要么错误地设置了反应导航，要么根本没有设置。您发布的代码是正确的方法，前提是您已成功按照设置说明进行操作。

于 2020-05-16T15:55:34.717 回答