React Native使用Image组件显示本地图片失败问题求助

以下是针对「控制台能打印图片file://路径，但Image组件无法显示」问题的排查和解决步骤：

1. 确认权限配置与授权 #

虽然能获取到图片路径，但可能缺少读取图库的权限导致图片无法加载：

• iOS配置：在Info.plist中添加权限描述：

  <key>NSPhotoLibraryUsageDescription</key>
  <string>需要访问您的相册以展示图片</string>
  

• Android配置：在AndroidManifest.xml中添加对应权限：

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

• 代码中请求权限：调用getAllPhotos前先申请权限：

  import { PermissionsAndroid, Platform } from 'react-native';
  
  const requestPhotoPermission = async () => {
    if (Platform.OS === 'android') {
      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;
    }
    return true; // iOS会自动触发权限弹窗
  };
  
  // 调用方式：
  const fetchPhotos = async () => {
    const hasPermission = await requestPhotoPermission();
    if (hasPermission) getAllPhotos();
  };
  

2. 为Image组件添加resizeMode属性 #

默认的图片缩放模式可能导致图片无法适配容器，显式设置resizeMode：

<Image
  source={{uri: item.node.image.uri}}
  style={{ width: '95%', height: '95%' }}
  resizeMode="cover" // 可选值：contain、stretch，根据需求选择
/>

3. 验证图片路径有效性 #

用Image.getSize检查路径是否可正常访问，排查路径错误或权限问题：

import { Image } from 'react-native';

// 在renderItem中添加
Image.getSize(item.node.image.uri, 
  (width, height) => console.log('图片可正常加载，尺寸：', width, height),
  (err) => console.log('图片加载失败：', err.message)
);

4. 为FlatList添加keyExtractor #

缺少唯一key可能导致FlatList渲染异常，添加keyExtractor：

<FlatList
  data={images}
  numColumns={2}
  keyExtractor={(item) => item.node.image.uri} // 用图片uri作为唯一标识
  renderItem={({item}) => {
    // ... 原有渲染代码
  }}
/>

5. 确认状态更新正确 #

在getAllPhotos的回调中打印获取到的数据，确保item.node.image.uri存在且格式正确：

.then((r: any) => {
  const data = r.edges;
  console.log('获取到的图片数据：', data);
  setImages(data);
})

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