无法读取属性导航未定义

Question

我想在登录后重定向到另一个页面。

App.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';

import Login from './app/components/Login';
import Home from './app/components/Home';

global.MyVar = 'https://aboutreact.com';

const NavStack = createStackNavigator({
  Login:{
    screen:Login,
    navigationOptions: {
      header: null,
    }
  },
  Home:{
    screen:Home,
    navigationOptions: {
      header: null,
    }
  }
});

const Application = createAppContainer(NavStack);

export default class App extends React.Component {
  render() {
    return (
      <Application/>
    );
  }
}

登录.js

import React, {Component} from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
import {Platform, StyleSheet, Text, View, Image} from 'react-native';
import { Button, ThemeProvider, Input } from 'react-native-elements';
import axios from 'axios';

export default class Login extends React.Component {

  constructor(props){
      super(props);
      this.buttonPress = this.buttonPress.bind(this);
      this.state = {
          user: '',
          password:'',    
      };
  }


  buttonPress() {
    axios.get('https://reqres.in/api/products/3')
      .then(function (response) {
        // return console.log(response.data.data.id);
        // return console.log(global.MyVar);

        this.props.navigation.navigate('Home');
      })
      .catch(function (error) {
        return console.log(error);
      });
  }

  // loginSubmit = ()=>{
  //   axios.get('https://reqres.in/api/products/3')
  //     .then(function (response) {
  //       // return console.log(response.data.data.id);
  //       // return console.log(global.MyVar);

  //       const { navigate } = this.props.navigation;
  //       navigate('Home', { user: 'John' })
  //     })
  //     .catch(function (error) {
  //       return console.log(error);
  //     });
  // }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.loginform}>
          <Image style={styles.logo} source={require('../images/emllogo.png')} />
          <View style={styles.formarea}>
            <Input
             onChangeText={(user)=>this.setState({user})}
              style={styles.inputtext}
              placeholder='User Name f'
              leftIcon={
                <Icon
                  name='user'
                  size={20}
                />
              }
            />
          </View>
          <View style={styles.formarea}>
            <Input
                secureTextEntry={true}
                onChangeText={(password)=>this.setState({password})}
                style={styles.inputtext}
                placeholder='Password'
                leftIcon={
                  <Icon
                    name='lock'
                    size={20}
                  />
                }
              />
          </View>

          <View style={styles.formarea}>
          <Button
            buttonStyle={{
              backgroundColor:'red'
            }}
            title="Login"
            onPress={this.buttonPress}
          />
          </View>
        </View>                   
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor:'#f00',
    justifyContent:'center',
    alignItems: 'center'
  },
  loginform:{
    width:'80%',
    minHeight:'50%',
    borderWidth:0.5,
    backgroundColor:'#fff',
    color:'#000',
    borderRadius:10,
    alignItems: 'center'
  },
  logo:{
    marginTop:'8%'
  },
  bordertopgray:{
    borderTopColor:'#ccc',
    borderTopWidth:0.5,
    width:'100%'
  },
  formarea:{
    width:'80%',
    height:'8%',
    marginTop:20
  }
});

错误：

TypeError：无法读取未定义的属性“导航” 在 I:\XAMPP\htdocs\react\EMLV5\app\components\Login.js:17 在 tryCallOne (I:\XAMPP\htdocs\react\EMLV5\node_modules\promise\setimmediate\core.js:37) 在 I:\XAMPP\htdocs\react\EMLV5\node_modules\promise\setimmediate\core.js:123 在 I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:298 在 _callTimer (I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:152) 在 _callImmediatesPass (I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:200) 在 Object.callImmediates (I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:473) 在 MessageQueue.__callImmediates (I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:337) 在 I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135 在 MessageQueue.__guard (I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:314)

Answer 1

试试这个

   loginSubmit = ()=>{
     const { navigate } = this.props.navigation;

     axios.get('https://reqres.in/api/products/3')
       .then(function (response) {
          return console.log(response.data.data.id);
          return console.log(global.MyVar);

         navigate('Home', { user: 'John' })
       })
       .catch(function (error) {
         return console.log(error);
       });
   }

查看how to correct access this inside a callback

Answer 2

您的问题是您使用的是function () {} 而不是数组函数() => {}，并且您得到的是函数的this 而不是类的this。

export default class Login extends React.Component {

      constructor(props){
          super(props);
          this.buttonPress = this.buttonPress.bind(this);
          this.state = {
              user: '',
              password:'',    
          };
      }


      buttonPress() {
        axios.get('https://reqres.in/api/products/3')
          .then(response => { // arrow function
            // return console.log(response.data.data.id);
            // return console.log(global.MyVar);

            this.props.navigation.navigate('Home');
          })
          .catch(function (error) {
            return console.log(error);
          });
      }

      // loginSubmit = ()=>{
      //   axios.get('https://reqres.in/api/products/3')
      //     .then(response => { // arrow function
      //       // return console.log(response.data.data.id);
      //       // return console.log(global.MyVar);

      //       const { navigate } = this.props.navigation;
      //       navigate('Home', { user: 'John' })
      //     })
      //     .catch(function (error) {
      //       return console.log(error);
      //     });
      // }