React Native iOS 从应用程序 Documents 文件夹中读取图像

Posted 2023-03-15

【中文标题】React Native iOS 从应用程序 Documents 文件夹中读取图像

【英文标题】：React Native iOS read image from apps Documents folder

【发布时间】：2016-09-02 07:02:58

【问题描述】：

我必须将图像下载到我的 ios 应用本地文件系统并读回。

在我的模拟器上，我可以看到我的应用程序的文件系统和目录

/Library/Developer/CoreSimulator/Devices/[UUID]/data/Containers/Data/Application/[UUID]/

/Documents
/Library
/tmp

为了尝试，我将 foo.png 复制到 /Documents 文件夹，然后尝试

<Image source=uri: "file://Documents/foo.png" style=width:100, height:100/>

这不起作用，知道有什么方法可以做到这一点。

【问题讨论】：

你的意思是从沙箱中的文档目录中获取图像对..??

【参考方案1】：

这也花了我很多时间......如果有更好的信息，它会是 5 分钟！

我使用react-native-fs 获取目录（适用于 ios 和 android）：

var RNFS = require('react-native-fs');

RNFS.DocumentDirectoryPath 然后在 iOS 上返回类似 '/var/mobile/Containers/Data/Application/15AC1CC6-8CFF-48F0-AFFD-949368383ACB/Documents' 的东西

我的图像元素看起来像：

<Image
    style=width:100, height:100
    source=uri: 'file://' + RNFS.DocumentDirectoryPath + '/myAwesomeSubDir/my.png', scale:1
/> 

我的问题是我没有先设置宽度和高度，这对于 url 或资产路径是不需要的。当使用 base64 uri 时，宽度和高度也是强制性的（这实际上让我找到了解决方案！）。

【讨论】：

什么是'myAwesomeSubDir'？是那个以应用程序名称创建的文件夹吗？

正如您在我的回答中看到的那样，RNFS.DocumentDirectoryPath 会为您返回文档目录的路径。您的文件可能直接位于该目录下或子目录中......因此，如果您的文件直接存储在文档文件夹中，请忽略该部分！

对我来说情况类似。将文件的文件名保存在 docs 目录中，然后在运行时重建完整路径。我可能是错的，但文档目录和父母目录可能会四处移动/更改位置/uuid。

我实际上已经有了通过 react-native-image-crop-picker 获得的路径并且不需要 react-native-fs，我只是没有设置宽度和高度！谢谢！

【参考方案2】：

试试 tilda (~)。 React Native 应该扩展它。

<Image
   style=width:100, height:100
   source=uri: '~/Documents/myAwesomeSubDir/my.png', scale:1
/> 

【讨论】：

非常感谢。这节省了我的时间