为全面屏iPhone X/XS/XR 创建底部导航栏/底部按钮

比较图1和图2-左，可以发现，底部按钮在全面屏中并没有足够的空间去展示，理想情况为图2-右以及图3-左，有足够的填充。

图2-左的情况会导致：

1.用户需要双击才能实现按钮的点击

2.有概率会退出到手机主页

那么如何来解决这个问题，以达到图3的效果？

我们可以通过使用env(safe-area-inset-bottom)来达到额外填充的效果。

padding-bottom: env(safe-area-inset-bottom)

padding-bottom: calc(0.5rem + env(safe-area-inset-bottom))

padding-bottom: calc(2 * env(safe-area-inset-bottom)) -- 单次点击

图1：

 

图2：