如何在 React-Native 上的 MasonryList 中循环图像

Question

我有一个包含照片 URL 的数组。

如何在 masonryList 中显示这个数组？？

我会从数据库中检索照片来源

  images = [
{
  images: {
    uri:
      'https://luehangs.site/pic-chat-app-images/beautiful-blond-blonde-hair-478544.jpg',
  },
},
{
  images: {
    uri:
      'https://luehangs.site/pic-chat-app-images/beautiful-blond-fishnet-stockings-48134.jpg',
  },
},];

  render() {
return (
  <MasonryList
    itemSource={['node', 'image']}
    images={[
      {
        node: this.images.map((prop, key) => {
          return this.images[prop.images];
        }),
      },
    ]}
  />
  // <Text></Text>
);

} }

Answer 1

这有帮助吗？：

processImagesForMasony(inputImages) {
    var _newArray = inputImages.map(({images}) => {
         return images.uri;
    });

    this.setState({
        imagesForMasonry: _newArray
    });
}

<MasonryList
    images={this.state.imagesForMasonry} 
/>

然后您可以在收到源数组/它更新时使用您的源数组调用processImagesForMasony。

Answer 2

已解决 我为我的照片数据创建了一个 js 文件。像这样?

    const data = [
  {
    uri:
      'https://stimg.cardekho.com/images/carexteriorimages/360x240/Ferrari/Ferrari-Portofino/047.jpg',
  },
  {
    uri: 'https://rollr.io/wp-content/uploads/2017/02/mini-home-car.jpg',
  },
  {
    uri:
      'https://www.bmw-speedmotorwagen.in/sites/default/files/styles/nostyle/public/slider_banner_image/2018-02/M4Coupe-Header_Banner_17.jpg?itok=zmJWURhi',
  },
  {
    url:
      'https://img.etimg.com/thumb/msid-67103187,width-1200,height-900,resizemode-4,imgsize-96644/car-getty.jpg',
  },
  {
    uri:
      'https://hips.hearstapps.com/amv-prod-cad-assets.s3.amazonaws.com/vdat/submodels/dodge_challenger_dodge-challenger_2019-1545059179866.jpg',
  },
  {
    uri:
      'https://luehangs.site/pic-chat-app-images/beautiful-blond-blonde-hair-478544.jpg',
  },
];
export default data;

然后导入到我使用这些数据的地方。

import data from './data';

class HomeScreen extends Component {
  render() {
    return <MasonryList images={data} />;
  }
}