使用 React Native 的 Masonry/Pinterest 列 [英] Masonry/Pinterest columns using React Native

问题描述

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

Is there some way to use flexbox in React Native to achieve a Masonry / Pinterest style columns?

推荐答案

在 React Native 中，远程图像不会在加载时调整大小(请参阅为什么不自动调整所有内容的大小").这似乎限制了为此使用 flexbox，因为默认情况下远程图像的大小为 0x0，并且如果您设置宽度或高度，它们不会保持纵横比，就像在网络上一样.

In React Native, remote images aren't resized upon load (see "Why not automatically resize everything"). This would seem to limit using flexbox for this, since remote images would have a size of 0x0 by default and they don't have aspect ratio maintained if you set width or height, like they would on the web.

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

Fortunately there's lots of discussion in this github pull request which led to some excellent work by @paramaggarwal to produce code that looks like this:

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

While that's not exactly the layout you need, I'm pretty sure that this change will allow flexbox to be used in a more "web-like" way with regard to images. According to the github, the PR was ready to be merged as of yesterday (3rd Jul) so hopefully it won't be too long till we see it in a release.

这篇关于使用 React Native 的 Masonry/Pinterest 列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！