ios - 如何防止布局与iOS状态栏重叠

Question

我正在研究 tutorial用于 React Native 导航。我发现所有布局都是从屏幕顶部而不是状态栏下方开始加载的。这会导致大多数布局与状态栏重叠。我可以通过在加载它们时向 View 添加填充来解决此问题。这是实际的方法吗？我不认为手动添加填充是解决它的实际方法。有没有更优雅的方法来解决这个问题？

import React, { Component } from 'react';
import { View, Text, Navigator } from 'react-native';

export default class MyScene extends Component {
    static get defaultProps() {
            return {
                    title : 'MyScene'    
            };  
    }   
    render() {
            return (
                    <View style={{padding: 20}}> //padding to prevent overlap
                            <Text>Hi! My name is {this.props.title}.</Text>
                    </View> 
            )   
    }    
}

下图显示了添加填充前后的屏幕截图。

Answer 1

现在您可以使用包含在 React Navigation 中的 SafeAreaView:

<SafeAreaView>
    ... your content ...
</SafeAreaView>