React Native如何实现所有页面（含详情页）展示BottomTabNavigator

要实现所有页面（包括详情页）都展示BottomTabNavigator，需要将每个Tab对应的业务模块封装为独立的栈导航（Stack Navigator），而非直接把单页面作为Tab.Screen的渲染组件。这样栈内所有子页面都会在底部Tab栏的上层渲染，Tab栏不会被详情页覆盖。

具体实现步骤 #

• 步骤1：为需要子页面的Tab模块创建独立栈导航
  以你的Study模块（对应Training、TrainingDetails页面）为例，新建StudyStack.js文件，代码如下：

import { createStackNavigator } from '@react-navigation/stack';
import Training from './Training';
import TrainingDetails from './TrainingDetails';

const StudyStack = createStackNavigator();

function StudyStackScreen() {
  return (
    <StudyStack.Navigator screenOptions={{ headerShown: false }}>
      <StudyStack.Screen name="Training" component={Training} />
      <StudyStack.Screen name="TrainingDetails" component={TrainingDetails} />
      {/* 该模块下所有其他子页面都可加在此处，都会保留底部Tab栏 */}
    </StudyStack.Navigator>
  );
}

export default StudyStackScreen;

• 步骤2：修改Main.js的Tab配置
  将原来Study Tab的component从Training替换为刚才创建的StudyStackScreen，修改后的对应代码如下：

// 头部先导入刚创建的StudyStackScreen
import StudyStackScreen from './StudyStackScreen';

const Tab = createBottomTabNavigator();
  return (
    <Tab.Navigator tabBarOptions={{ activeTintColor: theme.colors.primary, inactiveTintColor: theme.colors.neutral_100, style: {backgroundColor: theme.colors.active} }}>
      <Tab.Screen
        options={{
          title: "Trabalhar",
          tabBarIcon: ({ focused, color, size }) => (
            <MaterialIcon name={"headset"} size={size} color={color} />
          ),
        }}
        name="Home"
        component={HomeScreen}
      />
      {/* 此处替换为栈导航组件 */}
      <Tab.Screen
        options={{
          title: "Estudar",
          tabBarIcon: ({ focused, color, size }) => (
            <SimpleLineIcon name={"graduation"} size={size} color={color} />
          ),
        }}
        name="Study"
        component={StudyStackScreen}
      />
      <Tab.Screen
        options={{
          title: "Notificações",
          tabBarIcon: ({ focused, color, size }) => (
            <MaterialIcon name={"bell-outline"} size={size} color={color} />
          ),
        }}
        name="Notification"
        component={HomeScreen}
      />
      <Tab.Screen
        options={{
          title: "Resultados",
          tabBarIcon: ({ focused, color, size }) => (
            <MaterialIcon name={"trending-up"} size={size} color={color} />
          ),
        }}
        name="Results"
        component={HomeScreen}
      />
      <Tab.Screen
        options={{
          title: "Carteira",
          tabBarIcon: ({ focused, color, size }) => (
            <MaterialIcon name={"wallet-outline"} size={size} color={color} />
          ),
        }}
        name="Wallet"
        component={HomeScreen}
      />
    </Tab.Navigator>
  );
};
export default Main;

• 步骤3：页面跳转逻辑不变
  在Training页面跳转到TrainingDetails时，直接调用正常的navigate方法即可：

// Training页面内的跳转代码
navigation.navigate('TrainingDetails', { /* 可传入自定义参数 */ })

其他说明 #

如果其他Tab模块也需要添加子页面，按照同样逻辑为对应模块创建独立栈导航，把所有子页面都放在对应Tab的栈中，即可实现全页面保留底部Tab栏的效果。

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