メインコンテンツへスキップ

SafeAreaView

非推奨。代わりにreact-native-safe-area-contextを使用してください。

SafeAreaViewの目的は、デバイスのセーフエリアの境界内にコンテンツをレンダリングすることです。現在、iOSバージョン11以降のiOSデバイスにのみ適用されます。

SafeAreaViewは、ネストされたコンテンツをレンダリングし、ナビゲーションバー、タブバー、ツールバー、およびその他の祖先ビューでカバーされていないビューの部分を反映するために、自動的にパディングを適用します。さらに、最も重要なこととして、セーフエリアのパディングは、角の丸みやカメラのノッチ(iPhone 13のセンサーハウジングエリアなど)といった画面の物理的な制約を反映します。

使用例

使用するには、トップレベルのビューをflex: 1スタイルが適用されたSafeAreaViewでラップします。また、アプリケーションのデザインに合わせた背景色を使用することもできます。


リファレンス

Props

ViewのProps

ViewのPropsを継承します。

このコンポーネントの動作はパディングを使用して実装されているため、SafeAreaViewに適用されたスタイル内のパディングルールは無視され、プラットフォームによっては異なる結果を引き起こす可能性があります。詳細は#22211を参照してください。