React Native iOS从apps Documents文件夹中读取图像

Question

我必须将图像下载到我的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}}/>

这不起作用,任何想法都是这样做的.

Answer 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元素如下所示:

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

我的问题是我没有先设置宽度和高度,这对于网址或资源路径是不需要的.当使用base64 uri时,宽度和高度也是强制性的(实际上这使我得到了解决方案!).

Answer 2

尝试tilda（〜）。React Native应该扩展它。

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