react-native - React Native：填充左右两个固定视图之间剩余区域的视图

Question

我有以下布局，如附图所示

<View style={{flexDirection: 'row',justifyContent:'space-between'}}>

    <View style={{width:90}}></View>  //fixed left container
    <View style={{flexGrow:1}}></View>    //the center view
    <View style={{width:90}}></View>    //fixed right container

</View>

我有 3 个水平对齐的视图。2 左右固定宽度视图。和一个中心视图来填充剩余的中心空间。

如果中心视图内的内容很小，但是当它变长时，它会将右侧视图推向右侧，从父视图中移出，这可以正常工作。

如何使中心容器填充中间空间，但在它增长时不推动正确的视图？

标签： react-nativeflexboxreact-native-android

Answer 1

将flex: 1添加到中心视图