使用react-native-scoped-storage获取的content://图片如何在React Native渲染？

React Native的Image组件原生支持加载content://开头的URI，你只需要直接将其传入source属性即可，以下是具体实现步骤和注意事项：

基础实现代码 #

直接把获取到的URI赋值给Image组件的source对象的uri字段，同时设置合适的宽高样式：

import React from 'react';
import { View, Image } from 'react-native';

export default function App() {
  // 从react-native-scoped-storage获取的图片URI
  const imageUri = "content://com.android.externalstorage.documents/tree/primary%3AAndroid%2Fmedia%2Fcom.whatsapp%2FWhatsApp%2Fmedia%2F.Statuses/document/primary%3AAndroid%2Fmedia%2Fcom.whatsapp%2FWhatsApp%2Fmedia%2F.Statuses%2Fimages.jpeg";

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Image
        source={{ uri: imageUri }}
        style={{ width: 300, height: 300, resizeMode: 'cover' }}
        // 可选：添加错误回调方便调试
        onError={(err) => console.log('图片加载失败:', err.nativeEvent.error)}
      />
    </View>
  );
}

关键注意事项 #

• 权限验证：确保你已经通过react-native-scoped-storage的API（比如DirectoryPicker）获取到目标文件夹的访问权限，没有权限的话图片会加载失败
• 样式设置：必须给Image组件设置明确的宽高，否则图片不会显示
• 编码URI处理：你拿到的URI中的%3A、%2F是URL编码后的字符，React Native会自动解析，无需手动解码
• 批量渲染：如果是多个图片，将URI存入数组后用map循环渲染即可：

// 示例：批量渲染图片
const imageUris = [/* 你的URI数组 */];

return (
  <View style={{ flex: 1, flexWrap: 'wrap', flexDirection: 'row' }}>
    {imageUris.map((uri, index) => (
      <Image
        key={index}
        source={{ uri }}
        style={{ width: 150, height: 150, margin: 5 }}
      />
    ))}
  </View>
);

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