Masonry/Pinterest columns using React Native

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

回答1:

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.

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>

And enables layouts like this:

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.

回答2:

I guess theres no way to tackle this until react-native returns width/height for network images. Also flex doesnt seem to wrap child elements with different heights properly. Theres space above/below smallers cells.

You can still achieve a pinterest result, if you were to user two columns side by side and apply arbitrary height to child elements. Would only work for single orientation and with set number of columns.

just for fun : https://github.com/antigirl/ReactNativeFakeMasonary