React Native Image URI не работает

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

<Image 
    source={{uri:'../../assets/img_src/BTI.jpg'}}
    style={{height:150,width:150}}
/>

мой компонент контейнера, кажется, получает высоту и ширину, но изображение не загружается. Так что я пробую это

<Image 
    source={require('../../assets/img_src/BTI.jpg')}
    style={{height:150,width:150}}
/>

Это работает очень хорошо, к сожалению, насколько я знаю, я не могу использовать эту реализацию, если я хочу сначала манипулировать адресным файлом и сохранить его в переменной. Пример:

const imgSrc = `../../assets/${data.image}`;

где data.image = 'img_src/BTI.jpg'. Я пытаюсь удалить все данные на моем симуляторе Android в студии Android, но результат все тот же. Я делаю что-то неправильно? Есть ли лучшая реализация для этого?

Большое спасибо :)


react-native android react-native-image
person Irvan    schedule 27.03.2017    source источник
comment
Вы имеете в виду, что не можете использовать source={require(imgSrc)}?   -  person Hariks    schedule 27.03.2017
comment
Похоже, это происходит из-за того, что вы пытаетесь включить актив, используя имя переменной в качестве источника. Принятый здесь ответ дает некоторое представление о том, почему это не работает: stackoverflow.com/questions/30854232/   -  person QMFNP    schedule 27.03.2017
comment
@Hariks да, появится сообщение об ошибке   -  person Irvan    schedule 28.03.2017

Ответы (1)


arrow_upward
13
arrow_downward

Невозможность require() динамического пути является предполагаемым поведением React Native, упаковщик должен знать пути заранее — см. Реагирование на нативные проблемы

У нас была эта проблема в нашем проекте, мы хранили URL-адреса изображений в нашей БД и хотели объединить строки в приложении, чтобы получить путь к локально сохраненному изображению. Как вы обнаружили, это не работает. Вы можете найти наш обходной путь полезным.

В нашей папке /images мы создали новый файл images.js, который просто экспортировал объект, ключи которого сопоставлялись со всеми нашими локальными путями к изображениям, например:

  export const Images = {
    image1: require('./image1.png'),
    image2: require('./image2.png'),
    image3: require('./image3.png'),
  };

Теперь упаковщик заранее знал все пути и был счастлив. Затем мы добавили imageKey к элементу БД и использовали его, а не абсолютный путь. Чтобы получить изображение, мы просто сделали

import { Images } from '../images/images';
// get your image key e.g. passed down through props
const img = Images[imageKey];

...
render() {
    ...
    <Image source={img} />
    ...
}

Может не соответствовать вашему точному варианту использования, но, надеюсь, вы сможете его использовать.

person drjimmie1976    schedule 27.03.2017
comment
У меня была такая же проблема в моем проекте, поэтому я попробовал решение @drjimmie1976, и оно сработало отлично, я только изменил имя файла на index.js в папке /images, поэтому я могу назвать его короче, как import { Images } from '../images';, но по-другому точно так же, как сказал @drjimmie1976. - person rodrigogiraudo; 18.05.2019