从 WebView 中加载本地图像文件

Question

我有一个运行小型 HTML 文档的 React Native WebView。该文档显示了一些图像。

我希望显示位于应用程序Documents文件夹中的图像，即图像不是静态资产，而是由应用程序在运行时下载并存储在磁盘上.然后，这些图像会从在 React Native WebView 中运行的 HTML 中引用。

这是我迄今为止尝试过的：

直接获取文件

我尝试从 WebView 中获取文件，但它不起作用（404 Not Found）：

1。模拟器

::1 - - [25/Nov/2016:09:55:52 +0000] “GET /Users/me/Library/Developer/CoreSimulator/Devices/43707753-69A2-4EC7-B990-F7910A853F42/data/ Containers/Data/Application/E4F4A368-02B0-4BAE-BEB3-BDF0FF7ADDDF/Documents/1657.jpeg HTTP/1.1" 404 193 "http://localhost:8081/assets/src/index.html?platform=ios&hash=8cb6d49177b95c46ed6654eb038a9a8d" "Mozilla/5.0 (iPhone; CPU iPhone OS 10_1 like Mac OS X) AppleWebKit/ 602.2.14 (KHTML, like Gecko) Mobile/14B72"

2。电话

::ffff:192.168.100.143 - - [25/Nov/2016:11:58:31 +0000] "GET /var/mobile/Containers/Data/Application/970B3033-4AB1-48CF-AFC9-D30534D30BCE/ Documents/1657.jpeg HTTP/1.1" 404 108 "http://192.168.100.114.xip.io:8081/assets/src/index.html?platform=ios&hash=8cb6d49177b95c46ed6654eb038a9a8d" "Mozilla/5.0 (iPhone; CPU iPhone OS 10_1_1 like Mac OS X) AppleWebKit/602.2.14 (KHTML, like Gecko) Mobile/14B100"

鉴于我认为这是正确的路径（至少对于 iOS），我认为这可能是权限问题，尽管不确定。

Answer 1

查看 React Native WebView 组件的文档，source 属性有两种模式：

1. 加载 URI
2. 加载静态 HTML 字符串
3. 调用require(some.html) 的结果

在第二种情况下，可以指定baseUrl。如果你将baseUrl设置为图片下载的目录，你应该可以使用<img src="./your-image.png" />引用它们。

回答后编辑：关于外部 HTML 的说明

遗憾的是，在情况 1 和 3 中无法指定基本 URL，因此您必须先将其转换为可以传递给 source 属性的字符串。如果您的 HTML 引用了一些外部 Javascript，您必须获取对捆绑目录路径的引用，这是您的应用程序必须读取这些文件的位置，并相对于该路径引用它们。

编辑：这是指 React Native 0.38

Answer 2

我猜您的项目结构遵循您尝试检索的assets/src... 结构。 RN 打包器根本不会公开您的项目，它只是打包转译的包（实际上，有几个，在平台和调试/发布模式上有所不同）并提供下载。如果这行得通，那么一旦您的应用程序上线，它就不会对您有太大帮助。我认为this answer 可能会涵盖您的用例。