在 React Native Stack Navigator 中更改 Header 的高度不起作用

Posted 2023-02-16

【中文标题】在 React Native Stack Navigator 中更改 Header 的高度不起作用

【英文标题】：Changing height of Header in React Native Stack Navigator doesn't work

【发布时间】：2021-12-18 01:19:50

【问题描述】：

我正在尝试更改 Stack Navigator 标题的样式，并且除了 height 属性外一切正常。我还将堆栈导航器嵌套在抽屉导航器中。当我更改其标题的高度时，一切正常。

我在我的 AVD 和 iPhone 上使用 Expo Go 对其进行了测试，但它不起作用。在网络浏览器中，它工作正常。

两个标题应具有相同的高度（150 像素）

抽屉：

import React from "react";
import  createDrawerNavigator  from "@react-navigation/drawer";
import  NavigationContainer  from "@react-navigation/native";

import HomeStack from "./HomeStack";
import AboutStack from "./AboutStack";

const DrawerNavigator = createDrawerNavigator();

export default function Drawer() 
    return (
        <NavigationContainer>
            <DrawerNavigator.Navigator
                screenOptions=
                    headerShown: true,
                    headerStyle: 
                        height: 150,
                    ,
                
            >
                <DrawerNavigator.Screen name="HomeStack" component=HomeStack />
                <DrawerNavigator.Screen name="AboutStack" component=AboutStack />
            </DrawerNavigator.Navigator>
        </NavigationContainer>
    );

关于堆栈：

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

const Stack = createNativeStackNavigator();

export default function AboutStack() 
    return (
        <Stack.Navigator
            screenOptions=
                headerStyle: 
                    height: 150,
                    backgroundColor: "#111",
                ,
                headerTintColor: "#fff",
            
        >
            <Stack.Screen
                name="About"
                component=About
                options=
                    title: "About GameZone",
                
            />
        </Stack.Navigator>
    );

【参考方案1】：

你可以使用这个文档https://reactnavigation.org/docs/headers/。你也可以试试

headerTitleStyle: 
            fontWeight: 'bold',
          , 

为此目的。