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
| バージョン | React-Nativeバージョン |
|---|---|
| 5 | 0.74 |
| 4 | 0.64 |
このライブラリは現在、新しいReact-Nativeアーキテクチャを実験的にサポートしています。壊れた変更があり、React-Nativeの最新バージョンのみがサポートされることに注意してください。
このライブラリには2つの重要な概念があります。反応のコンテキストに精通している場合、これは非常に似ています。
Safeareaproviderコンポーネントは、消費者が提供する挿入図が関連する場所からのViewです。これは、このビューがシステム要素（ステータスバー、ノッチなど）と重複する場合、これらの値が子孫の消費者に提供されることを意味します。通常、アプリの上部に1人のプロバイダーがいます。
消費者は、最寄りの親プロバイダーが提供する挿入図の値を使用できるコンポーネントとフックです。値は常にプロバイダーに関連しており、これらのコンポーネントではありません。
SafeareAviewは、挿入図を消費するための好ましい方法です。これは、追加のパディングまたはマージンとして挿入図を適用した定期的なViewです。インセットをネイティブに適用することでより良いパフォーマンスを提供し、他のJSベースの消費者で起こるフリッカーを回避します。
useSafeareainsetsはより柔軟性を提供しますが、特定の場合にはいくつかのレイアウトフリッカーを引き起こす可能性があります。挿入図の適用方法をさらに制御する必要がある場合は、これを使用してください。
アプリルートコンポーネントに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コンポーネントです。
パディングまたはマージンスタイルは、20の挿入図を持つSafeAreaViewで、 style={{paddingTop: 10}}など、インセットに追加されます。
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)使用されます。たとえば、安全なエリアがあるデバイスの下部のセーフエリアのエッジ、またはセーフエリアのないデバイスの画面の下部から24pxのフローティング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 Prop。
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を使用して、ユーザーが持っているデバイスに基づいてインセットとフレーム値を挿入するか、単にゼロ値を渡すことができます。 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 ) ;テスト値をより詳細に制御するために、FarmentとInsetの模擬データを提供して、 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 .この問題は、インポートステートメントの使用により発生します。それを解決するには、バベルがファイルを解析することを許可する必要があります。
デフォルトでは、Jestはnode_modulesフォルダー内にあるファイルを解析しません。
ただし、 transformIgnorePatternsカスタマイズに関するJESTドキュメントで概説されているように、この動作を変更できます。 React-Nativeのようなプリセットを使用している場合は、JEST構成を更新して、以下に示すようにreact-native-safe-area-contextを含める必要があります。
transformIgnorePatterns: [
'node_modules/(?!((jest-)?react-native|@react-native(-community)?|react-native-safe-area-context)/)' ,
] ;この調整により、バベルはモジュールを正しく解析し、前述の構文エラーを回避します。
寄稿ガイドを参照してください
