[英]What are the differences between different implementations of SafeAreaView?
A component called SafeAreaView
is exported by react-native , react-navigation , react-native-safe-area-context and react-native-safe-area-view .一个名为SafeAreaView
的组件由react-native 、 react-navigation 、 react-native-safe-area-context和react-native-safe-area-view导出。
What are the differences and which one should I use in which cases?有什么区别,在哪些情况下我应该使用哪一个?
Except for the one in react-native
they build on top of one another.除了react-native
中的那个之外,它们是相互叠加的。 All the others instruct that you need to wrap your whole app inside a SafeAreaProvider
component.所有其他人都指示您需要将整个应用程序包装在SafeAreaProvider
组件中。
I dug into the source code a bit and this is my deductions:我深入研究了源代码,这是我的推论:
The default implementation provided with React Native. React Native 提供的默认实现。 Should work for most cases but doesn't eg provide inset amounts programmatically.应该适用于大多数情况,但不能例如以编程方式提供插入量。
Provides detailed, retrievable inset information and a rather bare-bones implementation of SafeAreaView
.提供详细的、可检索的插图信息和SafeAreaView
的基本实现。
Written on top of react-native-safe-area-context
, it re-exports SafeAreaProvider
and various other methods, but provides a more complex/fancy implementation of SafeAreaView
that uses Animated.View
.写在react-native-safe-area-context
之上,它重新导出SafeAreaProvider
和其他各种方法,但提供了使用Animated.View
的SafeAreaView
的更复杂/花哨的实现。 Adds properties such as forceInset
to avoid jankiness in some cases due to layout updates.添加诸如forceInset
类的属性,以避免在某些情况下由于布局更新而出现卡顿。 Implemented by the React Navigation team.由 React Navigation 团队实现。
Re-exports SafeAreaView
from react-native-safe-area-view
for convenience and is functionally equivalent.为方便起见,从react-native-safe-area-view
重新导出SafeAreaView
,并且在功能上是等效的。
SafeAreaView
from react-native
.如果您不使用 React Navigation 并且没有特殊需求,请使用SafeAreaView
中的react-native
。 It's provided by default and works.它是默认提供的并且可以工作。react-native-safe-area-context
or react-native-safe-area-view
depending on your needs.如果您不使用 React Navigation 但需要更多功能,请根据需要使用react-native-safe-area-context
或react-native-safe-area-view
。@react-navigation/native
(v5) / react-navigation
(v4) or react-native-safe-area-view
.如果您使用 React Navigation,请使用来自@react-navigation/native
(v5) / react-navigation
(v4) 或react-native-safe-area-view
那个。 It just may work better with React Navigation.它可能与 React Navigation 一起工作得更好。 Both are equivalent, choose one and use it consistently.两者是等效的,选择一个并始终如一地使用它。 I recommend adding an ESLint no-restricted-imports rule that forbids accidentally importing SafeAreaView
from any other location than the one you chose to use.我建议添加一个ESLint no-restricted-imports 规则,该规则禁止从您选择使用的位置以外的任何其他位置意外导入SafeAreaView
。
Example rule allowing import only from from react-navigation
:仅允许从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',
},
],
},
],
Just some additional information to complement/update @Sampo 's answer:只是补充/更新@Sampo 答案的一些附加信息:
If you are using react-navigation
v5.x, note that they do not recommend to use their own implementation of SafeAreaView
, but instead to use react-native-safe-area-context
:如果您使用的是react-navigation
v5.x,请注意他们不建议使用自己的SafeAreaView
实现,而是使用react-native-safe-area-context
:
While React Native exports a SafeAreaView component, it has some inherent issues, ie if a screen containing safe area is animating, it causes jumpy behavior. React Native 导出一个 SafeAreaView 组件时,它有一些固有的问题,即如果包含安全区域的屏幕正在动画,它会导致跳动行为。 In addition, this component only supports iOS 10+ with no support for older iOS versions or Android.此外,此组件仅支持 iOS 10+,不支持旧版 iOS 或 Android。 We recommend to use the react-native-safe-area-context library to handle safe areas in a more reliable way.我们建议使用 react-native-safe-area-context 库以更可靠的方式处理安全区域。
Source: https://reactnavigation.org/docs/handling-safe-area/资料来源: https://reactnavigation.org/docs/handling-safe-area/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.