flex vs flexGrow vs flexShrink vs React Native中的flexBasis？

Question

我终于升级反应原产于0.42,其中包括引入的flexGrow,flexShrink和 flexBasis以及如何改变(或固定)flex被呈现.

我一直收到如下错误:

视图使用显式设置的宽度/高度进行渲染,但使用0 flexBasis.(这可以通过改变flex来修复:到flexGrow :)查看:

有人可以解释flex: 1vs 之间的区别flexGrow: 1.如果我将一个或另一个应用于View,它似乎做了不同的事情,但不应该这样做吗？

Answer 1

以下是一些需要考虑的测试代码:

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, flexGrow: 1, flexBasis: 10, backgroundColor: "purple"}}><Text>flex: 0, flexGrow: 1, flexBasis: 10 (90px)</Text></View>
        <View style={{flex: 0, flexShrink: 1, flexBasis: 10, backgroundColor: "gray"}}><Text>flex: 0, flexShrink: 1, 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, flexBasis: 10, backgroundColor: "cornsilk"}}><Text>flex: 1, flexBasis: 10 (90px)</Text></View>
        <View style={{flex: 1, flexGrow: 1, backgroundColor: "red"}}><Text>flex: 1, flexGrow: 1 (80px)</Text></View>
        <View style={{flex: 1, flexShrink: 1, backgroundColor: "green"}}><Text>flex: 1, flexShrink: 1 (80px)</Text></View>
        <View style={{flex: 1, flexGrow: 1, flexBasis: 10, backgroundColor: "aqua"}}><Text>flex: 1, flexGrow: 1, flexBasis: 10 (90px)</Text></View>
        <View style={{flex: 1, flexShrink: 1, flexBasis: 10, backgroundColor: "pink"}}><Text>flex: 1, flexShrink: 1, flexBasis: 10 (90px)</Text></View>
    </View>;
}

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

添加width和height:

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, width: 700, height: 20 (20px)</Text></View>

        <View style={{flex: 0, flexBasis: 10, width: 700, height: 20, backgroundColor: "brown"}}><Text>flex: 0, flexBasis: 10, width: 700, height: 20 (10px with 7px hidden below the next element)</Text></View>
        <View style={{flex: 0, flexGrow: 1, width: 700, height: 20, backgroundColor: "orange"}}><Text>flex: 0, flexGrow: 1, width: 700, height: 20 (90px)</Text></View>
        <View style={{flex: 0, flexShrink: 1, width: 700, height: 20, backgroundColor: "tan"}}><Text>flex: 0, flexShrink: 1, width: 700, height: 20 (20px)</Text></View>
        <View style={{flex: 0, flexGrow: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "purple"}}><Text>flex: 0, flexGrow: 1, flexBasis: 10, width: 700, height: 20 (80px)</Text></View>
        <View style={{flex: 0, flexShrink: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "gray"}}><Text>flex: 0, flexShrink: 1, flexBasis: 10, width: 700, 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, width: 700, height: 20, backgroundColor: "blue"}}><Text>flex: 1, width: 700, height: 20 (70px)</Text></View>

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

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

flex: 0 (默认)

• flex: 0
  • 元素占用内容的大小.根据文档,它应该通过设置width和height道具大小,但如果没有设置它似乎适合内容.
• flex: 0, flexBasis: {{px}}
  • 元素采用给定的大小 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, flexBasis: {{px}}.
• flex: 0, height: {{px}}
  • 用flex: 0,height就像对待一样flexBasis.如果同时存在height和flexBasis设置,height则忽略.

flex: 1

• flex: 1
  • 元素占用空间.有关详细信息,请参阅布局道具文档
• 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, flexGrow: 1, flexBasis: {{px}}
  • 这是一样的flex: 1, flexBasis: {{px}},因为flexGrow被忽略.
• flex: 1, flexShrink: 1, flexBasis: {{px}}
  • 这是一样的flex: 1, flexBasis: {{px}},因为flexShrink被忽略.
• flex: 1, height: {{px}}
  • 随着flex: 1,height被忽略了.请flexBasis改用.

以下是我的观察:

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