React-Native中如何获取文件资源图片的绝对路径？

Question

我正在使用React Native在iOS上进行图像处理。

问题是我正在使用的一个库只支持绝对路径，但我只有文件资产URI。

例如：

我有：

assets-library://asset/asset.HEIC?id=CE542E92-B1FF-42DC-BD89-D61BB70EB4BF&ext=HEIC

我需要：

file:///Users/USERNAME/Library/Developer/CoreSimulator/Devices/########-####-####-####-############/data/Containers/Data/Application/########-####-####-####-############/Documents/########-####-####-####-############.jpg

有没有简单的方法来获取图片的绝对路径？

- Oscar Franco

Answer 1

根据@ospfranco的回答，我最终做的是将资产保存在临时文件夹中。还包括一个小片段来生成一个随机字符串作为文件名。

import RNFS from 'react-native-fs';

getAssetFileAbsolutePath = async (assetPath) => {
    const dest = `${RNFS.TemporaryDirectoryPath}${Math.random().toString(36).substring(7)}.jpg`;

    try {
      let absolutePath = await RNFS.copyAssetsFileIOS(assetPath, dest, 0, 0);
      console.log(absolutePath)
    } catch(err) {
      console.log(err)
    } 
  }

- Brunno Vodola Martins

Answer 2

因为图片可能未存储在设备上（可能在iCloud上），所以你只得到了一个URL。iOS会在你对其进行任何操作时静默下载资产。

如果您真的想从react-native代码中操作图像，那么这将无济于事，因此以下是一种解决方法：

import RNFS from 'react-native-fs';

getAssetFileAbsolutePath = async (assetPath) => {
    const dest = `${RNFS.TemporaryDirectoryPath}${Math.random().toString(36).substring(7)}.jpg`;

    try {
      let absolutePath = await RNFS.copyAssetsFileIOS(assetPath, dest, 0, 0);
    } catch(err) {
      // ...
    } 
  }

请记住，这将文件复制到临时目录，这意味着它不是永久的，您也可以将其复制到应用程序的文档目录。

- Oscar Franco

---

你有没有找到其他的方法来实现这个，还是一直在使用 copyFileAssetsIOS？ - ZedTuX

不好意思，似乎没有办法从react-native端轻松地或使用库来实现它，只能通过本地代码来实现。 - Oscar Franco

只是一个小修正，它被称为 copyAssetsFileIOS：https://github.com/itinance/react-native-fs#copyassetsfileiosimageuri-string-destpath-string-width-number-height-number-scale--number--10-compression--number--10-resizemode--string--contain---promisestring - Brunno Vodola Martins

Answer 3

我使用RNFS让它工作了，但是我必须在uri路径中添加一些额外的内容才能让它工作。

<TouchableHighlight
          onPress={async () => {
            const destPath = RNFS.CachesDirectoryPath + '/MyPic.jpg';

            try {
              await RNFS.copyAssetsFileIOS(imageUri, destPath, 0, 0);
              console.log('destPath', destPath);
            } catch (error) {
              console.log(error);
            }

            navigation.navigate('SelectedPicture', {
              uri: 'file://' + destPath,
            });
          }}>
          <Image source={{uri: imageUri}} style={styles.image} />
        </TouchableHighlight>

- Shah

Answer 4

这个问题很老了，但我回答它是为了帮助像我一样的新手在react-native中遇到相同的问题。我曾经为从相机滚动条中获取图像并使用OCR库对其进行处理而苦苦挣扎。我使用 react-native-photo-framework 来获取图像，并发现可以使用 getImageMetadata 方法从资产中获取 fileurl。我需要这个 fileurl，因为原始URI的格式为 'photo://...'，不能被OCR库识别为有效的URL。我还没有在真实设备和iCloud资产上进行过测试。示例：

const statusObj = await RNPhotosFramework.requestAuthorization()
if (statusObj.isAuthorized) {
    const assetList = await RNPhotosFramework.getAssets({
      includeMetadata: true,
      includeResourcesMetadata: true,
      fetchOptions: {
        mediaTypes: ['image'],
        sourceTypes: ['userLibrary', 'cloudShared', 'itunesSynced'],
      }
    })
    const asset = photos.assets[0]
    const metadata = await asset.getImageMetadata()
    const uri = metadata.imageMetadata.fileUrl
}

- Makx