有这么一个View,分为上中下三个
<View style={{flexDirection:'column',flex:1}}>
<View key={'1'}></View>
<View key={'2'}></View>
<View key={'3'}></View>
</View>
而我需要的效果是,1的高度 和 3的高度是指定的,而 2的高度就是屏幕的高度或者父类的高度减去1和3的高度,这样子是不是用了flex就不可能实现了? 还是说我需要采用position布局?或者所有坐标根据window获取。所有都算出来?。有没有比较优雅的方法?
demo:上中下布局 上下固定 中间自适应
使用flexbox恰恰可以很好的实现此效果,具体方式为:
第一个view和第三个view通过height:样式指定高度。
第二个view 指定flex:1(根据剩余空间伸缩)
这样,只要父view的高度> view1 + view3的高度, view2就自动适应剩余的所有空间。