React Native中AsyncStorage存储的Image URI重启应用后无法加载如何解决

你当前存储到AsyncStorage的是ImagePicker返回的临时会话URI，这类URI的访问权限仅在本次应用运行周期内有效：

• iOS端：临时生成的文件URI会在应用重启后被沙盒机制回收访问权限，即使路径本身存在也无权读取
• Android端：Android 10+的分区存储规则下，单次选取返回的content:// URI是临时授权的，重启后权限自动失效

方案1：将选中的图片转存到应用私有目录，存储永久路径（推荐） #

你需要把ImagePicker返回的临时图片文件复制到应用专属的持久化存储目录，再把新的永久路径存到AsyncStorage即可：

1. 首先安装文件操作依赖react-native-fs
2. 修改图片选择逻辑的成功分支代码：

import RNFS from 'react-native-fs';

// ...其余原有代码保持不变
} else {
  console.log(response.fileName);
  const tempUri = response.uri;
  // 生成应用私有目录下的永久存储路径
  const permanentPath = `${RNFS.DocumentDirectoryPath}/${Date.now()}_${response.fileName || tempUri.split('/').pop()}`;
  
  // 把临时文件复制到永久路径
  await RNFS.copyFile(tempUri.replace('file://', ''), permanentPath);
  // 组装可直接被Image组件渲染的永久URI
  const permanentUri = `file://${permanentPath}`;

  setImageUri(permanentUri);
  try {
    // 存储永久URI而非临时URI
    await AsyncStorage.setItem('profilePicture', permanentUri);
    console.log('async storage 存储成功');
  } catch (error) {
    console.log(error);
  }
}

方案2：将图片转Base64存储 #

如果头像尺寸较小，可以直接把图片转成Base64字符串存到AsyncStorage，读取后可直接渲染，缺点是大图片会拉高存储体积、降低读写效率：

// 图片选择成功后添加转换逻辑
const base64Str = await RNFS.readFile(tempUri, 'base64');
const base64Uri = `data:image/${type};base64,${base64Str}`;
await AsyncStorage.setItem('profilePicture', base64Uri);

iOS端应用更新时沙盒根路径会自动变化，不要手动拼接绝对根路径，使用RNFS.DocumentDirectoryPath会自动适配最新的沙盒路径，无需额外处理。

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