使用React Native的Masonry / Pinterest列

发布时间：2020-12-15 20:45:56 所属栏目：百科来源：网络整理

导读：有没有办法在React Native中使用flexbox来实现Masonry / Pinterest样式列？在React Native中,远程图像在加载时不会调整大小(请参阅“ Why not automatically resize everything”).这似乎限制了使用flexbox,因为默认情况下远程图像的大小为0x0,如果设置宽度

有没有办法在React Native中使用flexbox来实现Masonry / Pinterest样式列？

在React Native中,远程图像在加载时不会调整大小(请参阅“ Why not automatically resize everything”).这似乎限制了使用flexbox,因为默认情况下远程图像的大小为0x0,如果设置宽度或高度,它们不会像在Web上那样保持宽高比.

幸运的是,在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日)合并,所以希望它不会太长,直到我们在发布中看到它.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!