世博会布局当 headerShown: false 我的应用程序占用所有高度为什么？

Question

我正在开发我的应用程序，我使用expo react-native，默认情况下我不需要标题栏，但是当我执行命令 headerShown: false 时，我的所有屏幕出现的次数都超出了我的预期 ，我的所有屏幕都一样：

我希望有人可以帮助我，这是一个有同样问题的代码测试：

import { Stack } from "expo-router";

const Layout = () => {
    return (
        <Stack
            screenOptions={{
                headerShown: false,
            }}>
        </Stack>
    );
};

export default Layout;

我尝试一些看起来更像这样的东西：，

Answer 1

您可以使用expo或react-native提供的SafeAreaView。 expo 版本有一个 hook ，可以在与 View 组件结合使用时提供对所使用的填充的更高控制。插图提供了将视图内容推出状态栏所需的顶部、底部、右侧和左侧的填充值。

对于您的情况，插图与普通视图相结合可能效果更好，因为您似乎正在使用底部选项卡。如果您在屏幕上使用 SafeAreaView 组件，则需要底部安全区域填充的设备（例如较新的 iPhone）上可能会显示额外的底部填充。

根据您想要实现此解决方案的方式，您可以对您创建的每个屏幕使用 SafeAreaView 插图挂钩，也可以将布局堆栈组件包装在利用 SafeAreaView 插图中的填充的视图中。