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

72

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

我不断收到类似的错误：

使用显式设置的width / height渲染视图，但flexBasis设置为0。（这可以通过将flex：更改为flexGrow来解决：）

有人可以解释flex: 1vs与之间的区别flexGrow: 1。如果我将一个或另一个应用于视图，它似乎在做不同的事情，但是不应该这样做吗？

react-native  flexbox  flex-grow 
— 开发01
source
它仅应用CSS属性，因此您可以看看有关flex和flex-grow之间差异的问题
— GillesC
1
谢谢。问题是，它与CSS不同，对吗？在CSS Flex中：在React Native中不仅仅是一个数字。比较React Native Flexbox和CSS FlexBox时，您知道异常是什么吗？
— Dev01 '17
从未使用过React Native，仅使用过React，并且它通常不会对style属性做任何令人惊奇的事情，它只是将属性分配为CSS属性。但是我还没有检查代码。我想比较的一个很好的基础是在React Native中创建一个页面，并使用纯CSS创建一个页面，这两个页面都生成相同的标记并比较结果。
— GillesC '17

Answers:

193

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

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>;
}

这是上述代码的屏幕截图：

屏幕截图2

flex: 0 （默认）

  • flex: 0
    • 元素占用内容的大小。根据文档，应该通过设置width和height道具来调整大小，但如果未设置内容，则似乎适合内容。
  • flex: 0, flexBasis: {{px}}
    • 元素的大小为 flexBasis
  • flex: 0, flexGrow: 1
    • 与flex: 0和flexGrow: 1; 与将内容的大小（在上面的示例中为）与设置为的元素的大小相加相同flex: 1。类似于flex: 1, flexBasis: 10添加像素大小，而不是添加像素大小。
  • flex: 0, flexShrink: 1
    • 使用flex: 0和flexShrink: 1，元素似乎占用内容的大小，换句话说，它与just相同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值为flex: 0。如果不添加flex样式值，则默认为0。
  • 故障排除提示：如果您试图弄清为什么某些东西未按您的预期显示，请从（大多数）父元素开始，并确保为孩子们留出足够的空间来做他们需要做的事情。换句话说，尝试将其设置为flex：1，看看是否有帮助，然后转到下一个孩子并重复。
  • 似乎width总是与flexDirection: "column"其他flex道具一起考虑。这同样适用于height用flexDirection: "row"。
  • 运行这些测试后，一般我会用flexBasis了height，因为flexBasis王牌height。
— 开发01
source
4
这个答案显然是缺少有关本机Flex的文档。谢谢。
— Soorena
你是我的救主...;）
— vicke4'9
React Native中Flex的出色解释。万分感谢。
— javeedishaq
那么flex：-1呢？到目前为止最好的解释。
— 伯纳德
您的“观察”部分非常有帮助，谢谢。
— ror
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.