使用React Native的Masonry / Pinterest列

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以更像“网络”的方式用于图像。根据github的说法，PR已经准备好在昨天（7月3日）合并，所以希望它不会太长，直到我们在发布中看到它。

Answer 2

我猜是没有办法解决这个问题，直到react-native返回网络图像的宽度/高度。 flex也似乎没有正确地包装不同高度的子元素。 Theres空间高于/低于较小的细胞。

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

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