React native relative image path loading

Question

Я пытаюсь использовать некоторые изображения в своем проекте, основанном на реакции.

Мой проект имеет следующую структуру:

./index.android.js 

./images/icon.png 

Я пытаюсь загрузить изображение в представлении в index.android.js:

<View> 
     <Image 
      source={require('./images/icon.png')} 
      style={styles.icon} 
     /> 
</View> 

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

Что я делаю неправильно? Я использую native-native 0.15.0, используя мобильное устройство для тестирования.

Update:

Так что я нашел это в моем файле build.gradle для моего приложения:

* // where to put drawable resources/React Native assets, e.g. the ones you use via 
* // require('./image.png')), in debug mode 
* resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 

Мои изображения не являются в этой папке. Полагаю, это проблема?

Answer 1

Вы используете Windows? Я столкнулся с этой же проблемой, и она оказалась ошибкой в ​​packager/react-packager/src/Bundler/index.js с тем, как создается путь URL-адреса ресурса. Он использует модуль path для преобразования пути локального файла к URL-адресу, но модуль path возвращает пути с собственными разделителями путей. В Windows вы получаете недопустимые пути URL из-за путей, имеющих обратную косую черту, а не косые черты. Быстрое исправление заключается в том, чтобы заменить обратную косую черту косой чертой.

Подробнее см. Файл diff в моем запросе на тягу.

https://github.com/facebook/react-native/pull/4416/files

Update: запрос Мой тянуть был принят и выпущен с версией 0.17.