react-navigation 不显示header，内容在安全区显示

在APP中，有的页面时不需要显示header的，但是内容要显示正常，不能显示在状态栏下

1.非正常显示的

显示在状态栏下的内容

2.正常显示的

image.png

3.方法

官方链接
使用SafeAreaView 组件解决

只需要引入SafeAreaView，并且放到最外层就好

import { SafeAreaView } from 'react-navigation';
...others code
render() {
    return (
      <SafeAreaView style={ { backgroundColor: '#6a51ae' }}>
      <View >
        <Home/>
      </View>
      </SafeAreaView>
    )
  }