SafeAreaView

SafeAreaView 的目的是在设备的安全区域边界内渲染内容。目前仅适用于 iOS 版本 11 或更高版本的 iOS 设备。

¥The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later.

SafeAreaView 渲染嵌套内容并自动应用填充来反映视图中未被导航栏、选项卡栏、工具栏和其他祖级视图覆盖的部分。此外，最重要的是，Safe Area 的填充反映了屏幕的物理限制，例如圆角或相机凹口（即 iPhone 13 上的传感器外壳区域）。

¥SafeAreaView renders nested content and automatically applies padding to reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect the physical limitation of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone 13).

示例

¥Example

使用时，请使用 SafeAreaView 封装你的顶层视图，并应用 flex: 1 样式。你可能还想使用与你的应用设计相匹配的背景颜色。

¥To use, wrap your top level view with a SafeAreaView with a flex: 1 style applied to it. You may also want to use a background color that matches your application's design.

---

参考

¥Reference

属性

¥Props

视图属性

¥View Props

继承 视图属性。

¥Inherits View Props.

由于填充用于实现组件的行为，因此应用于 SafeAreaView 的样式中的填充规则将被忽略，并且可能会导致不同的结果，具体取决于平台。详情请参见 #22211。

¥As padding is used to implement the behavior of the component, padding rules in styles applied to a SafeAreaView will be ignored and can cause different results depending on the platform. See #22211 for details.