将本地 Web 应用包含在 react 本机 Web 视图中

Include local web app into react native webview

本文关键字:Web 本机 react 视图 包含 应用      更新时间:2023-09-26

在我的反应原生应用程序中,我想显示一个Web视图,该视图加载本地html5 Web应用程序(单页应用程序,SPA)。

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

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

<WebView source={webapp}></WebView>

正如我在此线程中所述:从设备本地文件系统响应本机 WebView 加载

遗憾的是,此本地 Web 应用的资产(如 .js 和 .css 文件)不会由 Web 应用加载。

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

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

通过设置基本URL,WebView知道在哪里查找链接到的css/js

喜欢:

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

在GitHub上检查问题的答案:

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

或者阅读尼克-韦弗关于这个详细答案的例子:从资源将 JavaScript 加载到 UIWebView 中