登录后无法导航主屏幕

Question

请查找附件日志我正在尝试登录后转到主屏幕。每当我输入错误的userid警报时，都会出现错误的凭据消息，但是当我输入正确时，我会收到错误"[类型错误：未定义不是对象(评估'_this.props.navigation'(">

// This is main Login page 
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,StatusBar} from 'react-native';
import Logo from '../component/Logo';
import Form from '../component/Form';
export default class Login extends Component {
    render() {
        return(
            <View style ={styles.container}>
            <Logo/>
            <Form  navigation = {this.props.navigation} 
/>
            <View style={styles}>
            </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
      backgroundColor: '#ffffff',
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
  });

下面的代码是表单.js用于我输入用户名并传递的 ui

import React, {Component} from 'react';
import {TextInput,Platform,Alert,AsyncStorage, StyleSheet, Text, View,StatusBar,Image,TouchableOpacity} from 'react-native';
import {Login} from '../api/Loginapi'
  export default class Form extends React.Component
  {
    constructor(){
      super()
      this.state={
        username:"",
        password:"",
        postString: "",
      }
    }

    render() {
        return(
            <View style={styles.container}>
    <TextInput   style={styles.inputBox}
     underlineColorAndroid='rgba(0,0,0,0)'
      placeholder="username"
      placeholderTextColor="#000000"
      onChangeText={(username) => this.setState({username})}/>
   <TextInput   style={styles.inputBox}
     underlineColorAndroid='rgba(0,0,0,0)'
      placeholder="password"
      secureTextEntry={true}
      placeholderTextColor="#000000"
      onChangeText={(password) => this.setState({password})}/>
      {/* <TouchableOpacity style={styles.button}onPress={() => this.onClickListener('login')}>
          <Text style={styles.buttonText}>Login</Text>
      </TouchableOpacity> */}
<TouchableOpacity style={styles.button}onPress={() => Login(this.state.username,this.state.password,this)}>
          <Text style={styles.buttonText}>Login</Text>
      </TouchableOpacity>


</View>
        )
    }
}
const styles =StyleSheet.create({
container :{
    flex :1,
    justifyContent :'center',
    alignItems:'center'
},
inputBox:{
    width:300,
    borderColor: '#48BBEC',
    backgroundColor: '#F8F8FF',
    borderRadius:25,
    paddingHorizontal:16,
    fontSize:16,
    color:'#000000',
    marginVertical:10,

},
button:{
    width:300,
    backgroundColor:'#4169E1',
    borderRadius:25,
    marginVertical:10,
    paddingVertical:16
},
buttonText:{
fontSize:16,
fontWeight:'500',
color:'#ffffff',
textAlign:'center'
}
})

下面是我的脚本

export const  Login = (username,password,self) => {
  var postString = ':xxxxxxxx:21:UN#'+username+':PW#'+password+':';
            var l = postString.length + 2;
            var newPostString = l + postString;
            var newL = newPostString.length;
            if (newL !== l) {
              l++;
            }
            postString = l + postString;
            fetch('http://178.128.19.107:8080/iot-server/JnarkUserAPI', {
              method: 'POST',
              body: postString
            })
            .then( (response) => {
              console.log("Posted:" + postString);
             return response.json();
            })

            .then ( (res => {
              try {
              if (res.success == "true") {
                AsyncStorage.setItem('username', res.userName);
                AsyncStorage.setItem('uEmail', res.email);
                AsyncStorage.setItem('uPh', res.phNum);
                AsyncStorage.setItem('uPlevel', res.privLevel);
                AsyncStorage.setItem('uPwd', res.password);
// here am getting "[TypeError: undefined is not an object (evaluating '_this.props.navigation')"
                self.props.navigation.navigate('HomeScreen');
               // this.props.navigation.replace('HomeScreen');
               // this.props.navigation.navigate('HomeScreen');
              }
              else {
                Alert.alert("Alert Incorrect Credentials");
              }
            } catch (error) {
              console.log("hello",error);
              // Error saving data
            }
            } )  )
          }

请帮忙..谢谢

Answer 1

例如，您的App.js中有这样的东西吗？

import Navigator from "./Navigator";
const AppNavigator = StackNavigator({ Navigator: { screen: Navigator }});
export default (props) =>
  <Root>
    <AppNavigator />
  </Root>
;

并且，在您的Navigator.js内：

const Navigator = StackNavigator({
  Login: { screen: Login, navigationOptions: navigationOptions },
  ...
});

Answer 2

这是因为您的登录API中没有任何this.props;

<TouchableOpacity style={styles.button}onPress={() => 
Login(this.state.username,this.state.password, this)}> //pass this here
          <Text style={styles.buttonText}>Login</Text>
      </TouchableOpacity>

和内部Login：

export const  Login = (username,password,self) => {

然后，您可以使用以下内容进行导航：

self.props.navigation.navigate('HomeScreen');

更新：

import { withRouter } from 'react-router'
class FormImpl extends React.Component {
    constructor() {
        super()
        this.state = {
            username: "",
            password: "",
            postString: "",
        }
    }
    render() {
        return (
            <View style= { styles.container } >
            <TextInput   style={ styles.inputBox }
        underlineColorAndroid = 'rgba(0,0,0,0)'
        placeholder = "username"
        placeholderTextColor = "#000000"
        onChangeText = {(username) => this.setState({ username })
    }/>
        < TextInput   style = { styles.inputBox }
underlineColorAndroid = 'rgba(0,0,0,0)'
placeholder = "password"
secureTextEntry = { true}
placeholderTextColor = "#000000"
onChangeText = {(password) => this.setState({ password })}/>
{/* <TouchableOpacity style={styles.button}onPress={() => this.onClickListener('login')}>
        <Text style={styles.buttonText}>Login</Text>
    </TouchableOpacity> */}
<TouchableOpacity style={ styles.button } onPress = {() => Login(this.state.username, this.state.password, this)}>
    <Text style={ styles.buttonText }> Login < /Text>
        < /TouchableOpacity>
        < /View>
      )
  }
}
const Form = withRouter(FormImpl);
export default Form

登录内部 Api：

self.props.history.push('/home'(;