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正確解析模塊，從而避免上述語法錯誤。
參見貢獻指南
