react-native – flex vs flexGrow vs flexShrink vs React Nati

render() {
    return <View style={{flex: 1,backgroundColor: "cornflowerblue"}}>
        <View style={{backgroundColor: "chartreuse"}}><Text>Nothing (17px)</Text></View>

        <View style={{flex: 0,backgroundColor: "yellow"}}><Text>flex: 0 (17px)</Text></View>

        <View style={{flex: 0,flexBasis: 10,backgroundColor: "brown"}}><Text>flex: 0,flexBasis: 10 (10px)</Text></View>
        <View style={{flex: 0,flexGrow: 1,backgroundColor: "orange"}}><Text>flex: 0,flexGrow: 1 (97px)</Text></View>
        <View style={{flex: 0,flexShrink: 1,backgroundColor: "tan"}}><Text>flex: 0,flexShrink: 1 (17px)</Text></View>
        <View style={{flex: 0,backgroundColor: "purple"}}><Text>flex: 0,flexBasis: 10 (90px)</Text></View>
        <View style={{flex: 0,backgroundColor: "gray"}}><Text>flex: 0,flexBasis: 10 (10px with 7px hidden below the next element)</Text></View>

        <View style={{flex: 1,backgroundColor: "blue"}}><Text>flex: 1 (80px)</Text></View>

        <View style={{flex: 1,backgroundColor: "cornsilk"}}><Text>flex: 1,flexBasis: 10 (90px)</Text></View>
        <View style={{flex: 1,backgroundColor: "red"}}><Text>flex: 1,flexGrow: 1 (80px)</Text></View>
        <View style={{flex: 1,backgroundColor: "green"}}><Text>flex: 1,flexShrink: 1 (80px)</Text></View>
        <View style={{flex: 1,backgroundColor: "aqua"}}><Text>flex: 1,backgroundColor: "pink"}}><Text>flex: 1,flexBasis: 10 (90px)</Text></View>
    </View>;
}

以下是上述代码的屏幕截图：

增加宽度和高度：

render() {
    return <View style={{flex: 1,backgroundColor: "cornflowerblue"}}>
        <View style={{flex: 0,backgroundColor: "orange"}}><Text>flex: 0 (17px)</Text></View>
        <View style={{flex: 0,width: 700,height: 20,backgroundColor: "yellow"}}><Text>flex: 0,height: 20 (20px)</Text></View>

        <View style={{flex: 0,height: 20 (10px with 7px hidden below the next element)</Text></View>
        <View style={{flex: 0,height: 20 (90px)</Text></View>
        <View style={{flex: 0,height: 20 (20px)</Text></View>
        <View style={{flex: 0,height: 20 (80px)</Text></View>
        <View style={{flex: 0,height: 20 (10px with 7px hidden below the next element)</Text></View>

        <View style={{flex: 1,backgroundColor: "orange"}}><Text>flex: 1 (70px)</Text></View>
        <View style={{flex: 1,backgroundColor: "blue"}}><Text>flex: 1,height: 20 (70px)</Text></View>

        <View style={{flex: 1,height: 20 (80px)</Text></View>
        <View style={{flex: 1,height: 20 (70px)</Text></View>
        <View style={{flex: 1,height: 20 (80px)</Text></View>
    </View>;
}

以下是上述代码的屏幕截图：

flex：0(默认)

> flex：0

>元素占用内容的大小.根据documentation,它应该通过设置宽度和高度道具来确定大小,但如果没有设置,它似乎适合内容.

> flex：0,flexBasis：{{px}}

> Element采用flexBasis给出的大小

> flex：0,flexGrow：1

>使用flex：0和flexGrow：1;它与将内容的大小(在上面的示例中为a)添加到设置为flex的元素的大小相同：1.它类似于flex：1,flexBasis：10,除了不添加像素数量’添加内容的大小.

> flex：0,flexShrink：1

>使用flex：0和flexShrink：1,元素似乎取内容的大小,换句话说它只是flex：0.我敢打赌,有些情况下它会比内容更大但是我还没有看到.

> flex：0,flexGrow：1,flexBasis：{{px}}

>这与flex：0,flexGrow：1相同,但不是将内容大小添加到flex：1元素,而是添加给定的像素数.

> flex：0,flexShrink：1,flexBasis：{{px}}相同.

> flex：0,身高：{{px}}

>使用flex：0,高度被视为与flexBasis一样.如果同时设置了height和flexBasis,则忽略height.

flex：1

> flex：1

>元素占用空间.有关详细信息,请参见Layout Props documentation

> flex：1,flexBasis：{{px}}

>使用flex：1和flexBasis：{{px}}; flexBasis的值被添加到元素的大小.换句话说,就像采用flex：1元素并添加flexBasis设置的像素数.因此,如果flex：1元素是50px,并且您添加了flexBasis：20,则元素现在将为70px.

> flex：1,flexGrow：1

>忽略了

> flex：1,flexShrink：1

>忽略了

> flex：1,flexBasis：{{px}}

>这与flex：1,flexBasis：{{px}}相同,因为忽略了flexGrow.

> flex：1,因为忽略了flexShrink.

> flex：1,身高：{{px}}

>使用flex：1,忽略高度.请改用flexBasis.

以下是我的观察：

>故障排除提示：确保父视图为孩子们提供成长/缩小的空间.请注意父视图上的flex：1,如果没有它,则所有子项都不会显示为您所期望的.>故障排除提示：测试这些值时不要使用热重新加载,重新加载几次后,它可能会错误地显示元素.我建议启用Live Reload或使用命令r(很多).>默认弹性值为flex：0.如果未添加弹性样式值,则默认为0.>故障排除提示：如果你试着弄清楚为什么某些东西没有像你认为的那样显示,那么从(大多数)父元素开始,确保它为孩子提供足够的空间来做他们需要做的事情.换句话说,尝试将其设置为flex：1并查看是否有帮助,然后转到下一个孩子并重复.>似乎宽度总是考虑使用flexDirection：“column”,无论其他flex道具.这同样适用于flexDirection的高度：“row”.>运行这些测试后,一般情况下我会使用flexBasis而不是高度,因为flexBasis胜过身高.