Изображения не отображаются при запуске из APK

Question

Эта проблема относится к Android.

Мы недавно перенесли наш реактивный проект из Экспо в рабочий процесс . Однако у нас есть проблема, из-за которой изображения не загружаются при запуске встроенного файла apk.

При отладке на эмуляторе или устройстве с использованием react-native android все работает нормально. Однако на встроенном apk изображения просто не появляются.

Наша сборка выполняется следующим образом

react-native bundle --platform android /
     --dev false /
     --entry-file index.js 
     --bundle-output android/app/src/main/assets/app.bundle 
     --assets-dest android/app/src/main/res
android/gradlew -p android clean
android/gradlew -p android assembleRelease

Я вижу, что первый шаг связывает наши изображения в следующую директорию

android/app/src/main/res/drawable-mdpi

Структура проекта выглядит следующим образом

index.js
App.js
   ios/
   android/
   app/
      assets/
         package.json
         images/
            image01.png
            image02.png
      screens/
         MyScreen.js

app/assets/package.json, что позволяет нам избегать абсолютных путей, содержит

{ 
   "name": "@assets" 
}

и в MyScreen. js мы имеем , в методе render()

   <Image source={require('@assets/images/image01.png')} />

Распаковка встроенного apk (app-release.apk) Я вижу, что на изображения ссылаются в файле MANIFEST.MF

/release/app-release/META-INF

примерно так

Name: res/drawable-mdpi-v4/app_assets_images_image01.png
SHA-256-Digest: [BLAH]

Name: res/drawable-mdpi-v4/app_assets_images_image02.png
SHA-256-Digest: [BLAH]

в пределах release/app-release/res/drawable-mdpi-v4

изображения присутствуют и имеют то же имя, что и манифест.

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

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

Версия Gradle = 5. 6,3

RN версия = 61,5

Answer 1

Таким образом, решение затронет только тех, кто выбрасывает свой проект из Экспо в чистый рабочий процесс. Прикрепив обработчик onError к изображению, мы заметили, что сообщение имеет вид

/data/user/0/[OUR_NAMESPACE]/files/.expo-internal/drawable-mdpi
/image001.png (No such file or directory)

Таким образом, проблема заключается в том, что путь был увеличен, чтобы он указывал на .expo-internal, несмотря на выполнение пустого рабочего процесса. Я видел, как комментатор описывает Экспо как сумасшедшую бывшую девушку, от которой, похоже, не избавишься. Хар sh, мы любим Экспо, однако я могу полностью видеть, откуда он.

Мы использовали только один пакет из @expo модуля, являющегося @expo/vector-icons, потому что он не дал нам ничего заметного беда. Но достаточно уверенный переход на react-native-vector-icons устранил проблему.

Для тех, кто сталкивается с похожими проблемами, переходя на чистый рабочий процесс из теплого лона Экспо, убедитесь, что вы не тянете какие-либо модули из @expo. С другой стороны, унимодули, начинающиеся с expo-[MODULE_NAME], должны быть абсолютно безопасны.

Answer 2

Можете ли вы показать код, где вы отображаете ваше Изображение ?

А также вы можете опубликовать изображение вашей структуры папок?

Потому что путь к файлам не одинаковы в зависимости от того, работаем ли мы в отладке или в выпуске.