Как мне сопоставить массив изображений из firebase с реагирующим изображением?

Question

У меня есть массив в firebase со значениями URL-адресов изображений.

  "image" : [ "https://assets.s3.amazonaws.com/1586862746143.png", "https://onpro-assets.s3.amazonaws.com/1586862746882.png", "https://onpro-assets.s3.amazonaws.com/1586862747012.png", "https://onpro-assets.s3.amazonaws.com/1586862747587.png" ],

Я хотел бы отобразить эти изображения в моем приложении-реактиве.

Я сделал console.log(image); и он возвращает массив следующим образом.

Array [
  "https://onpro-assets.s3.amazonaws.com/1586864223105.png",
  "https://onpro-assets.s3.amazonaws.com/1586864223604.png",
  "https://onpro-assets.s3.amazonaws.com/1586864223723.png",
]

Я написал функцию карты для своего изображения следующим образом:

<Text style={styles.imageText}> Images: </Text>
image.map((x, i) => <Image
  key={i}
  style={{ borderRadius: 20, width: 100, height: 120, top: 35 }}
  source={{ uri: x }}
/>

Однако он говорит, что переменная x не может быть найдена, что я делаю неправильно?

Изображение ошибки:

Answer 1

Я думаю, что вы забыли скобки.

Попробуйте это

<Text style={styles.imageText}> Images: </Text>
{
    image.map((x, i) => (
        <Image
            key="i"
            style={{ borderRadius: 20, width: 100, height: 120, top: 35 }}
            source={{ uri: x }}
        />
    )
}