迭代以显示图像

Question

所以，我有一个 Map 数据结构，其中地图的值包含图像 uri。我只想显示 Map.

中的所有图像

这是我尝试过的：

<View style={styles.container}>
{[...imagesMap.values()].map(myImg => {
        const source = {uri: myImg.uri};

        <Image
          style={{
            width: 50,
            height: 50,
            position: 'absolute',
            left: 62,
            top: 26,
          }}
          source={source}
        />;
      })}
</View>

当运行它时，屏幕显示空白。但是如果我只显示一张图片而不遍历地图，就像这样：

<View style={styles.container}>
   
      <Image
          style={{
              width: 50,
              height: 50,
              position: 'absolute',
              left: 62,
              top: 26,
            }}
              source={{uri: 'https://www.example.com/photo/1'}}
            />
  
    </View>

然后，上面的单张图片出现在屏幕上。使用的 uri 字符串来自 imagesMap.

的一个值

我还查看了imagesMap中每个图像uri字符串的值，它们都是有效的。为什么迭代 imagesMap 显示图像显示空白屏幕但显示单个图像有效？我的意思是风格一模一样，图片来源都是有效的...

Answer 1

您没有return从您的地图中获取任何内容，这就是您得到空白屏幕的原因。添加一个 return 语句，它将按预期工作，并且当您使用绝对位置时，更好地改变位置。

<View style={styles.container}>
{[...imagesMap.values()].map(myImg => {
        const source = {uri: myImg.uri};

        return (<Image
          style={{
            width: 50,
            height: 50,
            position: 'absolute',
            left: 62,
            top: 26,
          }}
          source={source}
        />);
      })}
</View>

迭代以显示图像

Iterate over to show images

react-native

react-native-image