Masonry/Pinterest 列使用 React Native

Question

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

Answer 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-like" 的方式使用。根据 github，从昨天（7 月 3 日）开始，PR 已准备好合并，所以希望我们在发布中看到它不会太久。

Answer 2

我想没有办法解决这个问题，直到 react-native returns width/height 用于网络图像。 flex 似乎也没有正确包装具有不同高度的子元素。有 space above/below 变小的单元格。

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

纯属娱乐：https://github.com/antigirl/ReactNativeFakeMasonary

Masonry/Pinterest 列使用 React Native

Masonry/Pinterest columns using React Native

pinterest

masonry

react-native