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 |
이 라이브러리는 현재 새로운 반응 신용 아키텍처를 실험적으로 지원하고 있습니다. 변경 사항이 깨질 것이며 최신 버전의 React-Native 만 지원됩니다.
이 라이브러리에는 두 가지 중요한 개념이 있습니다. RECT 컨텍스트에 익숙하다면 이것은 매우 유사합니다.
Safeareaprovider 구성 요소는 소비자가 제공 한 삽입물이 상대적으로 View . 이는이보기가 시스템 요소 (상태 표시 줄, 노치 등)와 겹치는 경우 이러한 값이 자손 소비자에게 제공 될 것임을 의미합니다. 일반적으로 앱 상단에 하나의 공급자가 있습니다.
소비자는 가장 가까운 상위 제공자가 제공하는 삽입 된 값을 사용할 수있는 구성 요소 및 후크입니다. 값은 항상 제공자와 관련이 있으며 이러한 구성 요소는 아닙니다.
Safeareaview는 삽입물을 소비하는 선호하는 방법입니다. 이것은 추가 패딩 또는 마진으로 삽입 된 삽입 된 정기적 인 View 입니다. 그것은 기본적으로 삽입을 적용하여 더 나은 성능을 제공하며 다른 JS 기반 소비자와 함께 발생할 수있는 깜박임을 피합니다.
ASSAFEAREAINSETS는 더 많은 유연성을 제공하지만 특정 경우에 일부 레이아웃이 깜박일 수 있습니다. 삽입되는 방법을 더 많이 제어 해야하는 경우이를 사용하십시오.
앱 루트 구성 요소에 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 구성 요소입니다.
패딩 또는 마진 스타일은 삽입물에 추가됩니다 (예 : style={{paddingTop: 10}} 는 20 인 삽입물이있는 SafeAreaView 에서 최상위 패딩이 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에서 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 사용하십시오.
웹에서 서버 측면 렌더링을 수행하는 경우 initialMetrics 사용하여 사용자가 가진 장치를 기반으로 삽입 및 프레임 값을 주입하거나 단순히 0 값을 전달할 수 있습니다. Insets 측정은 비동기이므로 페이지 컨텐츠를 렌더링하면 렌더링됩니다.
가능하면 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 설정 파일에 다음 코드를 추가하십시오.
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 사용자 정의에 대한 JEST 문서에 요약 된 대로이 동작을 수정할 수 있습니다. React-Native의 사전 설정과 같은 사전 설정을 사용하는 경우 다음과 같이 react-native-safe-area-context 포함하도록 JEST 구성을 업데이트해야합니다.
transformIgnorePatterns: [
'node_modules/(?!((jest-)?react-native|@react-native(-community)?|react-native-safe-area-context)/)' ,
] ;이 조정은 바벨이 모듈을 올바르게 구문 분석하여 위에서 언급 한 구문 오류를 피합니다.
기고 가이드를 참조하십시오
