反应母语-FS：如何读取本地图像（获取本地文件的base64）

Question

我在我的应用程序的本地文件，我这样写的：

<Image source={require("../../img/pic1.jpg") />

如何使用RNFS.readFile(filepath, "base64");使用RNFS.readFile("../../img/pic1.jpg", "base64");阅读该文件给我的错误“没有这样的文件”

Answer 1

react-native-fs将只从设备的存储访问这些文件。所以这个问题带来了困惑。这些文件在制作的时候，所以我们怎么能访问它们的开发与生产捆绑？

My project structure

├── android
├── app
│   └── assets
│       └── images
└── ios

我存储我里面./app/assets/images/图片

Development

当开发或调试的文件通过地铁捆绑提供给设备，以便他们实际上并没有存储在设备上。因此，从存储设备访问它们将是不可能的。你将不得不提供某种嘲笑功能，当你正在开发。它可以使用__DEV__允许不同的功能，根据环境https://facebook.github.io/react-native/docs/javascript-environment运行

if (__DEV__) {
  // do something in development
} else {
  // do something in production
}

Production

从一些研究它似乎像它可以访问在生产中的文件。

iOS版

我发现的是，该文件驻留在一个文件夹，名为assets是在MainBundlePath。

所以，如果你想访问以下文件在我的本地目录./app/assets/images/image.png你需要以下文件路径：RNFS.MainBundlePath + /assets/app/assets/images/image.png访问它的设备上。

您可以检查通过查看与您Packaging.log产生的ipa看到文件路径。

Android的

Android不有一个文件夹名为MainBundlePath，这只是在iOS。我已经花了一些时间研究和观察设备上的不同文件夹，但我无法访问被捆绑的图像。这似乎是他们没有在我们希望使用react-native-fs的方式进行访问。

Possible solutions

rn-fetch-blob

rn-fetch-blob有两个ios和Android功能从资产目录中读取

要访问iOS你会做这样的事情的文件：

RNFetchBlob.fs.stat(fs.dirs.MainBundleDir + '/whatever/files/you/added.mp3').then( stats => {...});

而对于Android你会做这样的事情：

RNFetchBlob.fs.stat(fs.asset('/whatever/files/you/added.mp3').then( stats => {...});

它确实给这个警告有关资产被压缩的摇篮。

摇篮将被默认压缩捆绑资产。为了与此模块资产的文件进行交互，压缩必须禁用。请参阅How to access files from assets更多细节。

这可以解释为什么我使用react-native-fs看时无法找到Android的任何资产

你可以阅读更多有关使用rn-fetch-blob及其文件系统在这里https://github.com/joltup/rn-fetch-blob#user-content-file-system

Storing the files in the native projects

而不是依靠捆绑打包了画面，供各位，把他们的设备上。你可以在iOS和Android项目已经存储了它们的副本。这样做的奖金，该图像将是开发用，但是你将存储图像多次，它可能会导致更大的应用规模。

Storing the images as base64

你可以存储图像作为JSON文件的base64字符串，然后由你的应用程序需要这些。那么这将意味着，你将不得不他们已经用base64（这样的应用程序并不需要做任何的转换），但同样你会增加你的应用程序的大小。如果它只是图像的少数也可能是最简单的选项。

Answer 2

只是用文件名= response.uri.replace（ '文件：'， ''）

最后的代码：

if (Platform.OS === 'ios') {
      filename = response.uri.replace('file:', '')
} else {
      filename = response.uri
}

现在的工作...