Javascript 创建图像视图显示更多信息

我想创建如下视图：

我使用的是一个平面列表，其中包含所有数据，包括这些缩略图。这个缩略图是一个对象数组，我从中获取图像的名称和显示

我想在所有数据都来自的平面列表中使用它，或者我只需要一个伪代码在react native中实现这个特性

现在，我正在尝试这样实现它：

<View style={{flexDirection:'row'}}>
            {data.gallery.map((each,index)=>{
              console.log('thubnails ******* ', each);
              <Image source={{uri: Connection.getMedia()+each.name}} style={{height:Constants.BaseStyle.DEVICE_HEIGHT/100 * 10, width:Constants.BaseStyle.DEVICE_WIDTH/100 * 10}} resizeMode='stretch' />
            })}
          </View>

{data.gallery.map（（每个，索引）=>{
console.log（'thubnails********'，每个）；
})}

---

Inside data.gallary所有缩略图都存在，数据来自道具。

上述详细信息中的示例代码

内部渲染：

  <FlatList
    data={this.props.sampleData}    // sample data should be a array of objects
    renderItem={this.renderImage}
  />

  renderImage = ({ item }) => (
    <Image source={{ uri: Connection.getMedia()+item.name }}
      style={{height:Constants.BaseStyle.DEVICE_HEIGHT/100 * 10, 
      width:Constants.BaseStyle.DEVICE_WIDTH/100 * 10}} 
      resizeMode='stretch' 
    />
  );

渲染功能：

  <FlatList
    data={this.props.sampleData}    // sample data should be a array of objects
    renderItem={this.renderImage}
  />

  renderImage = ({ item }) => (
    <Image source={{ uri: Connection.getMedia()+item.name }}
      style={{height:Constants.BaseStyle.DEVICE_HEIGHT/100 * 10, 
      width:Constants.BaseStyle.DEVICE_WIDTH/100 * 10}} 
      resizeMode='stretch' 
    />
  );

renderImage=（{item}）=>(
);

您还可以使用尺寸来获取设备高度和宽度