如何在Bottom Navigation的Stack Navigation中隐藏特定页面底部导航？

你当前的问题出在错误地在栈导航（Stack Navigator）的页面配置里设置了tabBarStyle，这个属性属于底部导航（Tab Navigator）的配置项，栈导航本身不识别它，所以不会生效。正确的做法是在底部导航的层级，根据当前栈的活跃页面来动态控制底部导航的显示/隐藏。

具体实现步骤： #

1. 确保你的导航结构是底部导航（Tab.Navigator）嵌套栈导航（HomeStacks.Navigator），每个底部标签对应一个栈导航组件。
2. 在底部导航的Tab.Screen的options中，通过导航状态获取当前栈的活跃页面名称，据此切换底部导航的样式。

修正后的代码示例： #

// 底部导航的配置
<Tab.Navigator>
  <Tab.Screen
    name="HomeTab"
    component={HomeStacks} // 这里的HomeStacks就是你提供的栈导航组件
    options={({ navigation }) => {
      // 获取当前栈导航的活跃路由
      const currentStackState = navigation.getState();
      const activeRouteName = currentStackState.routes[currentStackState.index].name;
      
      // 判断是否是需要隐藏底部导航的页面
      return {
        tabBarStyle: activeRouteName === 'Exterior' ? { display: 'none' } : undefined,
        // 其他底部标签的配置（比如title、icon等）
      };
    }}
  />
  {/* 其他底部标签页 */}
</Tab.Navigator>

// 你的栈导航代码（无需修改tabBarStyle）
<HomeStacks.Navigator initialRouteName="Home">
  <HomeStacks.Screen name="Home" component={Home} options={{title: 'Welcome', headerShown: false}} />
  <HomeStacks.Screen name="Details" component={Details} options={{title: 'Details', headerShown: false}}/>
  <HomeStacks.Screen name="Settings" component={Settings} options={{title: 'Settings', headerShown: false}}/>
  <HomeStacks.Screen name="Notification" component={Notification} options={{title: 'Notifications', headerShown: false}}/>
  <HomeStacks.Screen name="NewInspection" component={NewInspection} options={{title: 'NewInspection', headerShown: false}}/>
  <HomeStacks.Screen name="MoveIn" component={MoveIn} options={{title: 'Move In', headerShown: false}}/>
  <HomeStacks.Screen name="MoveOut" component={MoveOut} options={{title: 'Move Out', headerShown: false}}/>
  <HomeStacks.Screen name="Exterior" component={Exterior} options={{title: 'Exterior', headerShown: false}}/>
</HomeStacks.Navigator>

关键说明： #

• tabBarStyle是Tab.Screen的配置属性，只有在底部导航的层级设置才会生效。
• 通过navigation.getState()可以获取嵌套栈的导航状态，进而拿到当前活跃的页面名称。
• 如果需要隐藏多个页面，只需修改判断条件，比如：['Exterior', 'NewInspection'].includes(activeRouteName)

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