React Native无法显示本地图片问题求助

以下是几个常见的排查和解决方向：

• 检查并申请存储权限
  Android 10及以下需要READ_EXTERNAL_STORAGE权限，Android 13+则需要READ_MEDIA_IMAGES权限。先在AndroidManifest.xml中添加对应权限：

  <!-- 适配Android 12及以下 -->
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <!-- 适配Android 13+ -->
  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
  

  然后在代码中运行时请求权限：

  import { PermissionsAndroid, Platform } from 'react-native';
  
  async function requestMediaPermission() {
    const permission = Platform.Version >= 33
      ? PermissionsAndroid.PERMISSIONS.READ_MEDIA_IMAGES
      : PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE;
  
    const granted = await PermissionsAndroid.request(permission, {
      title: "访问媒体文件权限",
      message: "需要读取您设备中的图片文件",
      buttonPositive: "允许"
    });
  
    return granted === PermissionsAndroid.RESULTS.GRANTED;
  }
  

• 给Image组件设置宽高样式
  React Native的Image组件必须显式设置width和height，否则无法渲染出图片：

  <Image
    source={{
      uri: 'file:///storage/emulated/0/WhatsApp/Media/WhatsApp Images/IMG-20230525-WA0009.jpg',
    }}
    style={{ width: 300, height: 300, resizeMode: 'contain' }}
  />
  

• 验证文件路径有效性
  可以借助react-native-fs库检查文件是否真实存在：

  1. 先安装依赖：npm install react-native-fs --save
  2. 编写检查代码：

  import RNFS from 'react-native-fs';
  
  async function checkImagePath() {
    const filePath = '/storage/emulated/0/WhatsApp/Media/WhatsApp Images/IMG-20230525-WA0009.jpg';
    const exists = await RNFS.exists(filePath);
    console.log('图片文件是否存在:', exists);
    // 如果存在，还可以打印文件大小确认
    if (exists) {
      const stats = await RNFS.stat(filePath);
      console.log('文件大小:', stats.size);
    }
  }
  

• 处理Android媒体库索引问题
  如果是刚接收的WhatsApp图片，可能还没被系统媒体库索引完成，直接通过文件路径访问（在权限到位的情况下）是最直接的方式，无需等待索引。

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