RN flex-box布局问题

Question

有这么一个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获取。所有都算出来？。有没有比较优雅的方法？

Answer 1

使用flexbox恰恰可以很好的实现此效果，具体方式为：

第一个view和第三个view通过height:样式指定高度。

第二个view 指定flex:1（根据剩余空间伸缩）

这样，只要父view的高度> view1 + view3的高度， view2就自动适应剩余的所有空间。

Answer 2

demo：上中下布局 上下固定 中间自适应