将本地 web 应用程序包含到 react native webview 中

Posted 2023-02-22

【中文标题】将本地 web 应用程序包含到 react native webview 中

【英文标题】：Include local web app into react native webview

【发布时间】：2016-06-21 11:28:47

【问题描述】：

在我的 react-native 应用程序中，我想显示一个 webview，它加载一个本地 html5 网络应用程序（单页应用程序，SPA）。

我能够加载一个 html 文件，该文件位于相对文件夹 webapp 中使用

var webapp = require('./webapp/index.html');

和

<WebView source=webapp></WebView>

正如我在这个帖子中所说：react native webview load from device local file system

不幸的是，这个本地 web 应用的资产（如 .js 和 .css 文件）没有被 web 应用加载。

在 react-native 应用程序的开发过程中，这些文件可通过开发服务器获得。但是，当应用打包并在 ios 设备上运行时，资产不可用（我在 Safari 开发人员工具中收到 404 错误）。

我如何确保 webapp 文件夹中的所有资产（JS、CSS 等）在本地打包的应用程序中可用。

【问题讨论】：

您找到解决方案了吗？

【参考方案1】：

通过设置 baseURL，WebView 知道在哪里查找您链接到的 css/js

喜欢：

<WebView baseURL="/webApp" html=html />

在 github 上查看问题的答案：

https://github.com/facebook/react-native/issues/1442#issuecomment-106906969

或阅读 nick-weaver 关于此详细答案的示例： Loading javascript into a UIWebView from resources