11

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

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

4

2 回答 2

24

概述

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

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

反应式

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

反应原生安全区域上下文

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

反应原生安全区域视图

写在. react-native-safe-area-context_ SafeAreaProvider_ 添加属性，例如避免在某些情况下由于布局更新而引起的卡顿。由 React Navigation 团队实现。SafeAreaViewAnimated.ViewforceInset

@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',
      },
    ],
  },
],
于 2020-05-19T09:27:15.750 回答
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/

于 2021-04-26T09:38:11.563 回答