StackNavigator视图重复堆叠问题求助：Tab点击page1时视图叠加

Hey there! The issue you're facing—where tapping the page1 bottom tab causes repeated stacking of the view—is almost certainly related to how your navigation structure is set up or how your custom TabBar handles navigation actions. Let's walk through the root cause and solutions:

Root Cause #

Your current setup has a few layers of nested navigators, and the most likely culprit is either:

• Unnecessary nested StackNavigator: The App StackNavigator wrapping your Tab navigator is redundant and might be causing unintended stack pushes when switching tabs.
• Custom TabBar navigation logic: If your custom TabBar uses navigation.push() instead of navigation.navigate() (or doesn't reset the stack when re-tapping the same tab), it will keep adding new instances of the page1 stack to the navigation history.

Solution 1: Simplify Your Navigation Structure #

First, let's remove the redundant App StackNavigator—you don't need a stack that only contains your tab navigator. This cleans up the navigation flow and eliminates one potential source of stacking:

// Main
export const Router = StackNavigator(
    {
        Welcome : { screen : Welcome},
        Tab: { screen: Tab } // Directly use Tab as the screen instead of App
    },
    {
        initialRouteName : 'Welcome'
    }
);

// Remove the original App StackNavigator entirely

const Tab = TabNavigator( 
    {
        page1 : {screen : page1},
        page2 : {screen : page2},
        page3 : {screen : page3}
    },
    {
        gesturesEnabled: false,
        tabBarPosition: 'bottom',
        animationEnabled: false,
        swipeEnabled: false,
        tabBarComponent: ({navigation}) =>
        <TabBar navigation={navigation}
            iconsMap={{ Explore: 'visibility', Home: 'home', Profile : 'settings' }}/>
    }
);

const page1 = StackNavigator(
    {
       subview1 : {screen :  subview1},
       subview2 : {screen :  subview2}
    }
);

Solution 2: Fix Custom TabBar Navigation Logic #

If you need to keep your custom TabBar, make sure it handles tab taps correctly—re-tapping the same tab should reset to the stack's root, not add a new page. Here's how to adjust the click handler in your TabBar component:

First, import the necessary actions at the top of your TabBar file:

import { StackActions, NavigationActions } from 'react-navigation';

Then, update the tab press handler:

const handleTabPress = (routeName) => {
  const { navigation } = props;
  
  // Check if we're already on the target tab
  const currentTabIndex = navigation.state.routes.findIndex(route => route.routeName === routeName);
  const isCurrentTab = navigation.state.index === currentTabIndex;

  if (isCurrentTab) {
    // Reset to the root of this tab's stack
    navigation.dispatch(
      StackActions.reset({
        index: 0,
        actions: [NavigationActions.navigate({ routeName })],
      })
    );
  } else {
    // Switch to the target tab normally
    navigation.navigate(routeName);
  }
};

This way, tapping an active tab will take you back to its root view instead of stacking a new instance, while tapping other tabs will switch normally.

Solution 3: Ensure Tab Navigator Persists State #

Add these properties to your TabNavigator config to make sure each tab's stack state is preserved and not reinitialized on tap:

const Tab = TabNavigator( 
    {
        page1 : {screen : page1},
        page2 : {screen : page2},
        page3 : {screen : page3}
    },
    {
        gesturesEnabled: false,
        tabBarPosition: 'bottom',
        animationEnabled: false,
        swipeEnabled: false,
        lazy: true, // Initialize tabs only when first tapped (default, but explicit is safer)
        persist: true, // Preserve each tab's navigation state
        tabBarComponent: ({navigation}) =>
        <TabBar navigation={navigation}
            iconsMap={{ Explore: 'visibility', Home: 'home', Profile : 'settings' }}/>
    }
);

Final Notes #

Start with Solution 1—it's the cleanest fix for most cases. If you still see stacking issues, move to Solution 2 to adjust your custom TabBar logic. These changes will ensure that tapping the page1 tab only switches to its view (or resets to root if already active), while tapping elements inside page1 will stack subviews as expected.

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