react native safe area context
Release 5.0.0
处理安全区域的灵活方法，也可以在Android和Web上使用！
npm install react-native-safe-area-contextyarn add react-native-safe-area-context然后，您需要将库的本地部分链接到所使用的平台。
iOS平台：
$ npx pod-install
| 版本 | 反应本版本 |
|---|---|
| 5 | 0.74 |
| 4 | 0.64 |
该图书馆目前对新的反应式体系结构有实验支持。请注意，将会有破坏的变化，只有最新版本的反应本性才能得到支持。
该库有2个重要概念，如果您熟悉React上下文，这非常相似。
SafeAreaProvider组件是消费者提供的插图相对于插图的View 。这意味着，如果此视图与任何系统元素（状态栏，缺口等）重叠，则这些值将提供给后代消费者。通常，您将在应用程序的顶部有一个提供商。
消费者是允许使用最近父母提供商提供的插图值的组件和钩子。值始终与提供商相关，而不是与这些组件相关。
SafeAreaview是消耗插图的首选方法。这是一个常规的View ，插图插入额外的填充或边距。它可以通过本地应用插图来提供更好的性能，并避免其他基于JS的消费者可能发生的闪烁。
useAfeareAinsets具有更大的灵活性，但在某些情况下可能会引起一些布局闪烁。如果您需要更多地控制插图的应用，请使用此功能。
您应该在应用程序root组件中添加SafeAreaProvider 。您可能需要在使用react-native-screens时在其他位置等其他位置添加它。
请注意，提供商不应在Animated或ScrollView中动画的View中，因为它可能会引起非常频繁的更新。
import { SafeAreaProvider } from 'react-native-safe-area-context' ;
function App ( ) {
return < SafeAreaProvider > ... </ SafeAreaProvider > ;
} 接受所有视图道具。具有{flex: 1}的默认样式。
initialMetrics可选，默认为null 。
可用于提供框架和插图的初始值，这允许立即渲染。有关如何使用此道具的更多信息，请参见优化。
SafeAreaView是一个常规的View组件，其安全区域插图应用于填充或边距。
填充或保证金样式被添加到插图中，例如，在SafeAreaView上style={{paddingTop: 10}}其20个插图为20的插图将导致最高填充30。
import { SafeAreaView } from 'react-native-safe-area-context' ;
function SomeComponent ( ) {
return (
< SafeAreaView style = { { flex : 1 , backgroundColor : 'red' } } >
< View style = { { flex : 1 , backgroundColor : 'blue' } } />
</ SafeAreaView >
) ;
} 接受所有视图道具。
edges可选的， top ， right ， bottom和left阵列。默认为所有人。
将边缘设置为将安全区域插图应用于。
例如，如果您不希望插图应用于顶部边缘，因为视图不会触及您可以使用的屏幕顶部：
< SafeAreaView edges = { [ 'right' , 'bottom' , 'left' ] } />可选地可以将其设置为一个对象{ top?: EdgeMode, right?: EdgeMode, bottom?: EdgeMode, left?: EdgeMode } EdgeMode = 'off' | 'additive' | 'maximum' 。添加剂是默认模式，与数组中的传递和边缘相同： finalPadding = safeArea + padding 。如果安全区域较小，则最大模式将使用安全区域插图或填充/边距（取决于mode ）： finalPadding = max(safeArea, padding) 。例如，如果您想要一个浮动的UI元件，该元件应位于安全区域的设备上的底部安全区域边缘，或者在没有安全区域的设备上的屏幕底部，或者安全区域小于24px：
< SafeAreaView style = { { paddingBottom : 24 } } edges = { { bottom : 'maximum' } } /> mode可选， padding （默认）或margin 。
将安全区域应用于填充物或边距。
例如，这可能很有用，例如创建一个安全区域的分离器组件：
< SafeAreaView mode = "margin" style = { { height : 1 , backgroundColor : '#eee' } } />返回最近提供商的安全区域插图。这允许从JavaScript操纵插图值。请注意，插图不会同步更新，因此可能会导致稍微延迟，例如在旋转屏幕时。
对象{ top: number, right: number, bottom: number, left: number } 。
import { useSafeAreaInsets } from 'react-native-safe-area-context' ;
function HookComponent ( ) {
const insets = useSafeAreaInsets ( ) ;
return < View style = { { paddingBottom : Math . max ( insets . bottom , 16 ) } } /> ;
}返回最近提供商的框架。这可以用作Dimensions模块的替代方案。
{ x: number, y: number, width: number, height: number }的对象
SafeAreaInsetsContext与安全区域插图的价值进行反应上下文。
可以与类组件一起使用：
import { SafeAreaInsetsContext } from 'react-native-safe-area-context' ;
class ClassComponent extends React . Component {
render ( ) {
return (
< SafeAreaInsetsContext . Consumer >
{ ( insets ) => < View style = { { paddingTop : insets . top } } /> }
</ SafeAreaInsetsContext . Consumer >
) ;
}
}withSafeAreaInsets提供安全区域插图作为insets道具的高阶组件。
type Props = WithSafeAreaInsetsProps & {
someProp : number ;
} ;
class ClassComponent extends React . Component < Props > {
render ( ) {
return < View style = { { paddingTop : this . props . insets . top } } / >;
}
}
const ClassComponentWithInsets = withSafeAreaInsets ( ClassComponent ) ;
< ClassComponentWithInsets someProp = { 1 } / > ;SafeAreaFrameContext与安全区域框架的价值进行反应上下文。
initialWindowMetrics初始渲染上的窗口的插图和框架。这可以与SafeAreaProvider的initialMetrics一起使用。有关更多信息，请参见优化。
对象与：
{
frame : { x : number , y : number , width : number , height : number } ,
insets : { top : number , left : number , right : number , bottom : number } ,
}注意：当创建本机模块时，此值可以为null或过期。
使用useSafeAreaInsets 。
改用SafeAreaInsetsContext.Consumer 。
改用SafeAreaInsetsContext 。
改用initialWindowMetrics 。
如果您在Web上进行服务器端渲染，则可以根据用户拥有的设备或简单地传递零值来使用initialMetrics对插图注入插图和框架值。由于插图测量是异步的，因此否则会破坏您的页面内容。
如果可以的话，请使用SafeAreaView 。它是本地实现的，因此在旋转设备时，异步桥没有延迟。
为了加快初始渲染的速度，您可以从此软件包中导入initialWindowMetrics ，并按照Web SSR中所述的提供商设置为initialMetrics对象。如果您的提供者重新启动，或者您正在使用react-native-navigation则无法执行此操作。
import {
SafeAreaProvider ,
initialWindowMetrics ,
} from 'react-native-safe-area-context' ;
function App ( ) {
return (
< SafeAreaProvider initialMetrics = { initialWindowMetrics } >
...
</ SafeAreaProvider >
) ;
} 该库包括开玩笑的内置模拟。默认情况下，它将使用以下指标：
{
frame : {
width : 320 ,
height : 640 ,
x : 0 ,
y : 0 ,
} ,
insets : {
left : 0 ,
right : 0 ,
bottom : 0 ,
top : 0 ,
} ,
}要使用它，请将以下代码添加到Jest Setup文件：
import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock' ;
jest . mock ( 'react-native-safe-area-context' , ( ) => mockSafeAreaContext ) ;要对测试值进行更多控制，也可以将initialMetrics传递到SafeAreaProvider ，以提供框架和插图的模拟数据。
export function TestSafeAreaProvider ( { children } ) {
return (
< SafeAreaProvider
initialMetrics = { {
frame : { x : 0 , y : 0 , width : 0 , height : 0 } ,
insets : { top : 0 , left : 0 , right : 0 , bottom : 0 } ,
} }
>
{ children }
</ SafeAreaProvider >
) ;
} 在尝试使用此模拟时，经常遇到的错误是：
SyntaxError : Cannot use import statement outside a module .由于使用导入语句，因此出现了这个问题。要解决它，您需要允许Babel解析该文件。
默认情况下，Jest不会解析位于Node_modules文件夹中的文件。
但是，您可以根据transformIgnorePatterns自定义的嘲笑文档中概述的那样修改此行为。如果您使用的是预设（例如React-native的预设），则应更新开玩笑的配置，以包括react-native-safe-area-context ，如下所示：
transformIgnorePatterns: [
'node_modules/(?!((jest-)?react-native|@react-native(-community)?|react-native-safe-area-context)/)' ,
] ;此调整可确保通用BABEL正确解析模块，从而避免上述语法错误。
参见贡献指南
