首页 > RN flex-box布局问题

RN flex-box布局问题

有这么一个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就自动适应剩余的所有空间。

【热门文章】
【热门文章】