如上图的底部新增按钮,要是放在web里那是相当简单,直接是用固定定位就行,但是在RN里是没有固定定位。
怎么解决?
方案一 绝对定位
采用绝对定位,相对于最外层的定位在底部位置。
在部分安卓机上有问题,动态计算的高度,定位底部的高度有问题,导致底部按钮定位脱离了视野
方案二 flex布局
如上图,头部导航
剩下的就是
设置属性 flex:1 使它撑满剩余空间,这时候可以设置它为相对定位,然后底部那个按钮绝对定位,这样可行,
但是我们可以用flex一层一层撑开。
按钮底部空白的位置,不是定位出来的,其实是适应iphoneX组件的空间,忽略。
接下来只要把内部划成三块就行:tab导航 列表内容 底部按钮 。
列表内容和底部导航是由一个VIew 包着 和tab 导航同一层级的。所以这个View 设置flex:1
.
到了最后一层,就是设置列表内容 flex:1
, 底部按钮固定高度。这样根据flex布局的属性,底部按钮就被挤在 最下面这个位置了。
这个方法相对于直接用一层定位来,多了几层flex:1
,但是省去了计算高度的工作,不存在安卓的兼容性,免去了样式爆炸的烦恼。
总结:最核心就是一点,一层层设置flex:1
,把固定高度的挤在固定的地方就行。
评论加载中