SafeAreaView in RN

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 里面了。

参考链接：

• https://github.com/facebook/react-native/commit/ad4b124
• https://github.com/facebook/react-native/commit/983b05441d3d23809b924de2e4bf96a55c47428d