求助,react native webview 点击链接进入页面显示空白,IOS

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了求助,react native webview 点击链接进入页面显示空白,IOS相关的知识,希望对你有一定的参考价值。

参考技术A 需自备Mac OSX , XCode , node 以及 npm 。 做好准备之后,打开终端(或其他命令行利器),键入下面命令: npm install -g react-native-cli 和 react-native...

在 React Native WebView 中加载捆绑的静态资产

【中文标题】在 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 点击链接进入页面显示空白,IOS的主要内容,如果未能解决你的问题,请参考以下文章

React Native 问题:WebView 已从 React Native 中移除

WebView(react-native-webview)在 Expo SDK36 中获取错误代码 -1

React Native WebView 状态栏

React Native开发React Native控件之WebView组件详解以及实例使用(22)

React-native:如何自动保存 webview 当前网页?

WebView 不一致地显示白屏 react-native