React Navigation报错：undefined is not object，登录跳转Tab页失败

Hey there, let's work through this issue step by step—your undefined error is coming from a few key issues in component binding and navigation structure. Here's how to fix it:

1. Fix the this Binding in LoginScreen #

The first problem is that your _onPressLogin method doesn't have access to the component's this context, so this.props.navigation is undefined. You can fix this in one of two simple ways:

Option A: Use an Arrow Function for the Method #

Rewrite your login handler as an arrow function to auto-bind this:

class LoginScreen extends React.Component {
  // Use arrow function to bind this automatically
  _onPressLogin = () => {
    console.log('login btn pressed');
    // We'll update this route name in the next step
    this.props.navigation.navigate('MainTabs');
  }

  // Rest of your component code stays the same
}

Option B: Bind this in the Constructor #

If you prefer traditional function syntax, add a constructor to bind the method:

class LoginScreen extends React.Component {
  constructor(props) {
    super(props);
    // Bind the method to the component instance
    this._onPressLogin = this._onPressLogin.bind(this);
  }

  _onPressLogin() {
    console.log('login btn pressed');
    this.props.navigation.navigate('MainTabs');
  }

  // Rest of your component code stays the same
}

2. Restructure Your Navigation Stack #

Right now, your app is starting directly with the Tab Navigator, and the LoginScreen isn't part of the navigation hierarchy. We need to wrap the LoginScreen and Tab Navigator in a Stack Navigator so navigation works between them.

Update your App.js like this:

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, Image } from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';
import CameraScreen from './screens/CameraScreen';
import ThirdScreen from './screens/ThirdScreen';
import LoginScreen from './screens/LoginScreen';
import FrontPage from './screens/FrontPage';

// First define your Tab Navigator
const MainTabs = TabNavigator({
  Tab1: {screen: FrontPage},
  Tab2: {screen: CameraScreen},
  Tab3: {screen: ThirdScreen}
}, {
  tabBarPosition: 'bottom',
  swipeEnabled: false,
  tabBarOptions: {
    showIcon: true,
    activeTintColor: 'white',
    activeBackgroundColor: 'white',
    inactiveTintColor: '#7f8c8d',
    inactiveBackgroundColor: '#2c3e50',
    style: {
      backgroundColor: '#2c3e50'
    },
    labelStyle: {
      fontSize: 9.5, // Fixed your typo here (was "frontSize")
    }
  }
});

// Now wrap Login and Tab Navigator in a Stack Navigator
const AppNavigator = StackNavigator({
  Login: { screen: LoginScreen },
  MainTabs: { screen: MainTabs }
}, {
  initialRouteName: 'Login', // Start on the login screen by default
  headerMode: 'none' // Optional: Remove top header if you don't need it
});

export default AppNavigator;

3. Clean Up FrontPage.js #

Your FrontPage was incorrectly rendering the LoginScreen (which doesn't belong there) and had an undefined navigation variable. Fix it by removing that unnecessary line:

import React from 'react';
import { Text, View, Button, TouchableHighlight, Image, StyleSheet, AppRegistry } from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';

export default class FrontPage extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'First',
    // Remove routeName here—it's defined in the navigation config, not the component
  };

  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text> This is the first page </Text>
        <Image source={require('../images/testImage.png')} style={{width:60, height:60}} />
        {/* Delete the LoginScreen render line here */}
      </View>
    );
  }
}

After making these changes, clicking the Login button will properly navigate from LoginScreen to your Tab Navigator without throwing an undefined error. No password validation needed—this just fixes the navigation flow!

内容的提问来源于stack exchange，提问作者Rind