如何防止 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

也许这个答案很晚，但你可以轻松使用

 class ExampleScreen extends Component {
  render() {
    return (
      <SafeAreaView edges={['right', 'left', 'top']} >
        <Scrollview>
          <Text>Example</Text>
          <Text>Example</Text>
          <Text>Example</Text>
          (etc)
        </Scrollview>
      </SafeAreaView>
    );
  }
}

Answer 2

在大多数情况下，您不希望您ScrollView/FlatList拥有作为SafeAreaView. 相反，您只想将您的Header和包装TabBar成SafeAreaView. 一些例子：

而不是这个（错误的例子）

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

你只包装标题

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

此外，即使您没有真正的 Header，您只想避免在状态栏后面绘制，您可以使用SafeAreaViewas padding。

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

Answer 3

你可以尝试react-navigation的SafeAreaView。只需将它的forceInsetprop 设置为{ bottom: 'never' }，您就会看到它的行为符合您的期望。

示例： https: //github.com/react-navigation/react-navigation/blob/master/examples/SafeAreaExample/App.js