使用带有 flexWrap 的容器内部空间（React-Native）时，儿童溢出

Question

刚刚注意到在 React-Native 上使用 flexWrap 时出现了一个非常奇怪的行为，并且希望得到一些帮助以了解是否有任何解释。

总结：

我有一个使用 flexWrap 的水平容器，有两个垂直的子容器，每个容器里面有两个正方形。正方形有不同的高度。如果我在水平容器中使用 flexWrap 在垂直子容器中使用 space-between，则子容器会溢出。如果我删除 flexWrap，一切正常。

这个问题不会发生在 react-native-web 上，但会发生在 Android 和 iOS 上。

博览会代码：https://snack.expo.dev/fHKKvLlew

• 没有flexWrap（预期行为，正常工作）

    <View style={{ backgroundColor: 'purple', flexDirection: 'row' }}>
      <View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
        <View style={{ backgroundColor: 'red', height: 100, width: 100 }} />
        <View style={{ backgroundColor: 'green', height: 100, width: 100 }} />
      </View>
      <View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
        <View style={{ backgroundColor: 'blue', height: 150, width: 100 }} />
        <View style={{ backgroundColor: 'yellow', height: 150, width: 100 }} />
      </View>
    </View>

• 使用flexWrap（意外行为）

    <View style={{ backgroundColor: 'purple', flexDirection: 'row', flexWrap: 'wrap' }}>
      <View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
        <View style={{ backgroundColor: 'red', height: 100, width: 100 }} />
        <View style={{ backgroundColor: 'green', height: 100, width: 100 }} />
      </View>
      <View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
        <View style={{ backgroundColor: 'blue', height: 150, width: 100 }} />
        <View style={{ backgroundColor: 'yellow', height: 150, width: 100 }} />
      </View>
    </View>

鉴于仍有大量可用空间，任何人都知道为什么使用 flexWrap 时结果不一样？为什么孩子会溢出？

似乎是一个错误（特别是因为它在网络上运行良好）。如果是这样，是否有任何可能导致类似结果的解决方法的想法？

Answer 1

我使用 codesandbox 测试代码，但无法重现问题：

也许是其他时候导致了问题。

编辑：

如前所述，这种行为仅发生在 react native 移动端，而不适用于 react native web，解决此问题的一种方法是添加：

alignItems: 'flex-start'

正如this 帖子中所述：

由于性能调整 flexWrap: wrap 不再与 alignItems: 'stretch' （默认值）一起使用。如果您使用 flexWrap: wrap，您可能还需要添加 alignItems: 'flex-start' 样式。

所以要复制您的配置，您可以尝试：

<View style={{ alignItems: "flex-start", backgroundColor: 'purple', flexDirection: 'row', flexWrap: 'wrap' }}>
  <View style={{ alignSelf: "stretch", borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
    <View style={{ backgroundColor: 'red', height: 100, width: 100 }} />
    <View style={{ backgroundColor: 'green', height: 100, width: 100 }} />
  </View>
  <View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
    <View style={{ backgroundColor: 'blue', height: 150, width: 100 }} />
    <View style={{ backgroundColor: 'yellow', height: 150, width: 100 }} />
  </View>
</View>