ios - 如何防止 React Native SafeAreaView 中的底部区域与内容重叠？

Question

我正在实现 <SafeAreaView>在我的 React Native 应用程序上。我的大部分屏幕都在 ScrollView 中。当我添加 <SafeAreaView> ，它阻碍了内容。虽然我希望这个底部区域是“安全的”，但我希望用户能够看到它后面的内容，否则就会浪费空间。

如何实现“透明”安全区域？

简化示例:

class ExampleScreen extends Component {
  render() {
    return (
      <SafeAreaView>
        <Scrollview>
          <Text>Example</Text>
          <Text>Example</Text>
          <Text>Example</Text>
          (etc)
        </Scrollview>
      </SafeAreaView>
    );
  }
}

输出:

期望的输出:

Answer 1

在大多数情况下，您不希望将 ScrollView/FlatList 作为 SafeAreaView 的后代。相反，您只想将 Header 和 TabBar 包装到 SafeAreaView 中。一些例子:

而不是这个(错误的例子)

<SafeAreaView>
  <Header />
  <ScrollView>
     <Content />
  </ScrollView>
</SafeAreaView>

你只包装标题

<View>
   <SafeAreaView>
      <Header />
   </SafeAreaView>
   <ScrollView>
     <Content />
   </ScrollView>
</View>

此外，即使您实际上没有页眉，您只想避免在状态栏后面绘制，您也可以使用 SafeAreaView 作为填充。

<View>
   <SafeAreaView /> // <- Now anything after this gonna be rendered after the safe zone
   <Content />
</View>