存储在 react-native-fs 中的图像不显示

Question

我尝试使用 react native 和 react-native-fs 库将图像保存到文档目录（而不是缓存），但我得到一张空白照片。

const localPath = (image) => {
    console.log("Cache directory path is ", image)
    const fileName = image.split('/').pop();
    console.log('Filename is ',fileName)
    const newPath =  'file://' + RNFS.DocumentDirectoryPath + '/' + fileName;
    console.log(newPath)

    // write the file
    RNFS.writeFile(newPath, image, 'base64')
      .then((success) => {
        console.log('IMG WRITTEN!');
        console.log(newPath)
      })
      .catch((err) => {
        console.log(err.message);
      });
    return newPath
  }

所以我想用这个newPath

<Image style={styles.image} source={{ uri: newPath }} />

但是出现一张空白的照片.....如果我通过原来的路径，然后显示照片。

Answer 1

好吧，以下解决方案对我有用。您必须使用 react-native-image-base64 package

将照片编码为 base64 格式

import ImgToBase64 from 'react-native-image-base64';
const localPath = (image) => {
    console.log("Cache directory path is ", image)
    const fileName = image.split('/').pop();
    console.log('Filename is ', fileName)
    const newPath = 'file://' + RNFS.DocumentDirectoryPath + '/' + fileName;
    console.log(newPath)

    // write the file
    ImgToBase64.getBase64String(image)
      .then(base64String =>

        RNFS.writeFile(newPath, base64String, 'base64')
          .then((success) => {
            console.log('IMG WRITTEN: ', newPath);
          })
          .catch((err) => {
            console.log(err.message);
          }))

      .catch((err) => {
        console.log(err.message);
      });
    return newPath
  }

Answer 2

如果 image 是文件路径，只需使用 copyFile 方法

const localPath = (image) => {
    console.log('Cache directory path is ', image)
    const fileName = image.split('/').pop();
    console.log('Filename is ', fileName)
    const newPath = `${RNFS.DocumentDirectoryPath}/${fileName}`; // You don't really need the `'file://` prefix
    console.log(newPath);

    // COPY the file
    RNFS.copyFile(image, newPath)
      .then((success) => {
        console.log('IMG COPIED!');
        console.log(newPath);
      })
      .catch((err) => {
        console.log(err.message);
      });

    return newPath
  }

还有一个 moveFile 可以用来移动文件而不是复制

writeFile用于向文件写入内容

备注

您用来复制图像的函数和 return newPath 不是异步的 - 它会立即 return newPath - 可能在复制图像之前到文档目录 - 如果 <Image> 试图在文件实际存在之前加载它，这可能会导致问题。

我只会return newPath 图像实际复制后

const localPath = async (image) => {
  const newPath = `${RNFS.DocumentDirectoryPath}/${fileName}`;

  await RNFS.copyFile(image, newPath);

  return newPath;
}

// usage
const uri = await localPath(image);

存储在 react-native-fs 中的图像不显示

Image stored in react-native-fs doesnt show

react-native

react-native-fs

备注