SafeAreaView 未填充手机头部区域答案

【问题标题】：SafeAreaView not filling the phone head areaSafeAreaView 未填充手机头部区域
【发布时间】：2019-04-09 02:22:34
【问题描述】：

我正在为 iOS 开发一个 react 原生应用。包含带有背景颜色的 SafeAreaView 组件，但 iPhone X 的顶部留下了一个未填充的空白背景空间。

我已移除 SafeAreaView，但我仍然在顶部边缘看到一个白色区域，该区域不受填充背景颜色的影响，除非我加载背景图像。不知道为什么 SafeAreaView 没有覆盖手机顶部的整个 SafeArea；它只走 50% 的路。

 <Fragment>

      <SafeAreaView style={{ flex: 0, backgroundColor: '#006600' }}  />
      <SafeAreaView style={{ flex: 1, backgroundColor: '#006600' }} > 
      <StatusBar barStyle='light-content' />
      <View style={styles.container}>
        <Header 
          headerText={'My Naija Calculator'} 
          backgroundColor = {'#006600'}
          color = { '#fff'}
          />

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

你使用SafeAreaView错了

SafeAreaView 的作用类似于View。您只需将它包裹在所有子元素周围

<SafeAreaView>
   <Component1 />
   <Component2 />
</SafeAreaView>

参考：https://facebook.github.io/react-native/docs/safeareaview

【讨论】：

【解决方案2】：

 <SafeAreaView style={{backgroundColor:'green'}}>
       <Text>hello</Text>
     </SafeAreaView>

你可以试试这个

【讨论】：

【解决方案3】：

对不起，我的错。我在一些被遗忘的边界视图组件中卡住了 20 的填充。我删除了它，一切都按预期工作。

【讨论】：