底部选项卡是否需要自己单独的堆栈

Question

当从我的第二个底部选项卡 (tab2) 导航到屏幕时，应用程序切换到 tab1，然后导航到屏幕。当你点击文字换屏时，你可以看到tab1屏幕在滑动到页面之前闪了一下。

我怎样才能留在我正在导航的选项卡上？我想导航到屏幕 3，同时将选项卡保留在选项卡 2 上。

为什么在导航时切换标签页？

要重现错误...点击 Tab2 -> 点击文本 -> 可以看到底部的标签开关和 tab1 屏幕在进入屏幕 3 之前闪烁。

下面是 snack code 完全重现我的项目以及我的 app.js。

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (

    <Stack.Navigator
     initialRouteName="Home">        
      <Stack.Screen name="Home" component= {Home} options={{headerShown: false}}/>
      <Stack.Screen name="Screen1" component= {Screen1} options={{headerShown: false}}/> 
      <Stack.Screen name="Screen2" component= {Screen2} options={{headerShown: false}}/>
      <Stack.Screen name="Screen3" component= {Screen3} options={{headerShown: false}}/>
    </Stack.Navigator>
);
}


export default function App() {

  return (
   <NavigationContainer>
    <Tab.Navigator
    initialRouteName="Tab1"
    screenOptions={{
      tabBarActiveTintColor: 'white',
      tabBarInactiveTintColor: '#4d4d4d',
      tabBarStyle: {
        backgroundColor: '#d1cfcf',
        borderTopColor: 'transparent',
      },
    }} 
  >
    <Tab.Screen
      name="Tab1"
      component={MyTabs}
      options={{
        tabBarLabel: 'Tab1',
        headerShown: false,
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="home" color={color} size={size} />
        ),
      }}
    />
     <Tab.Screen
      name="Tab2"
      component={Screen2}
      options={{
        tabBarLabel: 'Tab2',
        headerShown: false,
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="home" color={color} size={size} />
        ),
      }}
    />
    
  </Tab.Navigator>
</NavigationContainer>
);
}

const Stack = createStackNavigator();

Answer 1

在您的演示代码中，导航到 screen1 会在底部显示 bottomTabBar，这是您需要的用例还是错误。我假设这是一个错误，而你不希望这样。

为此，建议先使用屏幕，然后再使用底部标签。因此，在 screen1 中定义 bottomTabs，然后您现有的代码就可以按需工作。

你的App应该return

    <NavigationContainer>
   <Stack.Navigator
     initialRouteName="Tabs">        
      <Stack.Screen name="Tabs" component= {MyTabs} options={{headerShown: false}}/>
      <Stack.Screen name="Screen1" component= {Screen1} options={{headerShown: false}}/> 
      <Stack.Screen name="Screen2" component= {Screen2} options={{headerShown: false}}/>
      <Stack.Screen name="Screen3" component= {Screen3} options={{headerShown: false}}/>
    </Stack.Navigator>

你的 MyTabs 函数应该 return

<Tab.Navigator
    initialRouteName="Home"
    screenOptions={{
      tabBarActiveTintColor: 'white',
      tabBarInactiveTintColor: '#4d4d4d',
      tabBarStyle: {
        backgroundColor: '#d1cfcf',
        borderTopColor: 'transparent',
      },
    }} 
  >
    <Tab.Screen
      name="Home"
      component={Home}
      options={{
        tabBarLabel: 'Tab1',
        headerShown: false,
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="home" color={color} size={size} />
        ),
      }}
    />
     <Tab.Screen
      name="Tab2"
      component={Screen2}
      options={{
        tabBarLabel: 'Tab2',
        headerShown: false,
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="home" color={color} size={size} />
        ),
      }}
    />
    
  </Tab.Navigator>

工作零食代码是here

编辑：为了使 bottomTabs 在导航后仍然可见，您应该像为 Tab1 一样创建另一个 Stacknavigator。您的代码应如下所示，

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen
        name="Home"
        component={Home}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Screen1"
        component={Screen1}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Screen2"
        component={Screen2}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Screen3"
        component={Screen3}
        options={{ headerShown: false }}
      />
    </Stack.Navigator>
  );
}
function MySecondTabs() {
  return (
    <Stack.Navigator initialRouteName="Screen2">
      <Stack.Screen
        name="Home"
        component={Home}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Screen1"
        component={Screen1}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Screen2"
        component={Screen2}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Screen3"
        component={Screen3}
        options={{ headerShown: false }}
      />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        initialRouteName="Tab1"
        screenOptions={{
          tabBarActiveTintColor: 'white',
          tabBarInactiveTintColor: '#4d4d4d',
          tabBarStyle: {
            backgroundColor: '#d1cfcf',
            borderTopColor: 'transparent',
          },
        }}>
        <Tab.Screen
          name="Tab1"
          component={MyTabs}
          options={{
            tabBarLabel: 'Tab1',
            headerShown: false,
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name="home" color={color} size={size} />
            ),
          }}
        />
        <Tab.Screen
          name="Tab2"
          component={MySecondTabs}
          options={{
            tabBarLabel: 'Tab2',
            headerShown: false,
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name="home" color={color} size={size} />
            ),
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

工作零食code

底部选项卡是否需要自己单独的堆栈

Does a bottom tab need its own separate stack

react-native