使用 React Native 的 Masonry/Pinterest 列答案

【问题标题】：Masonry/Pinterest columns using React Native使用 React Native 的 Masonry/Pinterest 列
【发布时间】：2015-07-03 11:08:52
【问题描述】：

有没有办法在 React Native 中使用 flexbox 来实现 Masonry / Pinterest 样式的列？

【问题讨论】：

标签： pinterest react-native masonry

【解决方案1】：

在 React Native 中，远程图像在加载时不会调整大小（请参阅“Why not automatically resize everything”）。这似乎限制了为此使用 flexbox，因为默认情况下远程图像的大小为 0x0，并且如果您设置宽度或高度，它们不会保持纵横比，就像在网络上那样。

幸运的是，this github pull request 中有很多讨论，这导致 @paramaggarwal 做出了一些出色的工作，以生成如下所示的代码：

<View aspectRatio={1}>
  <View style={{flexDirection: 'row', flex: 1}}>
    <Image
      style={{flex: 1}}
      source={{uri: "http://edibleapple.com/wp-content/uploads/2009/11/steve-jobs-bill-gates-1991.jpg"}}
    />
    <Image
      style={{flex: 2}}
      source={{uri: "http://edibleapple.com/wp-content/uploads/2009/11/steve-jobs-bill-gates-1991.jpg"}}
    />
  </View>
  <View style={{flexDirection: 'row', flex: 1}}>
    <Image
      style={{flex: 3}}
      source={{uri: "http://edibleapple.com/wp-content/uploads/2009/11/steve-jobs-bill-gates-1991.jpg"}}
    />
    <Image
      style={{flex: 2}}
      source={{uri: "http://edibleapple.com/wp-content/uploads/2009/11/steve-jobs-bill-gates-1991.jpg"}}
    />
  </View>
</View>

并启用如下布局：

虽然这并不完全是您需要的布局，但我很确定这一更改将允许 flexbox 以更“类似于 web”的方式用于图像。根据 github，PR 已准备好在昨天（7 月 3 日）被合并，所以希望我们在发布之前看到它不会太久。

【讨论】：

惊人的回复。正是我所需要的和完美的解释。好吧，我们必须等到完成，但这确实很有希望。非常感谢。 :)
没问题，我简直不敢相信，当我查看它时，潜在的修复程序就在昨天才出现！谈好时机！
是的。我想这是最需要的功能之一。现在在 react-native 中处理图像非常困难。
刚刚注意到：PR 并没有真正合并，但它已准备好合并，并且所有 cmets 似乎都是积极的，所以希望不会太久。
我不会将制作漂亮的 Pinterest 样式布局的问题与获取 flexbox 以从 URL 中理解图像大小的问题混为一谈……如果您查看 Pinterest 应用程序，则布局是用实际加载图像数据之前的正确大小的占位符！这意味着图像的宽度和高度（或纵横比）是独立于图像本身检索的。一个强大的解决方案应该让每个项目都根据该信息自行调整大小。 Masonry / Pinterest 只是将这些项目限制在行/列中，每个都有固定的高度/宽度。

【解决方案2】：

我想在 react-native 返回网络图像的宽度/高度之前没有办法解决这个问题。 flex 似乎也没有正确包装不同高度的子元素。上方/下方有空间缩小单元格。

如果您并排使用两列并将任意高度应用于子元素，您仍然可以获得 pinterest 结果。仅适用于单一方向和设定的列数。

只是为了好玩：https://github.com/antigirl/ReactNativeFakeMasonary

【讨论】：