使用的框架：Expo SDK版本：~49.0.13
大家好，
我在这里寻求帮助，使用新的世博会路由器v2与世博会SDK 49。正如团队在this blog post中所述，新路由器的默认布局现在使用安全区域视图。下面的ExpoRoot.txs文件使用SafeAreaProvider：
export function ExpoRoot({
wrapper: ParentWrapper = Fragment,
...props
}: ExpoRootProps) {
/*
* Due to static rendering we need to wrap these top level views in second wrapper
* View's like <GestureHandlerRootView /> generate a <div> so if the parent wrapper
* is a HTML document, we need to ensure its inside the <body>
*/
const wrapper: ExpoRootProps["wrapper"] = ({ children }) => {
return (
<ParentWrapper>
<GestureHandlerRootView>
<SafeAreaProvider
// SSR support
initialMetrics={INITIAL_METRICS}
>
{children}
{/* Users can override this by adding another StatusBar element anywhere higher in the component tree. */}
{!hasViewControllerBasedStatusBarAppearance && (
<StatusBar style="auto" />
)}
</SafeAreaProvider>
</GestureHandlerRootView>
</ParentWrapper>
);
};对于我的特定用例，我想避免在这里使用SafeAreaProvider，以便在屏幕上使用完整的背景颜色，并在布局中使用我自己的填充和边距。我怎样才能做到这一点，而不直接修改这个文件？
谢谢你的帮助
1条答案
按热度按时间t5fffqht1#
我觉得你已经得到你想要的了。
当使用开发人员菜单检查元素时，您可以观察应用于UI组件的边距和填充。值得注意的是，一般来说，SafeAreaProvider本身并不引入填充或边距。
但是，如果要控制安全区域插入，可以使用SafeAreaView组件和useSafeAreaInsets钩子。通过使用SafeAreaView，您可以确保正确调整应用的内容，以适应设备上的安全区域（例如，槽口和系统栏）。您可以使用useSafeAreaInsets钩子获取这些insets的特定值。
出于测试目的，您可以在应用内创建一个新堆栈，通常在根或布局级别，尤其是在使用基于选项卡的模板时。可以自定义此堆栈，以您所需的方式处理安全区域，确保您的UI组件尊重设备的安全区域，而不会影响您的设计。
首先，如果您安装了模板，请删除默认的布局 Package ，并使用以下选项创建一个新的堆栈：
并为这个堆栈创建组件，如下所示：