React-Native 0.63 无法访问 Android 10 中的设备存储映像答案

【问题标题】：React-Native 0.63 not able to access Device Storage images in Android 10React-Native 0.63 无法访问 Android 10 中的设备存储映像
【发布时间】：2021-02-04 00:40:03
【问题描述】：

我正在使用 React Native 0.63。我想在手机设备存储中的 FlatList 中显示图像，并使用 <Image/> 作为 FlatList 的 renderItem 属性。使用 source 道具，我添加了一个 uri 键，但我仍然无法看到图像。图像图块正在 FlatList 中生成，当我尝试滚动列表时，我能够看到右侧的细滚动条。

这就是我正在做的显示图像。（这里使用的uri 是我从CameraRoll.getPhotos() API 获得的图像）

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

我已经确定了以下几点：

允许应用程序拥有READ_EXTERNAL_STORAGE 和WRITE_EXTERNAL_STORAGE 权限。
为文件添加了file:// 前缀。
确保<Image/> 中的source={{ uri: ... }} 可用于外部链接，尝试使用Google 徽标、来自互联网的随机jpeg。

我注意到的另一件事是，我在遇到此问题的设备上使用的是装有 Android 10 的三星手机。我尝试在 Google Nexus 5 Android Emulator 上运行它，它也可以在 Android 10 上运行并且运行良好（通过这个，我的意思是我能够访问模拟器的设备存储，而不是使用上面指定的完全相同的 uri）。

更新： 尝试在 Android 7 上编译应用程序，上面的东西工作正常。 SDK 版本有任何问题吗？

【问题讨论】：

标签： android image react-native android-emulator

【解决方案1】：

您是否收到权限被拒绝错误？

这可能会有所帮助： https://github.com/react-native-image-picker/react-native-image-picker/issues/1259

要尝试添加的内容：

android:requestLegacyExternalStorage="true"

...到您的 AndroidManifest.xml 中的标签。

警告：

从 2021 年 5 月 5 日起： Play 商店将不接受此实施并移除所有使用它的应用，除非应用在功能上确实需要它并且需要请求。

实现将需要使用 Scoped Storage。

【讨论】：

是的，添加这个有效。另外，需要再做一个改动，在项目build.gradlew文件中，你需要把你的compileSdkVersion改成29。
添加到上面的评论，没有这样的权限被拒绝错误。这主要是Android 10的问题，您需要添加android:requestLegacyExternalStorage="true"才能访问外部存储。

【解决方案2】：

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

【讨论】：

【解决方案3】：

模拟器上显示的图像是否正确？

如果问题仅出现在您的设备上，您需要检查您是否已添加 android.permission.READ_EXTERNAL_STORAGE 到您的 AndroidManifest.xml 并请求使用文件存储的权限

见：Usage - react-native CameraRoll

【讨论】：

1.是的，图像正确显示在模拟器上。 2. 我添加了 READ 和 WRITE External Storage 权限，并在 App Info 部分启用。