React Native嵌套StackNavigator跳转异常：Send与Receive无法切换求助

Hey there! Let's figure out why your inner StackNavigator inside MainPage is giving you trouble—especially since Send loads fine, your buttons trigger alerts (so the onPress is working), and you can still jump back to Login without issues. Here are the most likely fixes to test out:

1. Make sure the Receive screen is registered in your inner StackNavigator #

This is the most common culprit. Double-check that you’ve added Receive to the screens object of your MainPage’s StackNavigator. For example, your inner navigator should look like this:

// Inside MainPage's file or your navigation config
const MainInnerStack = createStackNavigator({
  Send: { screen: SendScreen },
  Receive: { screen: ReceiveScreen }, // Don't forget this line!
}, {
  initialRouteName: 'Send', // Which explains why Send loads by default
});

If Receive is missing from this list, the navigation system has no idea where to route when you call navigate('Receive')—even though your button is firing correctly.

2. Confirm you’re rendering the inner navigator (not just SendScreen) in MainPage #

If you’re manually rendering SendScreen directly in MainPage instead of the full inner StackNavigator, that would let you see Send but block navigation to Receive. Your MainPage should render the inner navigator as its main content, like this:

class MainPage extends React.Component {
  render() {
    // Correct: Render the full inner stack navigator
    return <MainInnerStack />;

    // Wrong: This would only show Send and break navigation to Receive
    // return <SendScreen />;
  }
}

The inner navigator is what provides the navigation context needed to switch between Send and Receive.

3. Check your navigation call syntax (nested navigator quirk) #

If your button that tries to go to Receive is inside MainPage itself (not inside SendScreen), you need to use nested navigation syntax to target the inner stack’s screen. Instead of:

this.props.navigation.navigate('Receive'); // Won't work from MainPage

Use this to tell the outer navigator to route into the inner stack first:

this.props.navigation.navigate('MainInnerStack', { screen: 'Receive' });

If your button is inside SendScreen (the inner stack’s screen), then this.props.navigation.navigate('Receive') is correct—so this only applies if the button lives in MainPage.

4. Debug ReceiveScreen for rendering errors #

Even if navigation is set up right, if ReceiveScreen has a runtime error (like a missing prop, undefined state, or syntax mistake), it might fail to render silently. Test with a stripped-down version of ReceiveScreen first:

// Temporary test version of ReceiveScreen
const ReceiveScreen = () => {
  return <View><Text>Receive Screen Loaded!</Text></View>;
};

If this works, the problem is in your original ReceiveScreen code, not the navigation setup.

5. Rule out naming collisions #

Quick check: Make sure you don’t have another screen named Receive in your outer StackNavigator (the one with Login and MainPage). Duplicate route names can cause the navigation system to route to the wrong place, though since you can jump to Login fine, this is less likely—but worth eliminating.

My money’s on either missing Receive in the inner stack registration or a syntax issue in the navigation call if the button’s in MainPage. Let me know if any of these get you up and running!

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