Блог

Я использую React Native 0.63. Я хотел отображать изображения в виде плоского списка из хранилища устройств моего телефона и использовал <Image/> для renderItem поддержки FlatList. Используя source prop, я добавил uri ключ, но я все еще не могу видеть изображения. Фрагменты изображений генерируются в плоском списке, и я могу видеть тонкую полосу прокрутки справа, когда пытаюсь прокрутить список.

Это то, что я делаю для отображения изображения. ( uri Здесь используется изображение, которое я получил из CameraRoll.getPhotos() API)

 <Image
 source={{ uri: 'file:///storage/emulated/0/Pictures/Twitter/20201019_160855.jpg'}}
 style={{ height: 100, width: 100 }}
/>
  

Я убедился в следующем:

1. Разрешено READ_EXTERNAL_STORAGE и WRITE_EXTERNAL_STORAGE разрешения для приложения.
2. Добавлен file:// префикс к файлу.
3. Убедился source={{ uri: ... }} <Image/> , что работает для внешних ссылок, попробовал использовать логотип Google, случайные файлы jpeg из Интернета.

Еще одна вещь, которую я заметил, это то, что я использую телефон Samsung с Android 10 на своем устройстве, где я столкнулся с этой проблемой. Я попытался запустить это на эмуляторе Android Google Nexus 5, который также работает на Android 10 и работает отлично (под этим я подразумеваю, что я могу получить доступ к хранилищу устройств эмулятора, а не использовать то же uri самое, что указано выше).

ОБНОВЛЕНИЕ: попробовал скомпилировать приложение на Android 7, все работает нормально. Возникли проблемы с версиями SDK?

Вы получаете сообщение об ошибке «отказано в разрешении»?

Это может быть полезно: https://github.com/react-native-image-picker/react-native-image-picker/issues/1259

Что-то, что можно попробовать добавить:

 android:requestLegacyExternalStorage="true"
  

… к тегу в вашем AndroidManifest.xml .

Предупреждение:

Начиная с 5 мая 2021 года: Play Store не будет принимать эту реализацию и удалять все приложения, использующие ее, за исключением случаев, когда приложение действительно функционально требует этого и его необходимо запросить.

Для реализации потребуется использовать хранилище с ограниченной областью действия.

Правильно ли отображаются изображения в эмуляторе?

Если проблема только на вашем устройстве, вам нужно будет проверить, что вы добавили android.permission.READ_EXTERNAL_STORAGE в свое AndroidManifest.xml и запрошенное разрешение на использование хранилища файлов

См.: Использование — react-native CameraRoll

 This can be helpful: https://github.com/react-native-image-picker/react-native-image-picker/issues/1259

In manifest
 android:requestLegacyExternalStorage="true"
  
 <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:allowBackup="true"
      android:theme="@style/AppTheme"
      android:requestLegacyExternalStorage="true"
        android:usesCleartextTraffic="true"> 


  build.gradle

 // camera    
    compileSdkVersion = 29 
  

Я обнаружил, что разрешение на хранение не работает в телефоне Samsung

поэтому я добавил следующее в

android/app/src/main/AndroidManifest.xml

 <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  

Что еще более важно, это исправило мою проблему :

<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>

затем проверьте наличие разрешения как обычно, и оно будет работать

Моя конфигурация для приложения React-native

 "react": "18.1.0",
"react-native": "0.70.6",

buildToolsVersion = "31.0.0"
minSdkVersion = 22
compileSdkVersion = 33
targetSdkVersion = 33
  

Это сработало в моем случае 👍👍
Удачного взлома 😂