react-native-fs：如何读取本地图像（获取本地文件的base64）

Question

我的应用程序中有本地文件，其内容如下：

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

如何使用RNFS.readFile(filepath, "base64"); 使用读取此文件RNFS.readFile("../../img/pic1.jpg", "base64");给我错误“无此文件”

Answer 1

react-native-fs只会访问设备存储中的文件。因此，这个问题引起了困惑。这些文件在构建时捆绑在一起，那么我们如何在开发和生产中访问它们？

我的项目结构

??? android
??? app
?   ??? assets
?       ??? images
??? ios

我将图像存储在里面 ./app/assets/images/

发展历程

在进行开发或调试时，文件将通过Metro捆绑程序提供给设备，因此它们实际上并未存储在设备上。因此将无法从设备存储访问它们。在开发时，您将不得不提供某种模拟功能。可以__DEV__根据环境允许使用不同的功能运行https://facebook.github.io/react-native/docs/javascript-environment

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

生产

从一些研究看来，似乎可以访问生产环境中的文件。

的iOS

我发现这些文件位于的文件夹assets中MainBundlePath。

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

您可以通过查看Packaging.log生成的来检查文件路径ipa。

安卓系统

Android没有名为的文件夹MainBundlePath，仅位于iOS。我花了一些时间研究和查看设备上的不同文件夹，但无法访问捆绑的图像。似乎无法以我们希望使用的方式访问它们react-native-fs。

可能的解决方案

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 => {...});

它确实发出有关Gradle正在压缩资产的警告。

Gradle默认会压缩捆绑的资产。为了使用此模块与资产文件交互，必须禁用压缩。请参阅如何从资产访问文件以获取更多详细信息。

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

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

将文件存储在本机项目中

而不是依靠捆绑器为您打包图像并将其放在设备上。您可以将它们的副本存储在iOS和Android项目中。这样做的好处是可以在开发中使用映像，但是您将映像存储多次，这可能会导致更大的应用程序大小。

将图像存储为base64

您可以将图像作为base64字符串存储在json文件中，然后由您的应用程序要求。然后，这意味着您将已经在base64中拥有了它们（因此应用程序无需进行任何转换），但是再次，您将增加应用程序的大小。如果图像数量很少，则可能是最简单的选择。