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'

的内容

My 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}}
/>