iOS 中的 React Native 导航标题高度

Question

我在我的 React Native 应用程序中呈现自定义标头时遇到问题。在 Android 上它工作得完美无缺，我有设计师想要的标题。但在 ios 中，标题很奇怪。就好像它的高度是原始标题高度（不是我的自定义标题高度），但它的子项受到自定义标题高度的影响，使其内容泄漏到主要组件（标题下方）。如果我在自定义高度中手动设置高度，它不会更改 VISIBLE HEADER CONTAINER，但它的子项会受到影响。就像它渲染原始标题，然后在其上渲染我的自定义标题。

我已经放置了 SafeAreaView 来包裹应用程序，没有任何改变。如果有人可以帮忙，非常感谢！

这就是 Android 和 ios 上的样子：

这是片段：

import React, { useState } from "react"
import { Avatar, IconButton, Menu, Text } from "react-native-paper"
import { useUser } from "../../hooks/useUser"
import { Pressable, View } from "react-native"
import { useNavigation } from "@react-navigation/native"
import { NotificationItem } from "./NotificationItem"
import placeholders from "../../tools/placeholders"
import { TrianguloMiseravel } from "../TrianguloMiseravel"

interface HeaderProps {}

export const Header: React.FC<HeaderProps> = ({}) => {
    const navigation = useNavigation<any>()
    const { user } = useUser()

    const [showNotifications, setShowNotifications] = useState(false)

    return user ? (
        <View
            style={{
                flexDirection: "row",
                paddingVertical: 15,
                alignItems: "center",
                justifyContent: "space-between",
                width: "100%",
                paddingRight: 30,
            }}
        >
            <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
                <Pressable onPress={() => navigation.navigate("setup")}>
                    <Avatar.Image size={50} source={user.image ? { uri: user.image } : placeholders.avatar} />
                </Pressable>
                <Text variant="titleLarge">{user.name}</Text>
            </View>
            <Menu
                visible={showNotifications}
                onDismiss={() => setShowNotifications(false)}
                anchorPosition="bottom"
                anchor={<IconButton icon={"bell-outline"} onPress={() => setShowNotifications(true)} />}
                contentStyle={{ width: "100%" }}
                style={{ width: "93%" }}
            >
                <TrianguloMiseravel />
                <NotificationItem />
                <NotificationItem />
                <NotificationItem />
            </Menu>
        </View>
    ) : null
}

Answer 1

我找到了解决方案，如果有人遇到这个问题：

错误是我将自定义标头组件传递给导航器的屏幕选项道具中的“headerTitle”选项而不是“header”。

出于某种原因，在 android 上看起来不错，但在 ios 上，它仅将自定义标头呈现为标题，而不是整个组件。而且很有道理哈哈