React Native中如何仅在LandingPage隐藏底部Tab Bar

我使用@react-navigation/material-bottom-tabs实现了带有底部Tab栏的React Native应用，同时应用嵌套了用于页面跳转的Stack导航器。尝试在Stack导航的LandingPage页面设置options={{ headerShown: false }}来隐藏Tab栏，但Tab栏依然可见，需要实现仅在落地页隐藏Tab栏的效果。

我的现有代码如下：

TabBar 代码 #

import React from 'react';
import 'react-native-gesture-handler';
import { Ionicons } from '@expo/vector-icons';
import LandingPage from '../screens/LandingPage';
import DisplayPage from '../screens/DisplayPage';
import StackBar from './StackBar';
import { styles } from '../styles';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

const Tab = createMaterialBottomTabNavigator();

function TabBar() {
  return (
    <Tab.Navigator barStyle={styles.tabcontainer}>
        <Tab.Screen
          name="Home"
          component={StackBar}
          options={{
            tabBarIcon: () => <Ionicons name="home-outline" size={20} />,
          }}
        />
        <Tab.Screen
          name="Profile"
          component={DisplayPage}
          options={{
            tabBarIcon: () => <Ionicons name="person" size={20} />,
            tabBarBadge: 3,
          }}
        />
    </Tab.Navigator>
  )
}

export default TabBar

StackBar 代码 #

import React from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import 'react-native-gesture-handler';
import DisplayPage from '../screens/DisplayPage';
import LandingPage from '../screens/LandingPage';

const Stack = createNativeStackNavigator();

function StackBar() {
  return (
    <Stack.Navigator>
        <Stack.Screen name="Landing" component={LandingPage} options={{ headerShown: false }} />
        <Stack.Screen name="Display" component={DisplayPage} options={{ headerShown: false, contentStyle: { backgroundColor: '#FFE5E5' } }} />
    </Stack.Navigator>
  )
}

export default StackBar

App.js 代码 #

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import TabBar from './components/TabBar';

export default function App() {
  return (
    <NavigationContainer>
      <TabBar/>
    </NavigationContainer>
  );
}

解决方案 #

Tab栏属于Tab Navigator的层级，而Stack是Tab的子导航器，无法直接在Stack页面的选项中控制Tab栏显示。需要通过Tab Navigator的屏幕选项，动态判断当前Stack内的活跃页面，来控制Tab栏的显示状态：

1. 从@react-navigation/native导入getFocusedRouteNameFromRoute工具函数，用于获取嵌套导航器的活跃页面名称。
2. 将TabBar中Home屏幕的options改为函数形式，接收route参数。
3. 通过getFocusedRouteNameFromRoute(route)获取Stack内的当前页面名称，判断是否为Landing，如果是则隐藏Tab栏，否则正常显示。

修改后的TabBar代码 #

import React from 'react';
import 'react-native-gesture-handler';
import { Ionicons } from '@expo/vector-icons';
import LandingPage from '../screens/LandingPage';
import DisplayPage from '../screens/DisplayPage';
import StackBar from './StackBar';
import { styles } from '../styles';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
// 导入工具函数
import { getFocusedRouteNameFromRoute } from '@react-navigation/native';

const Tab = createMaterialBottomTabNavigator();

function TabBar() {
  return (
    <Tab.Navigator barStyle={styles.tabcontainer}>
        <Tab.Screen
          name="Home"
          component={StackBar}
          options={({ route }) => ({
            tabBarIcon: () => <Ionicons name="home-outline" size={20} />,
            // 动态控制Tab栏显示
            tabBarStyle: getFocusedRouteNameFromRoute(route) === 'Landing' 
              ? { display: 'none' } 
              : styles.tabcontainer
          })}
        />
        <Tab.Screen
          name="Profile"
          component={DisplayPage}
          options={{
            tabBarIcon: () => <Ionicons name="person" size={20} />,
            tabBarBadge: 3,
          }}
        />
    </Tab.Navigator>
  )
}

export default TabBar

说明 #

• getFocusedRouteNameFromRoute(route)会自动获取Stack导航器中当前活跃的页面名称。
• 当页面是Landing时，设置tabBarStyle: { display: 'none' }隐藏Tab栏；其他页面使用原样式styles.tabcontainer显示Tab栏。
• StackBar和App.js的代码无需修改，保持原样即可。

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