React Native中嵌套BottomTabNavigation是否可行？

当然可以实现这种嵌套的BottomTabNavigation，我之前在项目里也做过类似的需求，其实核心就是把一个BottomTabNavigator作为另一个页面的子组件来使用就行，下面给你一步步拆解具体怎么做：

第一步：创建子Tab导航组件 #

先单独写一个子Tab的导航配置，比如叫InnerTabNavigator，和你创建外层Tab的方式几乎一样，只是里面的页面是你需要的内部子页面：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import InnerPageA from './InnerPageA';
import InnerPageB from './InnerPageB';

const Tab = createBottomTabNavigator();

function InnerTabNavigator() {
  return (
    <Tab.Navigator
      // 这里可以配置子Tab的样式、图标等，和外层Tab一样
      screenOptions={{
        tabBarActiveTintColor: '#e91e63',
      }}
    >
      <Tab.Screen name="InnerA" component={InnerPageA} options={{ title: '子页面A' }} />
      <Tab.Screen name="InnerB" component={InnerPageB} options={{ title: '子页面B' }} />
    </Tab.Navigator>
  );
}

export default InnerTabNavigator;

第二步：在父页面中引入子Tab组件 #

接下来，把这个InnerTabNavigator当作普通组件，放到你想要的父页面里就行，比如外层Tab中的某个页面ParentPage：

import InnerTabNavigator from './InnerTabNavigator';
import { View, Text } from 'react-native';

function ParentPage() {
  return (
    // 这里可以加父页面的其他内容，比如顶部标题栏，然后下面是子Tab导航
    <View style={{ flex: 1 }}>
      <Text style={{ fontSize: 20, padding: 16, textAlign: 'center' }}>这是父页面的顶部内容</Text>
      <InnerTabNavigator />
    </View>
  );
}

第三步：把父页面加入外层导航 #

最后，确保ParentPage已经被添加到你的外层BottomTabNavigation中，这样用户进入这个父页面后，就能看到内部的子Tab导航了：

// 外层Tab导航的配置
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import ParentPage from './ParentPage';
import OtherOuterPage from './OtherOuterPage';

const OuterTab = createBottomTabNavigator();

function OuterTabNavigator() {
  return (
    <OuterTab.Navigator>
      <OuterTab.Screen name="Parent" component={ParentPage} options={{ title: '父页面' }} />
      <OuterTab.Screen name="OuterOther" component={OtherOuterPage} options={{ title: '其他页面' }} />
    </OuterTab.Navigator>
  );
}

一些实用的注意事项 #

• 建议给内层和外层的Tab导航设置区分度高的屏幕名称，或者给导航容器设置id属性，避免使用navigation.navigate时混淆页面层级。
• 如果需要从子Tab页面跳转到外层的其他页面，可以通过navigation.getParent()获取外层导航实例，再调用跳转方法：navigation.getParent()?.navigate('OuterOther')。
• 子Tab的样式可以完全独立配置，和外层Tab的样式不会互相干扰，你可以根据需求自定义子Tab的图标、颜色、高度等。

这样一套操作下来，就能完美实现你想要的嵌套Tab导航需求啦。

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