React Native iOS从apps Documents文件夹中读取图像 [英] React Native iOS read image from apps Documents folder

问题描述

我必须将图像下载到我的iOS应用本地文件系统并阅读它们。

I have to download images to my iOS apps local file system and read them back.

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

On my simulator I can see file system of my app with directories

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

/Documents
/Library
/tmp

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

To try out I copied foo.png to /Documents folder and then tried

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

这不起作用，任何想法都可以做到这一点。

This does not work, any idea whats a way to do this.

推荐答案

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

This also took me ages... with better info it would have been 5 minutes!

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

I use react-native-fs to get directories (which works for ios and android):

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

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

RNFS.DocumentDirectoryPath then returns something like '/var/mobile/Containers/Data/Application/15AC1CC6-8CFF-48F0-AFFD-949368383ACB/Documents' on iOS

My Image元素如下所示：

My Image element looks like:

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

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

My problem was that I did not set width and height first, which is not needed for urls or paths to assets. When using a base64 uri the width and heigth are also mandatory (that actually led me to the solution!).

这篇关于React Native iOS从apps Documents文件夹中读取图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！