从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 /容器/数据/应用程序/ 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，如Mac OS X） AppleWebKit / 602.2.14（KHTML，像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与Mac OS X一样）AppleWebKit / 602.2.14（KHTML，如Gecko）Mobile / 14B100“< / p>

看到我认为这是正确的路径（至少对于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，您必须获得对bundle目录路径的引用，这是您的应用程序必须读取这些文件的位置，并相对于该路径引用它们。

编辑：这是指React Native 0.38

Answer 2

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