RN 踩坑：内容区域高度

发表于 |
字数统计 237字 | 阅读时长 1分钟

万万没想到，魅族有个 Smart bar

以下内容要是不小心搞错了还请好心人士指正

Dimensions

Dimensions 获取的是设备屏幕分辨率对应的宽高，包含了 status bar 以及其它 bar.

ios

ios 比较简单，就一个 statusBar，iphoneX 是一类，其它的是一类，使用 paddingTop 可抵消 statusBar，项目使用 native-base 的 header，设置如下：

1
2
paddingTop: platform === "ios" ? (variables.isIphoneX ? 39 : 15) : 0
height: platform === "ios" ? (isIphoneX ? 88 : 64) : 56

android

android 有三种 bar：Soft menu, Status bar, Smart bar，其中，Smart bar 为魅族特有。在使用内容区域高度时需要考虑以上三种 bar。当然，工具已经有人做好了：https://github.com/Sunhat/react-native-extra-dimensions-android

flex 大法

如果不想计算内容区域高度，通通用 flex 也是可以的

多说一句

第一个万万没想到应该是小米手机开发者模式竟然要插 sim 卡，要插 sim 卡…… 耿耿于怀 n 年