Извлечение массива изображений из Firestore

#image #firebase #react-native #google-cloud-firestore #uri

#изображение #firebase #react-native #google-облако-firestore #uri

Вопрос:

Я сделал запрос, чтобы получить все поля определенного документа из Firestore. Одним из этих полей является массив изображений, взятых из хранилища Firebase. Я не знаю почему, но я не могу получить эти изображения.

РЕДАКТИРОВАТЬ: я попытался добавить abc после журнала, перед изображением, ничего не отображается.

Вот мой код:

   const [photo, setPhoto] = useState([]);

  useEffect(() => {
      handlClick();
  }, []);

  const handlClick = () => {
    var i = 0;
    setRestaurant([]);
    setPhoto([]);
    db.doc(idBranch).get().then(data => {
        const branchData = data.data();
        setRestaurant(branchData);
        const ph = branchData.Photo;
        ph.forEach(pho =>{
          setPhoto(p => [...p, pho]);
        })
    })
  }

  return (
        {photo amp;amp; photo.forEach((ph) => {
            <View>
              <Text> {console.log(ph)}</Text>
              <Image source = {{uri : ph}}/>
            </View>
        })}
  )
  

Консоль.лог верен (даже если они извлекаются более одного раза каждый и не должны этого делать), здесь изображение:
введите описание изображения здесь

Здесь структура Firestore:

введите описание изображения здесь

Пожалуйста, помогите мне понять, что я должен сделать, чтобы получить изображения.

Комментарии:

1. Попробуйте добавить стиль в <Image /> добавление стиля={{ширина: 200, высота: 200})

2. По-прежнему ничего…

3. Я не думаю, что это проблема с изображением, я редактирую вопрос, добавляю текст, но все равно ничего не отображается

Ответ №1:

Ваш функциональный компонент должен возвращать JSX, но не объект. Также вы должны использовать .map метод, если хотите отображать JSX через цикл. Попробуйте это:

 return (
   <View>
      {photo amp;amp; photo.map((ph) => (
         <View>
            <Text>{console.log(ph)}</Text>
            <Image source = {{uri : ph}}/>
         </View>
         ))
      }
   </View>
)