React-native，如何获取文件资产图像的绝对路径？答案

【问题标题】：React-native, how to get file-asset image absolute path?React-native，如何获取文件资产图像的绝对路径？
【发布时间】：2021-08-01 14:27:45
【问题描述】：

我正在 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

有什么方法可以轻松获取图片绝对路径？

【问题讨论】：

标签： ios react-native

【解决方案1】：

根据@ospfranco 的回答，这就是我最终要做的。我在临时文件夹中保存了资产的副本。还包括一个小 sn-p 来为文件名生成一个随机字符串。

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)
    } 
  }

【讨论】：

【解决方案2】：

所以，你只得到一个 url 的原因是它的图像可能没有存储在设备上（它可能在 iCloud 上）。一旦您对资产进行任何操作，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) {
      // ...
    } 
  }

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

【讨论】：

你有没有找到其他方法，或者你坚持使用copyFileAssetsIOS？
不，似乎没有办法（轻松/使用库）从 react-native 方面做到这一点，只能从本机代码。
只是一个小修正，它被称为copyAssetsFileIOS:github.com/itinance/…

【解决方案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>

【讨论】：

【解决方案4】：

这个问题很老，但我回答它是为了帮助像我这样的人，新的 react-native，有同样的问题。我正在努力尝试从相机胶卷中获取图像并使用 OCR 库处理它们。我使用react-native-photo-framework 获取图像，我发现您可以使用getImageMetadata 方法获取fileurl 与资产。我需要这个 fileurl，因为格式为“photo://...”的原始 URI 未被识别为 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
}

【讨论】：