iOS标题与iPhone11的布局重叠

Question

我有一个react原生应用程序->，我最近注意到我屏幕上的文字与iphone 10+设备上的文本重叠。如何为新设备创建安全区域？

我已经尝试添加一个标记来包装我的主屏幕的stack.navigator，但到目前为止还没有成功。

这是我在react原生代码或xcode中的目标吗？

enter image description here

Answer 1

使用

import { SafeAreaView } from 'react-native';

为了处理安全区域，我在下面的代码中展示了如何处理iPhone 10 plus设备的安全区域

在下面的代码中，我将安全区域分为两部分，一部分是顶部安全区域，另一部分是底部安全区域，您可以将所有组件放在底部安全区域中

render() {
        return (
            <View style={{flex: 1} >
                <SafeAreaView style={{flex: 0}} />
                <SafeAreaView style={{flex: 1}}>
                  //here you can place your component 
                </SafeAreaView>
            </View>

            )
    }