如何将在线获取的头像图片本地保存以支持离线访问？

我通过URL从服务器获取用户头像，当前实现代码如下：

<Image
    source={
      profilePictureUrl !== ''
        ? {uri: API_URL + '/' + profilePictureUrl}
        : PROFILE_DEFAULT
    }
    style={{width: 200, height: 200, borderRadius: 100}}
  />

请问如何将该图片保存到设备中，以便用户离线时也能访问？

根据项目类型（Expo 或裸 React Native 项目），提供两种落地实现：

方案1：Expo 项目（使用 Expo File System） #

1. 安装依赖

npx expo install expo-file-system @react-native-async-storage/async-storage

2. 编写图片保存与读取逻辑

import * as FileSystem from 'expo-file-system';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useState, useEffect } from 'react';
import { Image } from 'react-native';

// 保存头像到应用私有目录
const saveProfileImage = async (imageUrl) => {
  if (!imageUrl) return;
  const localPath = `${FileSystem.documentDirectory}profile_avatar.jpg`;
  
  try {
    await FileSystem.downloadAsync(imageUrl, localPath);
    await AsyncStorage.setItem('savedAvatarPath', localPath);
    return localPath;
  } catch (err) {
    console.error('头像保存失败:', err);
    return null;
  }
};

// 组件内使用示例
const ProfileAvatar = ({ profilePictureUrl, PROFILE_DEFAULT }) => {
  const [localAvatarPath, setLocalAvatarPath] = useState('');

  // 初始化时读取本地缓存，无缓存则主动下载
  useEffect(() => {
    const fetchLocalAvatar = async () => {
      const savedPath = await AsyncStorage.getItem('savedAvatarPath');
      if (savedPath) setLocalAvatarPath(savedPath);
      
      if (!savedPath && profilePictureUrl) {
        const newPath = await saveProfileImage(API_URL + '/' + profilePictureUrl);
        if (newPath) setLocalAvatarPath(newPath);
      }
    };
    fetchLocalAvatar();
  }, [profilePictureUrl]);

  return (
    <Image
      source={
        localAvatarPath
          ? { uri: localAvatarPath }
          : profilePictureUrl
            ? { uri: API_URL + '/' + profilePictureUrl }
            : PROFILE_DEFAULT
      }
      style={{ width: 200, height: 200, borderRadius: 100 }}
    />
  );
};

方案2：裸 React Native 项目（使用 react-native-fs） #

1. 安装依赖并配置

npm install react-native-fs @react-native-async-storage/async-storage
# iOS 需执行
cd ios && pod install && cd ..

安卓10及以下需在android/app/src/main/AndroidManifest.xml添加权限：

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

2. 编写图片保存与读取逻辑

import RNFS from 'react-native-fs';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useState, useEffect } from 'react';
import { Image } from 'react-native';

// 保存头像到应用私有目录
const saveProfileImage = async (imageUrl) => {
  if (!imageUrl) return;
  const localPath = `${RNFS.DocumentDirectoryPath}/profile_avatar.jpg`;
  
  try {
    const downloadResult = await RNFS.downloadFile({
      fromUrl: imageUrl,
      toFile: localPath,
    }).promise;
    
    if (downloadResult.statusCode === 200) {
      await AsyncStorage.setItem('savedAvatarPath', localPath);
      return localPath;
    }
  } catch (err) {
    console.error('头像保存失败:', err);
    return null;
  }
};

// 组件内使用示例（和Expo方案一致）
const ProfileAvatar = ({ profilePictureUrl, PROFILE_DEFAULT }) => {
  const [localAvatarPath, setLocalAvatarPath] = useState('');

  useEffect(() => {
    const fetchLocalAvatar = async () => {
      const savedPath = await AsyncStorage.getItem('savedAvatarPath');
      if (savedPath) setLocalAvatarPath(savedPath);
      
      if (!savedPath && profilePictureUrl) {
        const newPath = await saveProfileImage(API_URL + '/' + profilePictureUrl);
        if (newPath) setLocalAvatarPath(newPath);
      }
    };
    fetchLocalAvatar();
  }, [profilePictureUrl]);

  return (
    <Image
      source={
        localAvatarPath
          ? { uri: localAvatarPath }
          : profilePictureUrl
            ? { uri: API_URL + '/' + profilePictureUrl }
            : PROFILE_DEFAULT
      }
      style={{ width: 200, height: 200, borderRadius: 100 }}
    />
  );
};

关键注意事项 #

• 权限说明：上述方案将图片保存到应用私有目录，无需申请相册访问权限；若需保存到系统相册，需额外申请对应权限并调整保存路径。
• 更新机制：可通过对比服务器头像的ETag或更新时间戳，定期检查是否需要重新下载最新头像。
• 错误处理：下载失败时自动 fallback 到网络图片或默认图，避免界面空白。

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