Использование базы данных Firebase JSON для хранения пути к файлу img внутри ресурсов вашего проекта - React Native

Question

Здравствуйте, коллеги-программисты,

Я новичок, пытающийся подать заявку для академических целей. Меня попросили изменить мой подход к добавлению изображений, который в настоящее время таков:

          <ImagesLayoutComponent
            imageSource={require('../../assets/hwaseongfortress.jpg')}
            title="Hwaseong Fortress - Gyeonggi-do"
          />

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

{
    "unesco": {
        "siteone": "require('../../assets/hwaseongfortress.jpg')"
    }
}

Это то, что у меня есть:

import React, {useState} from 'react';
import { Text, StyleSheet, View, Image, ScrollView, Linking } from 'react-native';
import ImagesLayoutComponent from '../components/ImagesLayoutComponent';
import ImageHeaderComponent from '../components/ImageHeaderComponent';
import * as firebase from 'firebase';

const EstablishmentsScreen = () => {

  // Variables responsible for handling state of a variable
  const [unescoSiteOne, setUnescoSiteOne] = useState('');
  // Database references, snapshots of data, storing them on the useState setter variables
  const database = firebase.database();
  database.ref('unesco/siteone').once("value").then(function (snapshot) { setUnescoSiteOne(snapshot.val()) });

  console.log(unescoSiteOne);


  return (
    <View style={{ flex: 1 }}>
      <View style={{ flex: 0.65 }}>
        <ImageHeaderComponent
          imageSource={require('../../assets/nationalfolkmuseum.jpg')}
          header="UNESCO World Heritage Sites" />
      </View>

        {/* SCROLL VIEW CONTAINER*/}
        <ScrollView style={{ flex: 1, flexDirection: 'column' }}>

          <ImagesLayoutComponent
            imageSource={unescoSiteOne}
            title="Hwaseong Fortress - Gyeonggi-do"
          />

        </ScrollView>

    </View>
  )
};

const styles = StyleSheet.create({
  headerText: {
    fontSize: 25,
    fontWeight: 'bold',
    color: '#ffffff',
    textAlign: 'center'
  },
  topImageStyle: {
    flex: 1,
    height: null,
    resizeMode: 'cover',
    width: null,
  },
  dishesImagesStyle: {
    flex: 1,
    height: null,
    resizeMode: 'contain',
    width: null,
  },
  dishesTextStyle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#67cdf5',
    textAlign: 'center'
  }
});


export default EstablishmentsScreen;

Обратите внимание, что вывод console.log - это именно то, что я ищу , который является:

require('../../assets/nationalfolkmuseum.jpg')

Но изображение не появляется, и он выдает мне предупреждение. Предупреждение: Ошибка типа проп: неверный проп source предоставлен для Image

Я попытался использовать интерполяцию строк, изменив путь в базе данных, чтобы не иметь требуемой части, и вручную добавить ее в imageSource следующим образом:

imageSource={require(`${unescoSiteOne}`)}

Но это также вызвало у меня ошибку ... У меня заканчиваются идеи здесь. Имейте в виду, я делаю это только потому, что мой учитель попросил меня выполнить это, если бы я мог. Но я боюсь, что не смог справиться после исследования подобных вопросов здесь: /

Заранее спасибо, что нашли время, чтобы прочитать это!

Да, кстати, это ImageLayoutComponent:

import React from 'react';
import { Text, StyleSheet, View, Image, Button, TouchableOpacity } from 'react-native';

const ImagesLayoutComponent = ({ imageSource, title, urlLink }) => {


  return (
    <View style={styles.container}>
      <View style={styles.imageDishesContainer}>
        <Image
          style={styles.imageDishesStyles}
          source={imageSource}
        />
      </View>
      <View style={styles.imageDescriptionContainer}>
        <Text style={styles.imageDescriptionText}>{title}</Text>
        <TouchableOpacity>
        <View style={styles.googleButtonContainer}>
          <Text style ={styles.googleTextStyle}onPress={urlLink}>Open on Google</Text>
        </View>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1, 
    flexDirection: 'row', 
    borderBottomWidth: 2,
    borderBottomColor: '#ff8cb1',
  },
  imageDishesContainer: {
    flex: 1, 
    flexDirection: 'column' 
  },
  imageDishesStyles: {
    flex: 1,
    height: null,
    resizeMode: 'stretch',
    width: null,
  },
  imageDescriptionContainer: {
    flex: 1, 
    flexDirection: 'column',
    borderLeftWidth: 1, 
    borderLeftColor: '#ff8cb1',
  },
  imageDescriptionText: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#ADADAD',
    textAlign: 'center',
    marginTop: 6
  }, 
  googleButtonContainer: {
    backgroundColor: '#ffc382', 
    marginRight: 30, 
    marginLeft: 30, 
    marginTop: 6, 
    marginBottom: 8, 
    borderWidth: 2, 
    borderRadius: 20, 
    borderColor: '#ffc382', 
  }, 
  googleTextStyle: {
    textAlign: 'center', 
    fontWeight: 'bold', 
  }, 
});

export default ImagesLayoutComponent;