React Native导航异常：无法从第二页跳转至第三页求助

Hey there! Let’s figure out why your navigation from the second to third screen isn’t working. Based on what you’ve shared (and common gotchas with the older StackNavigator from react-navigation), here are the most likely fixes to try:

1. Make Sure Your StackNavigator Includes the Third Screen #

First off, double-check that your StackNavigator configuration actually registers the third screen. It’s super easy to forget this step, and without it, the navigation system won’t know where to send the user.

Here’s what a correct setup should look like:

import { StackNavigator } from 'react-navigation';
import FirstScreen from './FirstScreen';
import SecondScreen from './SecondScreen';
import ThirdScreen from './ThirdScreen'; // Don't forget to import!

const AppNavigator = StackNavigator({
  First: { screen: FirstScreen },
  Second: { screen: SecondScreen },
  Third: { screen: ThirdScreen } // This line is critical!
});

2. Verify the Navigation Call in Your Second Screen #

In your second screen component, you need to use this.props.navigation.navigate() correctly. Common mistakes here include missing this.props or misspelling the screen name (it has to match exactly what’s in your StackNavigator config).

Wrong Example (Common Mistakes): #

// Missing "this.props"
<Button title="Go to Third" onPress={() => navigation.navigate('Third')} />

// Misspelled screen name (e.g., "third" instead of "Third")
<Button title="Go to Third" onPress={() => this.props.navigation.navigate('third')} />

Correct Example: #

<Button 
  title="Navigate to Third Screen" 
  onPress={() => this.props.navigation.navigate('Third')} 
/>

If your button is inside a child component of the second screen, you’ll need to pass the navigation prop down explicitly, or wrap the child component with the withNavigation higher-order component from react-navigation.

3. Check That the Third Screen Component is Valid #

Ensure your third screen is a properly defined React Native component. Syntax errors or incomplete component definitions can cause the navigation to fail silently.

Here’s a basic valid third screen:

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

class ThirdScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Third Screen Loaded!</Text>
      </View>
    );
  }
}

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

export default ThirdScreen;

4. Rule Out Prop Overwriting #

Make sure you haven’t accidentally overwritten the navigation prop in your second screen component. For example, if you’re defining a custom navigation prop in your component’s props or state, it will conflict with the one provided by StackNavigator.

5. Check for Version Bugs #

The StackNavigator from the original react-navigation package (not the newer @react-navigation suite) has some known edge cases. If none of the above fixes work, try updating to the latest stable version of react-navigation, or check your dependency tree for conflicts with other packages.

If you’re still stuck, share these details and we can dive deeper:

• Full code of your StackNavigator configuration
• Complete code of the second screen’s navigation trigger
• Full code of the third screen component
• Any error messages from the Metro bundler console

内容的提问来源于stack exchange，提问作者Ramazan Gül