将本地Web应用程序包含在本机webview中

Question

在我的react-native应用程序中,我想显示一个webview,它加载一个本地html5 Web应用程序(单页面应用程序,SPA).

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

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

和

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

正如我在此主题中所述:从设备本地文件系统响应本机webview加载

不幸的是,这个本地webapp的资产,如.js和.css文件,不是由webapp加载的.

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

我怎样才能确保webapp文件夹中的所有资产(JS,CSS等)都在打包的app本地中可用.

Answer 1

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

喜欢：

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

检查 github 上问题的答案：

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

或者阅读 nick-weaver 的详细答案的示例： 从资源中加载 javascript 到 UIWebView 中