SafeAreaView 的不同实现之间有什么区别？

Question

名为 SafeAreaView 的组件由 react-native, react-navigation, react-native-safe-area-context and react-native-safe-area-view 导出。

有什么区别，在哪些情况下应该使用哪一种？

Answer 1

概述

除了 react-native 中的那个，它们相互叠加。所有其他指示您需要将整个应用程序包装在 SafeAreaProvider 组件中。

我深入研究了源代码，这是我的推论：

本机反应

React Native 提供的默认实现。应该适用于大多数情况，但不适用于例如以编程方式提供插入金额。

react-native-safe-area-context

提供详细的、可检索的插图信息和 SafeAreaView.

的相当简单的实现

react-native-safe-area-view

写在 react-native-safe-area-context 之上，它重新导出 SafeAreaProvider 和各种其他方法，但提供了 SafeAreaView 的更多 complex/fancy 实现，它使用 Animated.View.添加诸如 forceInset 之类的属性，以避免在某些情况下由于布局更新而导致卡顿。由 React Navigation 团队实施。

@react-navigation/native (v5) 和反应导航 (v4)

为方便起见，从 react-native-safe-area-view 重新导出 SafeAreaView，并且功能等效。

使用哪一个？

1. 如果您不使用 React Navigation 并且没有特殊需求，请使用 react-native 中的 SafeAreaView。它是默认提供的并且可以使用。
2. 如果您不使用 React Navigation 但需要更多功能，请根据需要使用 react-native-safe-area-context 或 react-native-safe-area-view。
3. 如果您使用的是 React Navigation，请使用 @react-navigation/native (v5) / react-navigation (v4) 或 react-native-safe-area-view 中的一个。它可能与 React Navigation 一起工作得更好。两者是等价的，二选一，坚持使用。

我建议添加一个 ESLint no-restricted-imports rule 以禁止从您选择使用的位置以外的任何其他位置意外导入 SafeAreaView。

示例规则仅允许从 react-navigation:

导入

'no-restricted-imports': [
  'error',
  {
    paths: [
      {
        name: 'react-native',
        importNames: ['SafeAreaView'],
        message: 'Import SafeAreaView from react-navigation instead',
      },
      {
        name: 'react-native-safe-area-context',
        importNames: ['SafeAreaView'],
        message: 'Import SafeAreaView from react-navigation instead',
      },
      {
        name: 'react-native-safe-area-view',
        importNames: ['SafeAreaView'],
        message: 'Import SafeAreaView from react-navigation instead',
      },
    ],
  },
],

Answer 2

只是 complement/update @Sampo 的回答的一些补充信息：

如果您使用 react-navigation v5.x，请注意他们不建议使用他们自己的 SafeAreaView 实现，而是使用 react-native-safe-area-context:

While React Native exports a SafeAreaView component, it has some inherent issues, i.e. if a screen containing safe area is animating, it causes jumpy behavior. In addition, this component only supports iOS 10+ with no support for older iOS versions or Android. We recommend to use the react-native-safe-area-context library to handle safe areas in a more reliable way.

来源：https://reactnavigation.org/docs/handling-safe-area/