React Navigation v6：实现iOS与Android头部布局表现一致

针对Android端Header渲染在屏幕组件上方、和iOS表现不一致的问题，给你几个实用的解决方向：

• 自定义Header统一跨平台样式
  React Navigation在Android和iOS上的Header默认行为有差异，直接自定义Header组件能完全掌控布局和样式，抹平平台差异。示例代码：

  import { View, Text, StyleSheet, Platform } from 'react-native';
  import { Header } from '@react-navigation/elements';
  
  const CustomHeader = ({ navigation }) => {
    return (
      <Header
        style={styles.header}
        title={<Text style={styles.title}>页面标题</Text>}
        left={() => (
          <Text onPress={() => navigation.goBack()} style={styles.backBtn}>返回</Text>
        )}
      />
    );
  };
  
  const styles = StyleSheet.create({
    header: {
      backgroundColor: '#fff',
      // 移除平台默认阴影
      elevation: Platform.OS === 'android' ? 0 : undefined,
      shadowOpacity: Platform.OS === 'ios' ? 0 : undefined,
      borderBottomWidth: StyleSheet.hairlineWidth,
      borderBottomColor: '#e5e5e5',
    },
    title: {
      fontSize: 18,
      fontWeight: '600',
    },
    backBtn: {
      fontSize: 16,
      marginLeft: 16,
      color: '#007AFF',
    },
  });
  
  // 在Stack Navigator中配置使用
  <Stack.Navigator
    screenOptions={{
      header: (props) => <CustomHeader {...props} />,
    }}
  >
    {/* 你的屏幕组件 */}
  </Stack.Navigator>
  

• 修正Android状态栏与Header的布局冲突
  Android上Header容易和状态栏重叠，导致视觉上“悬浮”在组件上方，可通过配置状态栏参数调整：

  import { StatusBar } from 'react-native';
  
  // 在Stack Navigator的screenOptions中添加
  screenOptions={{
    statusBarStyle: 'dark-content',
    statusBarTranslucent: false,
    // 让Header高度适配Android状态栏
    headerStatusBarHeight: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
  }}
  

• 配合KeyboardAvoidingView优化键盘弹出布局
  虽然你已经设置了softwareKeyboardLayoutMode: 'pan'，但手动在屏幕组件中加入KeyboardAvoidingView，能进一步确保键盘弹出时Header和内容布局一致：

  import { KeyboardAvoidingView, Platform } from 'react-native';
  
  const YourScreen = () => {
    return (
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        style={{ flex: 1 }}
      >
        {/* 这里放你的屏幕内容 */}
      </KeyboardAvoidingView>
    );
  };
  

• 升级依赖版本排查兼容性问题
  旧版本的react-navigation或expo可能存在平台适配bug，试试把@react-navigation/native、@react-navigation/stack以及expo相关依赖升级到最新版，通过expo update命令就能快速升级。

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