创建图像查看更多信息

Question

我想创建一个像这样的视图：

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

我想在FlatList中使用它，我的所有数据都来了，或者我只需要一个虚拟代码来实现本机中的这个功能

现在我正试图像这样实现它：

<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.gallary内部，所有缩略图都存在，数据来自道具。

Answer 1

以上详细信息中的示例代码。

内部渲染：

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

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' 
    />
  );

  

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