SafeAreaView in RN

2018/01/25

Tags: iphone SafeAreaView

iPhone X 整出来一个刘海和底部的下巴,app 需要做特殊处理,否则可能会顶部把内容显示到被刘海挡住的那部分里面,下面呢会显示到那个手势控制的里面,导致一些按钮不能点击。

之前我们用的是 https://www.npmjs.com/package/react-native-iphone-x-helper 自己计算的。前几天升级 RN 翻 0.52 的 release Note 发现 RN 0.50 新增了一个叫做 SafeAreaView 的 view 来解决这个问题。

用法也很简单,把你的内容包含到这里面就可以了。有下面两个方法。

不用 SafeAreaView 来处理底部,比如显示的是一个列表什么的,底部不固定的,用户如果有需要点按会往上滚动出底部的手势区域然后点击。

<SafeAreaView />

使用 SafeAreaView 处理底部,比如底部是一排固定按钮,例如微信那样的,这个时候需要把底部区域让出来。

<SafeAreaView>
  ....
</SafeAreaView>

SafeAreaView 本身支持设置背景色,但是不支持顶部和底部设置不同的颜色,思路是可以给 SafeAreaView 下面放两个 view 分别设置他们的颜色。代码我贴到参考链接 2 里面了。

参考链接:

Comments