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团队实施。

反应导航

为了方便起见，从SafeAreaView重新导出react-native-safe-area-view，并且在功能上等效。 （@react-navigation/native也会导出同样的内容。）>

使用哪个？

1. 如果您不使用React Navigation且没有特殊需要，请使用SafeAreaView中的react-native。它是默认提供的，并且可以使用。

如果您不使用React Navigation但需要更多功能，请根据需要使用react-native-safe-area-context或react-native-safe-area-view。

[如果您使用的是React Navigation，请使用react-navigation或react-native-safe-area-view中的一个。使用React Navigation可能会更好。两者都是等效的，选择一个并持续使用。

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