React Native 使用相关库实现图片预览时Android端无法正常预览

安卓端react-native-file-viewer图片预览失败解决步骤 #

1. 正确配置Android FileProvider

该问题90%以上是FileProvider未配置导致，react-native-file-viewer依赖该组件实现跨应用文件访问，安卓系统没有该配置会直接拒绝第三方应用读取文件。
在android/app/src/main/AndroidManifest.xml的<application>节点内添加如下配置：

<provider
  android:name="com.vinzscam.reactnativefileviewer.FileProvider"
  android:authorities="${applicationId}.fileprovider"
  android:exported="false"
  android:grantUriPermissions="true">
  <meta-data
    android:name="android.support.FILE_PROVIDER_PATHS"
    android:resource="@xml/file_viewer_provider_paths" />
</provider>

如果项目已经配置了其他自定义FileProvider，可将react-native-file-viewer的路径规则合并到现有provider paths配置文件中即可。

2. 显式指定MIME类型

安卓系统对文件打开的MIME类型校验严格，调用打开方法时不要省略该参数，示例代码如下：

import FileViewer from 'react-native-file-viewer';
import RNFS from 'react-native-fs';

// 安卓建议将需要外部打开的文件存放在缓存目录或公共外部存储目录
const targetPath = `${RNFS.CachesDirectoryPath}/preview.png`;

FileViewer.open(targetPath, {
  mimeType: 'image/png', // jpg格式替换为image/jpeg即可
  showOpenWithDialog: true
})
.catch(e => console.log('打开失败错误信息：', e));

3. 提前申请存储权限

根据适配的安卓版本申请对应权限，未授权情况下调用文件打开接口会直接报错：

• 安卓13及以上：申请READ_MEDIA_IMAGES权限
• 安卓10-12：申请READ_EXTERNAL_STORAGE权限

4. 校验文件存储路径

不要将需要外部打开的文件存放在app私有沙箱的内部存储目录，优先使用RNFS.CachesDirectoryPath、RNFS.ExternalStorageDirectoryPath等可被其他应用访问的路径存放待预览的文件。 #

内容的提问来源于stack exchange，提问作者Phearak