pinterest - 使用 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 日)合并，所以希望它不会太久，直到我们在发布中看到它。