javascript - 创建图像 查看显示更多

Question

我想创建一个这样的 View :

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

我想在一个 FlatList 中使用它，我的所有数据都在这里，或者我只需要一个虚拟代码来在 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.gallary 中，所有缩略图都存在，数据来自 Prop 。

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

You can also use Dimensions for getting device height and width.