Taro 安全区域

目录

一、问题描述

二、问题解决

1、顶部刘海区

2、底部小黑条

---

一、问题描述

安全区域主要是为了避免刘海屏或底部栏遮挡，而造成的不良显示效果。

本次将针对以下两点进行考量：

1、顶部刘海屏区

2、苹果X底部小黑条

二、问题解决

通过Taro.getSystemInfoSync()方法可以获取到设备的信息，虽然其他api也有类似效果，但这个api兼容性是最好的，推荐使用。

1、顶部刘海区

getSystemInfoSync.Result.safeAera.top

这就是刘海屏上方刘海的高度，给容器设置对应的paddingTop即可。

2、底部小黑条

这个区域在苹果X这类手机上比较常见，解决方案是获取到以下计算后到值：

getSystemInfoSync.Result.screenHeight - getSystemInfoSync.Result.safeAera.bottom

这个差值就是屏幕最下方需要留到空间，当这两个值相同时，此时的设备是没有小黑条的，有小黑条的设备都存在此差值。

以上就是安全区域的解决方案！