RN如何固定底部的按钮

如上图的底部新增按钮，要是放在web里那是相当简单，直接是用固定定位就行，但是在RN里是没有固定定位可言的。

方案一：采用绝对定位，相对于最外层的定位在底部位置。（在部分安卓机上有问题，动态计算的高度，定位底部的高度有问题，导致底部按钮定位脱离了视野）

正确方案：还是flex布局好用。

大致如上图，头部导航<HeaderView> 是固定的，剩下的就是

<SegmentedControl> 组件（红色方框区域）设置属性 flex:1 使它撑满剩余空间，这时候可以设置它为相对定位，然后底部那个按钮绝对定位，这样应该也行，但是咱们尝试着抛开定位继续用flex一层层的撑。

按钮底部空白的位置，不是定位出来的，其实是适应iphoneX组件的空间，所以可以忽略。

接下来只要把内部划成三块就行：tab导航列表内容底部按钮。而列表内容和底部导航是由一个VIew 包着和tab 导航同一层级的。所以这个View 设置flex:1.

到了最后一层，就是设置列表内容 flex:1 ，底部按钮固定高度。这样根据flex布局的属性，底部按钮就被挤在最下面这个位置了。

这个方法相对于直接用一层定位来，多了几层flex:1，省去了计算高度的工作。个人更倾向于这种的，不存在安卓的兼容性，免去了样式爆炸的烦恼。

总结：可能上面描述的您不是很明白，核心就是一点，一层层设置flex：1,把固定高度的挤在固定的地方就行。

巴特西