redux-persist：应用重启后Image组件无法显示图片URI问题排查

你遇到的问题核心非常明确：你通过ImagePicker获取的content://类型URI是带临时访问权限的，应用重启后系统会回收这个权限，导致即使redux-persist帮你保存了URI，App也无法再访问对应图片。redux-persist本身没有问题，它只是忠实地存储了你给的数据，问题出在存储的URI本身不具备持久有效性。

为什么会这样？ #

Android和iOS系统为了隐私安全，当你通过系统相册选择图片时，只会给当前App临时的访问权限。这个权限在App进程存活期间有效，一旦App被杀死重启，系统就会收回这个权限，这时原来的content://URI就变成了无权限访问的无效路径。

解决办法：将图片复制到App私有目录，存储持久路径 #

最稳妥的方案是把选择的图片复制到App的私有存储目录，然后存储这个私有路径——因为App对自己的私有目录拥有永久访问权限，重启后也能正常加载。

步骤1：安装文件操作库（比如react-native-fs） #

我们需要一个库来处理文件复制，这里用react-native-fs为例：

npm install react-native-fs --save
# 或者用yarn
yarn add react-native-fs

步骤2：修改你的_avatarClicked方法 #

把选择的图片复制到App的Documents目录，然后存储这个新路径：

import RNFS from 'react-native-fs';

_avatarClicked() {
  ImagePicker.launchImageLibrary({}, async (response) => {
    if (response.didCancel) {
      console.log('annulation')
    } else if (response.errorCode) {
      console.log('error')
    } else {
      // 定义目标路径：App私有Documents目录下的avatar.jpg
      const destPath = `${RNFS.DocumentDirectoryPath}/avatar.jpg`;
      try {
        // 把临时路径的图片复制到私有目录
        await RNFS.copyFile(response.uri, destPath);
        // 存储私有目录的路径（注意加上file://前缀，React Native Image组件需要）
        const avatarSource = { uri: `file://${destPath}` };
        const action = { type: 'SET_AVATAR', value: avatarSource };
        this.props.dispatch(action);
      } catch (err) {
        console.error('复制图片失败:', err);
      }
    }
  })
}

步骤3：验证重启后的加载 #

现在当你重启App时，redux-persist存储的是App私有目录的路径，App拥有永久访问权限，图片就能正常显示了。

额外注意事项 #

• 如果你的App需要支持多头像或者避免覆盖旧图片，可以给文件名加上时间戳（比如avatar_${Date.now()}.jpg），防止文件被覆盖。
• 对于之前已经存储的无效content://URI，你可以在App启动时做判断：如果加载的URI是content://开头，就提示用户重新选择头像，或者自动尝试复制到私有目录（不过后者需要额外处理权限问题）。
• iOS和Android的私有目录路径处理基本一致，react-native-fs会帮你适配不同平台的路径差异。

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