在 iOS 上， React Native 远程 GIF 图片保存到相册后变成了静态图片

[xyxc0673]

最近有个需求，需要把服务器上的 GIF 图片保存到系统相册中，但是我在尝试了几种方式后，发现保存后的 GIF 图片都变成了静态图片。

我新建了一个新的 RN 项目来模拟这样的情况

"dependencies": {
    "@react-native-community/cameraroll": "^1.7.2",
    "react": "16.11.0",
    "react-native": "0.62.2",
    "react-native-fs": "^2.16.6",
    "rn-fetch-blob": "^0.12.0"
  }

尝试过以下几种方式

• 直接使用 cameraroll 保存到相册，这种方式是不行的，在 issues 中有人提到过
  CameraRoll.saveToCameraRoll saves animated gif as static images

const img = 'https://i.loli.net/2020/05/28/YKaCdO1pexuThbN.gif'
CameraRoll.saveToCameraRoll(img);

• react-native-fs 下载图片到临时目录，再保存到相册中

const img = 'https://i.loli.net/2020/05/28/YKaCdO1pexuThbN.gif'
const storeLocation = `${RNFS.TemporaryDirectoryPath}`;
const pathName = `${new Date().getTime()}_babycam_moji.gif`;
const downloadPath = `${storeLocation}${pathName}`;
const ret = RNFS.downloadFile({
  fromUrl: img,
  toFile: downloadPath,
});
ret.promise.then((res) => {
  console.log('res', res);
  if (res && res.statusCode === 200) {
    const promise = CameraRoll.saveToCameraRoll(
      `file://${downloadPath}`,
    );
    promise.then(() => {});
  } else {
  }
});

• 使用 rn-fetch-blob 下载图片到临时目录，再保存到相册中

RNFetchBlob.config({appendExt: 'gif', fileCache: true})
  .fetch('GET', img)
  .then((res) => {
  console.log('res', res.path());
  CameraRoll.saveToCameraRoll(res.path());
});

以上的方法我都尝试过，但保存后的 GIF 图片还是变成静态图片。

[tanranran]

试试用三方软件查看，看看能不能播放

[xyxc0673]

@tanranran 我用 Airdrop 传到笔记本上，还是一样，静态的

[liutao1998]

现在有个 pr 修复了，但是还没 merge 过去