React-Native 填充 space

Question

我的应用程序中有一些视图，

first 和 last 有固定的尺寸，但中间的视图我会填充剩余的 space。
我该怎么做？

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。这将填充剩余的 space。

<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 这将帮助您调整每个视图标签的大小和位置

React-Native 填充 space

React-Native fill space

react-native

react-native-flexbox