SafeAreaView的不同实现有啥区别？

Posted 2023-03-15

【中文标题】SafeAreaView的不同实现有啥区别？

【英文标题】：What are the differences between different implementations of SafeAreaView?SafeAreaView的不同实现有什么区别？

【发布时间】：2020-05-19 09:27:15

【问题描述】：

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

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

【参考方案1】：

概述

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

我稍微研究了一下源代码，这是我的推论：

反应原生

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

react-native-safe-area-context

提供详细的、可检索的插图信息和SafeAreaView 的相当简单的实现。

react-native-safe-area-view

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

@react-navigation/native (v5) 和 react-navigation (v4)

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

使用哪一个？

如果你不使用 React Navigation 并且没有特殊需求，请使用 SafeAreaView from 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。

仅允许从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',
      ,
    ],
  ,
],

【讨论】：

你能帮忙看看如何创建 eslint 规则以避免从 react-native 导入吗？

@Brechard 我添加了一个例子。

【参考方案2】：

只是补充/更新@Sampo 答案的一些附加信息：

如果您使用的是react-navigation v5.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/