如何在React Navigation单个页面隐藏BottomTab底部导航栏

我刚好处理过完全一样的需求，给你两种简单有效的实现方式，都能完美满足你的要求：

方法一：直接在Tab Screen配置中隐藏（推荐，简洁直观） #

你可以直接在Second对应的Tab.Screen里通过options属性设置tabBarVisible: false，这样进入该页面时底部导航栏会自动隐藏，回到Home或Other时又会自动显示：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from './Home'
import Second from './Second'
import Other from './Other'

const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator 
        tabBarOptions={{ 
          showLabel: true, 
          style: { 
            backgroundColor: 'transparent', 
            position: 'absolute', 
            borderTopWidth: 0, 
            elevation: 0, 
          } 
        }}
      >
        <Tab.Screen name="Home" component={Home}/>
        {/* 给Second页面添加隐藏底部栏的配置 */}
        <Tab.Screen 
          name="Second" 
          component={Second}
          options={{ tabBarVisible: false }}
        />
        <Tab.Screen name="Other" component={Other} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default App;

方法二：在Second页面组件内动态控制（适合需要条件切换的场景） #

如果你的需求更复杂，比如需要根据页面内的状态动态显示/隐藏导航栏，可以在Second组件中使用useNavigation钩子来修改导航配置：

// Second.js
import React, { useEffect } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { useNavigation } from '@react-navigation/native';
// 导入你的相机组件等

function Second() {
  const navigation = useNavigation();

  useEffect(() => {
    // 页面挂载时隐藏底部导航栏
    navigation.setOptions({ tabBarVisible: false });

    // 不需要手动恢复，因为返回Home/Other时，它们的导航配置会自动生效
  }, [navigation]);

  return (
    // 你的相机页面内容，比如相机预览、返回按钮等
    <View style={{ flex: 1, justifyContent: 'flex-start', paddingTop: 40 }}>
      {/* 可以添加自定义返回按钮 */}
      <TouchableOpacity onPress={() => navigation.goBack()}>
        <Text style={{ fontSize: 18, padding: 10 }}>← 返回</Text>
      </TouchableOpacity>
      {/* 相机组件（此处省略具体实现） */}
    </View>
  );
}

export default Second;

这两种方法都能实现你要的效果：点击中间的Second按钮进入相机页面后，底部导航栏消失，只能通过返回操作（系统返回键或自定义返回按钮）回到显示导航栏的页面。

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