迭代以显示图像答案

【问题标题】：Iterate over to show images迭代以显示图像
【发布时间】：2020-11-17 21:46:38
【问题描述】：

所以，我有一个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 显示图像显示空白屏幕但显示单个图像有效？我的意思是风格完全一样，图片来源都是有效的……

【问题讨论】：

标签： react-native react-native-image

【解决方案1】：

你没有从你的地图返回任何东西，这就是你得到一个空白屏幕的原因。添加一个 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>

【讨论】：