在页面呈现之前将 JavaScript 或 CSS 注入 React Native WebView

问题描述

我想隐藏嵌入 React Native WebView 的特定页面的标题.目前，我使用这样的东西来动态删除标题:

I want to hide a header of a specific page that I embed into a React Native WebView. Currently, I use something like this, to dynamically remove the header:

<WebView
  ... some other props ...
  injectedJavaScript={'function hideHead(){document.getElementById("head").style.display="none";};hideHead();'}
  />

有时你仍然可以看到标题闪烁，所以我猜这个 JavaScript 在页面加载到 WebView 之后被评估.

Sometimes you can still see the header flashing, so I guess this JavaScript gets evaluated after the page loads in the WebView.

是否可以在页面呈现之前以某种方式添加/注入 JavaScript 或 CSS 以消除闪烁?

Is it possible somehow to add / inject JavaScript or CSS before the page renders to remove that flashing?

推荐答案

我找不到在页面加载之前注入 JavaScript 或 CSS 的方法.

I couldn't find a way to inject JavaScript or CSS before the page loads.

为了解决闪烁问题，我在 WebView 顶部放置了另一个 View，同时它仍处于 loading 状态.onNavigationStateChanged 回调可用于确定页面是否已加载.我放在上面的 View 只是显示了一个 ActivityIndi​​catorIOS.

To workaround the flashing problem, I put another View on top of the WebView while it is still in loading state. The onNavigationStateChanged callback can be used to find out whether the page is loaded. The View I put on top simply shows an ActivityIndicatorIOS.

这篇关于在页面呈现之前将 JavaScript 或 CSS 注入 React Native WebView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！