如何仅在Android平台隐藏React Navigation导航栏？

嘿，这个需求太贴合实际了——毕竟安卓和iOS的导航栏交互逻辑本来就不一样，我给你几个简单好用的实现方案：

方案1：全局统一配置（所有屏幕生效） #

如果你想让整个导航栈里的所有屏幕都遵循「安卓隐藏、iOS显示」的规则，直接在导航容器的screenOptions里用React Native的Platform API做条件判断就行：

import { Platform } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator
      screenOptions={{
        // 核心逻辑：安卓隐藏，iOS显示导航栏
        headerShown: Platform.OS !== 'android',
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      {/* 其他屏幕 */}
    </Stack.Navigator>
  );
}

方案2：单个屏幕单独设置 #

如果只有部分屏幕需要这个规则，就在对应屏幕的options里单独配置：

<Stack.Screen
  name="Settings"
  component={SettingsScreen}
  options={{
    headerShown: Platform.select({
      android: false,
      ios: true,
    }),
  }}
/>

方案3：动态控制（结合页面状态） #

要是你需要根据页面的动态状态（比如滚动位置、用户操作）来切换导航栏显示，结合useHeaderShown钩子和Platform判断也很灵活：

import { Platform, useEffect } from 'react-native';
import { useHeaderShown } from '@react-navigation/native';

function DetailScreen() {
  const [headerShown, setHeaderShown] = useHeaderShown();

  // 组件挂载时根据平台设置初始状态
  useEffect(() => {
    setHeaderShown(Platform.OS === 'ios');
  }, []);

  return <View> {/* 页面内容 */} </View>;
}

关键注意点

• 一定要确保正确导入了React Native的Platform模块，不然会出现变量未定义的错误；
• 如果是嵌套导航（比如Stack嵌套在Drawer/Tab导航里），要把配置加到对应的Stack Navigator上，而不是外层的容器；
• 你之前的代码在iOS端执行隐藏，大概率是没有做平台区分，直接全局设置了headerShown: false，替换成上面的条件判断就能解决问题。

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