Как загрузить изображения из res / drawable-folder в ReactNative-App?

Я хотел бы отображать статические изображения из res / drawable-folder в ReactNative-App. Тем не менее, ничего не отображается.

У меня есть следующая структура папок в подпапке Android:

macbook:CompanyApp hagen$ tree android/app/src/main/res/
android/app/src/main/res/
├── drawable
│   ├── a1456.jpg
│   └── a1457.jpg
├── mipmap-hdpi
│   └── ic_launcher.png
├── mipmap-mdpi
│   └── ic_launcher.png
├── mipmap-xhdpi
│   └── ic_launcher.png
├── mipmap-xxhdpi
│   └── ic_launcher.png
└── values
    ├── strings.xml
    └── styles.xml

6 directories, 8 files

Как упомянуто в документации, я пытаюсь загрузить файлы изображений из drawable-folder с помощью следующего кода:

<Image source={{uri: 'a1456'}} style={{width: 140, height: 140}} />

Я также попробовал имя файла вместе с расширением:

<Image source={{uri: 'a1456.jpg'}} style={{width: 140, height: 140}} />

а также:

<Image source={require('image!a1456')} style={{width: 140, height: 140, backgroundColor: 'yellow'}} />

И я попробовал подпапку:

<Image source={{uri: 'drawable/a1456.jpg'}} style={{width: 140, height: 140}} />

Изображение не будет отображаться. Например, использование оператора require в источнике изображения для локального изображения в моей текущей папке работает нормально.

Но я ищу решение для потребления нарисованных изображений, как в реальном приложении для Android.

ОБНОВИТЬ

Я только что опубликовал пример проекта на github:https://github.com/itinance/testdrawable

Это стандартное RN-приложение с «init-native init» и просто добавленное изображение для отображения в drawable-папке (только для Android).

Может кто-то взглянуть на это и сказать мне, что я делаю не так?

Ответы на вопрос(5)

затем вы можете добавить этот код. Это работает для меня.<Image style={styles.imageStyle} source={ { uri: icon + `${Platform.OS === 'ios' ? '.jpg' : ''}` }} />

Пример структуры проекта - мое приложение называется MyProject

Myproject
├── ios
├── android
├── resource  //folder for static content
    └── image.png

Использовать изображение, находящееся в каталоге ресурсов

<Image style={{width: 16, height: 16}} source={require('./resource/image.png') }  />

Надеюсь, это поможет!

 Dlucidone04 июл. 2016 г., 13:28
Вы можете сделать это, используя компонент размеров, чтобы получить ширину и высоту устройства и передать изображение по мере необходимости.
 itinance04 июл. 2016 г., 09:42
Как написано в моем вопросе, я уже знаю, как загружать локальные изображения, как вы это делали :) Вопрос был именно в том, как использовать изображения, помещенные в drawable-папки, с размерами, зависящими от устройства, такими как hdpi, ldpi и так далее, особенно на Android.

Я тоже пытаюсь это сделать. Я использую RN 0.47.1 - причина, по которой я этого хочу, заключается в том, что я хочу, чтобы экран «загрузки» и моя целевая страница имели изображение в том же месте, поэтому я хочу, чтобы изображение загружалось мгновенно.

Мгновенная загрузка: добавление ресурса в папку в моих js-упакованных каталогах требует времени для его загрузки. Поэтому я подумал, что, если я поместил его в «res / drawable» (для Android), он уже должен быть загружен, так как он просто использовал его для заставки. Я обнаружил, что это правда, однако есть моргание, я пытаюсь избежать этого моргания.

Однако вот официальные документы о том, как загрузить локальные изображения на Android и iOS -facebook.github.io :: React Native - изображения из ресурсов гибридного приложения

Если вы создаете гибридное приложение (некоторые пользовательские интерфейсы в React Native, некоторые пользовательские интерфейсы в коде платформы), вы все равно можете использовать изображения, которые уже встроены в приложение.

Для изображений, включенных в каталоги ресурсов Xcode или в папку для рисования Android, используйте имя изображения без расширения:

<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />

Для изображений в папке ресурсов Android используйте ресурс: / схема:

<Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40, height: 40}} />

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

Так что да, ваше открытие необходимости устанавливать ширину / высоту - это правда. В последней версии RN (я использую 0.47.1) мы не можем установить реквизиты ширины / высоты, это должно быть сделано черезstyle.

Решение Вопроса

<image> Тэгу нужны конкретные аргументы "ширина" и "высота" как атрибуты, а не только как параметр стиля.

Имея это в виду, обе декларации будут работать отлично:

  <Image width={200} height={267} source={{uri: 'img_3665'}} style={{width: 200, height: 267}} />
  <Image width={200} height={267} source={require('image!img_3665')} style={{width: 200, height: 267}} />
 Noitidart10 авг. 2017 г., 17:23
Также не работает для меня. Когда я устанавливаю ширину / высоту, это дает мне предупреждение и подсказывает, чтобы я придал ему стиль.
 Anil Sharma02 июл. 2017 г., 10:34
Это решение не работает для меня. Я скопировал свое изображение в папку для рисования и пытаюсь получить доступ обоими способами, но это не работает. С помощью<Image width={200} height={267} source={require('image!img_3665')} style={{width: 200, height: 267}} /> Я получаю 500 ошибок от менеджера пакетов, говоря, что образ модуля! Img_3665 не найден
 Noitidart30 сент. 2018 г., 19:23
Вы знаете, как загрузить изображение из папки mdpi? Не из папки для рисования?

import {Platform, StyleSheet, Text, View, Image} из'act-native ';

Добавьте тег изображения в блоке возврата рендера. Атрибут источника в теге Image, где мы указываем местоположение изображения. Также мы добавили встроенный стиль к тегу Image, который помогает установить размер изображения в соответствии с шириной устройства. Для изображений в папке ресурсов Android используйте ресурс: / схема

Ваш ответ на вопрос