使用 React Native Paper 的应用程序标头在 Android 中显示顶部填充

Question

我在 Android 上遇到这个问题，React Native Paper 中的

App.Header

组件在 Android 中显示为

paddingTop

，在 iOS 中看起来很棒。我附上了 2 个屏幕截图来展示我在说什么......

安卓：

iOS：

这是我在 SettingsScreen.js 文件中的代码：

useLayoutEffect(() => {
    navigation.setOptions({
        headerMode: "screen",
        header: ({ navigation, scene }) => (
            <Appbar.Header style={appStyles.appBar}>
                <Appbar.Content titleStyle={appStyles.appBarTitle} title={t("dashboard.header")} />
                <Appbar.Action
                    icon={() => <AntDesign name="calendar" style={appStyles.appBarIcon} />}
                    onPress={() => {
                        datePicker.show();
                    }}
                />
            </Appbar.Header>
        )
        });
    }, [navigation]);
}

任何提示将不胜感激！

Answer 1

我通过将 statusBarHeight={0} 添加到 Appbar.Header 解决了这个问题。

<Appbar.Header style={appStyles.appBar} statusBarHeight={0}>

Answer 2

在撰写本文时，问题是相反的：标题在 Android 上看起来不错，但在 iOS 上显示填充顶部。

另一个答案中提出的解决方案（将 statusBarHeight 设置为 0）会导致标题与 Android 上的操作系统状态栏重叠，而在 iOS 上工作正常。

我使用以下代码解决了这个问题：

<Appbar.Header statusBarHeight={Platform.OS === "ios" ? 0 : undefined}>