React native 创建一个自定义文件夹并使用 react-native-crop-picker android 保存照片

Question

我正在使用react-native-image-crop-picker。我想将照片保存到图库或使用react-native-image-crop-picker 从相机拍摄的自定义文件夹中。通常从react-native-image-crop-picker 拍摄的照片保存在缓存文件夹中。我想将其更改为自定义文件夹并使用自动生成的名称在图库中显示图像，例如 第一张照片 - p1.jpg，第二张照片 - p2.jpg， 有什么办法可以实现它。

const takePhotoFromCamera = () => {
        ImagePicker.openCamera({
            width: 300,
            height: 400,
            cropping: true,
            includeBase64: true,
            freeStyleCropEnabled: true,
            compressImageQuality: 0,
            enableRotationGesture: true,
          }).then(image => {
            console.log(image);
          });
          
        console.warn('Take photo');
     }

react-native-image-crop-picker这是我用的

Answer 1

您可以使用rn-fetch-blob - writeFile method 实现这一目标

下面是结合react-native-image-crop-picker和rn-fetch-blob实现上述功能的示例

import {PermissionsAndroid} from 'react-native';
import ImagePicker from 'react-native-image-crop-picker';
import RNFetchBlob from 'rn-fetch-blob';

const imageCropper = () => {
  ImagePicker.openCamera({
    cropping: true,
    mediaType: 'photo',
    includeBase64: true,
  }).then((imageData) => {
    const base64Data = imageData.data;
    const fileName = getUniqueFileName('jpg');
    writeFileToStorage(base64Data, fileName);
  });
};

const getUniqueFileName = (fileExt) => {
  //It is better naming file with current timestamp to achieve unique name
  var d = new Date();
  var year = d.getFullYear();
  var month = d.getMonth() + 1;
  var date = d.getDate();
  var hour = d.getHours();
  var minute = d.getMinutes();
  var fileName = 'IMG' + year + month + date + hour + minute + '.' + fileExt;
  return fileName;
};

const writeFileToStorage = async (base64Data, fileName) => {
  try {
    const result = await PermissionsAndroid.request(WRITE_EXTERNAL_STORAGE);
    if (result == PermissionsAndroid.RESULTS.GRANTED) {
      const dirs = RNFetchBlob.fs.dirs;
      var folderPath = dirs.SDCardDir + '/Custom Folder/';
      var fullPath = folderPath + fileName;

      RNFetchBlob.fs.mkdir(folderPath).then((res) => {
        console.log('res', res);
      });

      RNFetchBlob.fs.writeFile(fullPath, base64Data, 'base64').then((res) => {
        console.log('file saved :', res);
      });
    } else {
      console.log('Permission Not Granted');
    }
  } catch (err) {
    console.log(err);
  }
};