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

Question

调用的组件SafeAreaView由react-native、react-navigation、react-native-safe-area-context和react-native-safe-area-view导出。

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

Answer 1

概述

除了react-native他们建立在彼此之上的一个。所有其他人都指示您需要将整个应用程序包装在一个SafeAreaProvider组件中。

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

反应原生

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

反应原生安全区域上下文

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

反应原生安全区域视图

写在 之上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功能等效。

使用哪一种？

1. 如果您不使用 React Navigation 并且没有特殊需求，请使用SafeAreaViewfrom react-native。它默认提供并且有效。
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 规则，禁止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',
      },
    ],
  },
],

Answer 2

只是一些额外的信息来补充/更新 @Sampo 的答案：

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

虽然 React Native 导出 SafeAreaView 组件，但它有一些固有的问题，即如果包含安全区域的屏幕正在动画，则会导致跳跃行为。此外，该组件仅支持 iOS 10+，不支持旧版 iOS 或 Android。我们建议使用react-native-safe-area-context库以更可靠的方式处理安全区域。

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