React native 反应本机填充空间

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

第一个和最后一个有固定的尺寸，但中间的视图我会填满剩余的空间。
我该怎么做

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>

let probableView=（！someVariable）？空：（）；
...
{probableView}
答案是添加flex=1。这将填满剩余的空间

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

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

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


{probableView}
//加在这里
我建议您在主视图标记内的每个视图标记中使用“flex”，并为主视图提供一个flex:1
这将帮助您调整每个视图标记的大小和位置
使用Flex:1或以%为单位添加高度