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

Question

一个名为 SafeAreaView 的组件由 react-native 导出, react-navigation , react-native-safe-area-context和 react-native-safe-area-view .

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

Answer 1

概述
除了 react-native 中的那个他们建立在彼此之上。所有其他人都指示您需要将整个应用程序包装在 SafeAreaProvider 中成分。
我深入研究了源代码，这是我的推论:
react 原生
React Native 提供的默认实现。应该适用于大多数情况，但不适用于例如以编程方式提供插入量。
react 原生安全区域上下文
提供详细的、可检索的插图信息和 SafeAreaView 的相当简单的实现.
react 原生安全区域 View
写在react-native-safe-area-context之上，它再导出 SafeAreaProvider和其他各种方法，但提供了更复杂/更花哨的实现 SafeAreaView使用 Animated.View .添加属性，例如 forceInset避免在某些情况下由于布局更新而导致卡顿。由 React Navigation 团队实现。
@react-navigation/native (v5) 和 react-navigation (v4)
转口 SafeAreaView来自 react-native-safe-area-view为方便起见，在功能上是等效的。
使用哪一种？

如果你不使用 React Navigation 并且没有特殊需求，使用 SafeAreaView来自 react-native .它默认提供并且有效。

如果您不使用 React Navigation 但需要更多功能，请使用 react-native-safe-area-context或 react-native-safe-area-view取决于您的需求。

如果您使用的是 React Navigation，请使用 @react-navigation/native 中的一个(v5)/react-navigation (v4) 或 react-native-safe-area-view .它可能与 React Navigation 一起工作得更好。两者是等价的，选择一个并始终如一地使用它。

我建议添加一个 ESLint no-restricted-imports rule禁止意外导入 SafeAreaView从您选择使用的位置以外的任何其他位置。
示例规则仅允许从 from 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',
      },
    ],
  },
],