React Native如何结合使用底部标签导航器与抽屉导航器

你要让底部标签导航在所有业务页面生效，需要调整导航器的嵌套顺序，把标签导航作为登录后业务页面的根容器，原有抽屉导航作为标签导航的子页面即可，修改步骤如下：

1. 修改根Stack导航的指向 #

将App组件中dashboard路由的指向从DrwaerNav改为你已经定义好的MyTabs组件，确保登录后首先进入标签导航容器：

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login" screenOptions={{
          headerShown: false
        }}>
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="SignUp" component={SignUp} />
        {/* 原来指向DrwaerNav，现在改成MyTabs */}
        <Stack.Screen name="dashboard" component={MyTabs} />  
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. 完善MyTabs组件配置 #

• 给标签导航添加headerShown: false的全局配置，避免和抽屉导航、页面自带的header重复显示
• 如果登录后跳转dashboard时传递了user参数，需要将参数透传给抽屉导航组件

const Tab = createMaterialBottomTabNavigator();

function MyTabs(props) {
  return (
    <Tab.Navigator
      activeColor="#e91e63"
      barStyle={{ backgroundColor: 'tomato' }}
      // 新增全局配置，隐藏标签导航自带的header
      screenOptions={{
        headerShown: false
      }}
    >
      <Tab.Screen
        name="homes"
        component={DrwaerNav}
        // 透传登录时携带的user参数给抽屉导航
        initialParams={props.route?.params}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Updates"
        component={updates}
        options={{
          tabBarLabel: 'Updates',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="bell" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{
          tabBarLabel: 'Profile',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="account" color={color} size={26} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

额外优化建议 #

• 你当前用全局变量存储user1和data的方式容易出现数据不同步的问题，建议替换为React Context、Redux等全局状态管理方案
• 如果需要在Updates、Profile页面也能呼出抽屉导航，可以把这两个页面也挪到抽屉导航的路由配置中，保持交互一致性

内容的提问来源于stack exchange，提问作者Zeeshan Zamurd Attari