react-native - React-Native 填充空间

Question

我的应用中有一些视图，

第一个和最后一个具有固定尺寸，但中间视图我将填充剩余空间。
我该怎么做？

let probableView = (!someVariable) ? null : (<View style={{ height: "10%" }}/>);

...

<View 
    style={{
        flex: 1,
        flexDirection: "column",
        justifyContent: "space-around",
        height: "100%",
        width: "100%",
    }}
>
    <View style={{ height: "10%" }}/>
    { probableView }
    <View/>     <------------------ How can I fill automatically the remain space?
    <View style={{ height: "10%" }}/>
</View>

Answer 1

答案是添加 flex = 1。这将填充剩余空间。

<View style={ flex: 1 }}>
    <View style={{ height: "10%" }}/>
    { probableView }

    <View style={{flex: 1}}/>   // Added here

    <View style={{ height: "10%" }}/>
</View>

Answer 2

我建议您在主视图标签内的每个视图标签中使用“flex”，并给主视图一个 flex:1 这将帮助您调整每个视图标签的大小和位置