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

Question

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

如何在砖石列表中显示此数组？

我将从数据库中检索照片源

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} 
/>

然后，您可以在收到源数组/IT 更新时调用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} />;
}
}