在 React Native WebView 中加载捆绑的静态资产
Posted
技术标签:
【中文标题】在 React Native WebView 中加载捆绑的静态资产【英文标题】：Loading bundled static assets in React Native WebView 【发布时间】：2020-09-10 06:49:48 【问题描述】：我有一个 React Native 项目，我试图将一些预先生成的 html、JS 和 CSS 与应用程序捆绑在一起，并让 WebView 使用 react-native-community/react-native-webview 库呈现 Web 资产。我可以很好地加载 index.html 文件，但它不会加载其他资产，因为它似乎指向了错误的路径。我试过使用baseUrl，但它似乎不起作用。
我的 React Native 代码如下所示：
<WebView
source= uri: './assets/index.html'
allowFileAccessFromFileURLs=true
allowUniversalAccessFromFileURLs=true
originWhitelist=["*"]
mixedContentMode='always'
/>
然后作为构建过程的一部分，我的资产目录具有以下结构：
ios
|- assets
|- index.html
|- js
|- main.js
|- css
|- main.css
我将此作为 Xcode 中 Copy Bundle Resources 步骤的一部分，因此 assets 目录包含在 ios app bundle 中。
index.html 里面是这段代码：
<html>
<head>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
Hello World!
<script type="text/javascript" src="/js/main.js"></script>
</body>
</html>
回到最初的问题，当我运行这个应用程序时，我可以看到“Hello world！”所以这告诉我 HTML 正在加载，但 CSS 和 JS 文件没有加载，因为据我所知，它正在尝试从 file:///assets/js/main.js 加载，而不是相对于应用程序包的位置。有什么办法可以让它按需要工作吗？
如果可能的话，我真的非常想避免将脚本 src 从 /js/main.js 更改。我正在构建的实际应用程序会从我拥有的单独的 react 项目中自动生成这些文件。
我有一个示例最小项目，在这里演示了这个问题： https://github.com/jabbawookiees/psyduck
如果你想尝试修复它，你可以克隆这个项目然后运行以下命令：
yarn install
cd ios && pod install && cd ..
yarn run react-native run-ios
【问题讨论】：
这个运气好吗？ 请问你是怎么做到的？ 【参考方案1】：我最终做的是将 Web 服务器与我的 iOS 应用程序捆绑在一起，并从那里提供资源。
https://github.com/futurepress/react-native-static-server
【讨论】：
以上是关于在 React Native WebView 中加载捆绑的静态资产的主要内容，如果未能解决你的问题，请参考以下文章
React Native 中 WebView 内的 Twitter 小部件
从 React Native App 中的 WebView 打开动态链接
React-native WebView：从 assets 文件夹加载 html 和 js