React Native 保存 App 内图片到本地

2018年1月17号。

开篇先吐槽下,这么简单的事情本以为搜搜谷歌然后从 react-native-fs 或者 react-native-fetch-blob 的相关文档里复制粘贴3-5行代码搞定
结果硬是搞了半个小时+ (没跟踪具体花了多久时间,起码半小时)

需求

有一张微信公众号的二维码图片(叫 wechat.jpg),
保存在 React Native 项目中。

App 里有一个页面显示了这个二维码,
现在需要的功能是用户点击这个二维码图片后,把二维码图片保存到本地。
图片已经在 App 内部了,这里没必要发网络请求

解决方法

注:这个方案针对 Android。iOS 我没试。

第一步

把图片复制一份到 /android/app/src/main/assets/wechat.jpg
这个路径是 Android Assets Folder。

第二步:测试文件是否存在

RNFS.existsAssets('wechat.jpg').then((result) => console.log(result));

第三步:保存二维码图片文件到手机

import RNFetchBlob from 'react-native-fetch-blob';
import RNFS from'react-native-fs';

  let dirs = RNFetchBlob.fs.dirs
  const file_path = dirs.DCIMDir + '/' + 'wechat.jpg';
  RNFS.copyFileAssets('wechat.jpg', file_path)
  .then(() => {
    RNFetchBlob.fs.scanFile([{ path: file_path }])
  })
  .catch((error) => console.log(error));
React Native 保存 App 内图片到本地
Share this

Subscribe to 1c7 的博客