在Flex React Native中，flex vs flexGrow vs flexShrink vs flexBasis？

Question

我最终将本机版本恢复为0.42，其中包括引入flexGrow，flexShrink和flexBasis以及如何呈现flex的更改（或修复）。

我一直收到如下错误：

  

使用显式设置的宽度/高度渲染视图，但使用0 flexBasis。 （这可以通过改变flex来修复：到flexGrow :)查看：

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

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
  • 元素占用内容的大小。根据{{​​3}}，它应该通过设置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
  • 元素占用可用空间。有关详细信息，请参阅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, 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或使用命令 + r （很多）。
• 默认弹性值为flex: 0。如果您没有添加flex样式值，则默认为0。
• 故障排除提示：如果您正在尝试找出为什么某些内容不会像您认为的那样显示，请从（大多数）父元素开始并确保它与＆＃为他们的孩子提供足够的空间来做他们需要做的事情。换句话说，尝试将其设置为flex：1并查看是否有帮助，然后转到下一个孩子并重复。
• 无论其他弹力道具如何，似乎width始终与flexDirection: "column"一起考虑。这同样适用于height flexDirection: "row"。
• 运行这些测试后，我会flexBasis使用height，因为flexBasis胜过height。