为了让 WebView 正确加载 css 和字体文件，我应该提供哪个基本 url？

Posted 2023-03-14

【中文标题】为了让 WebView 正确加载 css 和字体文件，我应该提供哪个基本 url？

【英文标题】：Which base url should I give a WebView in order for WebView to correctly load css and font files?

【发布时间】：2016-08-20 17:00:42

【问题描述】：

在我的 Native React 项目中，我想使用 WebView。 html 引用外部 css 文件，css 文件引用一些自定义字体。

鉴于这个等级：

app/
app/index.ios.js
app/android.ios.js
app/package.json
app/node_modules
app/android/
app/ios/

我应该把文件“mycss.css”和“fonts/”文件夹和 我应该为 baseUrl 使用什么？在构建 ios 和 android 版本时，包管理器是否自动包含 css 和字体文件？

    <WebView style=flex: 1
             source=  html:    my_html, 
                        baseUrl: ???  />

在 iOS 上检查 WebView 背后的代码表明 baseUrl 被交给了 UIWebView。这个 *** 问题 How can I add an external stylesheet to a UIWebView in Xcode? 展示了如何从 Objective C 中设置 baseUrl，但是 Native React 中的等价物是什么？

NSURL *mainBundleURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];
[self.webView loadHTMLString:htmlString baseURL:mainBundleURL];

FWIW 我正在 iOS 上开发（但希望有一种方法可以在这两个平台上进行这项工作）。

【参考方案1】：

以下工作。

添加了一个文件夹web 并使用了这个结构：

app/web/mycss.css
app/web/fonts

使用web/ 作为基本网址。

最后一个难题是将web 文件夹添加到XCode 项目中（在XCode 中执行此操作）。否则web 文件夹中的文件不会包含在为 ios 设备构建的捆绑包中。

【讨论】：

我设法让它在 iOS 上运行...有人知道如何在 Android 上运行吗？

@soegaard 你能显示“my_html”字符串的内容吗？我需要检查图像上的路径是如何定义的。