Реагировать Native - Dynamic Image Source

Question

Я пытаюсь петлю через SOURCE массив с помощью метода карты, но я получаю эту ошибку:

Unknown named module: '../images/one.jpeg'

Кто-нибудь знает, почему это происходит? Путь файла в require определенно правильный.

var SECTIONS = [ 
    { 
    title: 'One', 
    fileName: 'one.jpeg', 
    }, 
    { 
    title: 'Two', 
    fileName: 'two.jpeg', 
    }, 
    { 
    title: 'Three', 
    fileName: 'three.jpeg', 
    }, 
    { 
    title: 'Four', 
    fileName: 'four.jpeg', 
    }, 
]; 


{SECTIONS.map((section, i) => (
    <CategoryCard 
    key={i} 
    source={require(`../images/${section.fileName}`)} 
    title={section.title} 
    /> 
))} 

Answer 1

попытаться открыть файл в отдельном браузере, используя прямой URL-то вроде

http://<><>/imgages/one.jpg

Вы также можете сделать что-то подобное, а также:

Один рабочий пример для отображения динамических изображений с использованием реакции:

Example Click Here

Answer 2

Я не думаю, что это возможно, потому что реагировать на родной язык нужно знать, что связывать раньше времени (AFAIK). Тем не менее, вы можете require все файлы в вашем массиве:

var SECTIONS = [ 
    { 
    title: 'One', 
    file: require('../images/one.jpeg'), 
    }, 
    { 
    title: 'Two', 
    file: require('../images/two.jpeg'), 
    }, 
    { 
    title: 'Three', 
    file: require('../images/three.jpeg'), 
    }, 
    { 
    title: 'Four', 
    file: require('../images/four.jpeg'), 
    }, 
]; 


{SECTIONS.map((section, i) => (
    <CategoryCard 
    key={i} 
    source={section.file} 
    title={section.title} 
    /> 
))} 

Answer 3

Получено рабочее решение, хотя оно не рекомендуется для больших изображений, отлично работает для (большого количества) небольших изображений.

Шаги:

1. Преобразовать значок (ей) base64 строки (строк).
2. Создайте файл JSON с именем файла как ключи и строки base64 в качестве значений. (Вы также можете хранить данные о них в местной базе данных).

, например. ImageData.json

{

"icon1": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQ.......==", 
"icon2": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQ.......==" 

}

3.Import файл JSon в том месте, где требуется изображения динамически.

например.

const imageData = require("./images/ImageData.json") 

4: Получить/сгенерировать ключ/имя файла во время выполнения. и получить источник изображения.

например.

const imageSrc = imageData[keyname] 

5: Генерировать изображение динамически во время выполнения.

например.

<Image style={{ width: 70, height: 70, resizeMode: Image.resizeMode.contain }} source={ uri: imageSrc } /> 

Done ..

Extra .. Письменное сценарий помощник питона для автоматизации создания JSON файла.

import base64 
import os 

directory = os.fsencode('.') 

with open('ImagesData.json', 'wb') as jsonFile: 
    jsonFile.write(bytes('{', 'utf-8')) 

    written = False 

    for file in os.listdir(directory): 
     filename = os.fsdecode(file) 

     if filename.endswith('.png'): 
      with open(filename, "rb") as image_file: 
       if written: 
        jsonFile.write(bytes(',\n','utf-8')) 
       encoded_string = base64.b64encode(image_file.read()) 
       jsonFile.write(bytes(('"' +filename+ '":'), 'utf-8')) 
       jsonFile.write(bytes('"data:image/png;base64,', 'utf-8') + encoded_string + bytes('"', 'utf-8')) 
       written = True 

    jsonFile.write(bytes('}', 'utf-8')) 

1. Скопируйте скрипт в папку и запустить скрипт (требуется питона 3.6).
2. Файл json будет создан с именем изображения в качестве ключа и base64 в качестве значений.
3. Скопируйте файл для его проецирования и использования (после этого вы можете удалить изображения).
4. Используйте файл json, как указано выше.

Answer 4

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

var SECTIONS = { 
    One: { 
    title: 'One', 
    file: require('../images/one.jpeg'), 
    }, 
    Two: { 
    title: 'Two', 
    file: require('../images/two.jpeg'), 
    }, 
    Three: { 
    title: 'Three', 
    file: require('../images/three.jpeg'), 
    }, 
    Four: { 
    title: 'Four', 
    file: require('../images/four.jpeg'), 
    }, 
}; 


{SECTIONS.map((section, i) => (
    <CategoryCard 
    key={i} 
    source={section.file} 
    title={section.title} 
    /> 
))} 

Таким образом, вы можете просто использовать файлы, и если у вас есть какое-то динамический выбор изображения, вы можете просто использовать что-то вроде этого

<Image source={SECTIONS[image.type]} />