SafeAreaView 内的文字隐藏在 Pixel 8 Pro 相机凹口后面

Question

我正在使用

SafeAreaView

中的

react-native-safe-area-contex

，但它似乎无法在 Pixel 8 Pro 上正常工作。

这是我在组件中使用它的方式：

import { Text } from "react-native";
import { useNavigation } from "@react-navigation/native";
import { useLayoutEffect } from "react";
import { SafeAreaView } from "react-native-safe-area-context";

const HomeScreen = () => {

    const navigation = useNavigation();

    useLayoutEffect(() => {
        navigation.setOptions({
            headerShown: false
        })
    });

    return (
        <SafeAreaView>
            <Text>This is some text that shouldn't be hidden behind the camera notch but on Pixel it is</Text>
        </SafeAreaView>
    )
}

export default HomeScreen

我使用方法不对吗？

Answer 1

您应该在应用程序的根组件中添加

SafeAreaProvider

。

<SafeAreaProvider>
 ...
</SafeAreaProvider>

更多信息请参见文档。