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

Question

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

如何实施“透明”安全区？

简化示例：

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

输出：

期望输出：

Answer 1

您可以尝试使用react-navigation的SafeAreaView。只需将forceInset道具设置为{ bottom: 'never' }，您就会发现它符合您的期望。

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

Answer 2

在大多数情况下，您不想让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>

Answer 3

contentInsetAdjustmentBehavior = {'never'}

在scrollView中使用它

Answer 4

在 ScrollView 中，contentInsetAdjustmentBehavior 控制插入此安全区域填充。只需将其设置为 automatic

<KeyboardAwareScrollView
  contentInsetAdjustmentBehavior="automatic"
  {...otherProps}
/>

---

文档：

/**
 * This property specifies how the safe area insets are used to modify the content area of the scroll view.
 * The default value of this property must be 'automatic'. But the default value is 'never' until RN@0.51.
 */
contentInsetAdjustmentBehavior?: 'automatic' | 'scrollableAxes' | 'never' | 'always';

好吧，即使在 0.64 上，我也必须手动设置。不管那是怎么回事。