React Native Stack Navigator嵌套Drawer时修改Header高度失效怎么办

问题原因 #

• 你使用的createNativeStackNavigator依赖系统原生组件渲染导航头，iOS/Android端headerStyle.height配置会被原生默认高度覆盖，需使用专门的headerHeight属性指定高度。网页端无原生限制，因此headerStyle.height可以直接生效。
• AboutStack中额外引入的NavigationContainer属于冗余配置，全局仅需最外层Drawer下的一个NavigationContainer即可，多余容器可能引发样式异常。
• Drawer导航的Header为JS渲染，现有headerStyle.height配置逻辑正常，无需修改。

修复代码 #

将AboutStack代码调整如下即可实现Stack Header高度150px的效果：

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import About from "../screens/About";

const Stack = createNativeStackNavigator();

export default function AboutStack() {
    return (
        <Stack.Navigator
            screenOptions={{
                // 配置原生导航头高度
                headerHeight: 150,
                headerStyle: {
                    backgroundColor: "#111",
                },
                headerTintColor: "#fff",
            }}
        >
            <Stack.Screen
                name="About"
                component={About}
                options={{
                    title: "About GameZone",
                }}
            />
        </Stack.Navigator>
    );
}

如果你的需求是仅保留一个Header，只需给不需要显示Header的导航配置headerShown: false即可。

内容的提问来源于stack exchange，提问作者schuler-ph