react-native-webview的方法stopLoading导致网站冻结

2024-02-04

我想在react-native中拦截对我的webview中链接的点击并执行自定义操作,而不是像官方中所述导航到链接的目标guide https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md#controlling-navigation-state-changes。这就是我所做的:

import React from 'react';
import {View, Linking} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import {WebView} from 'react-native-webview';

export default class WebViewScreen extends React.Component {
    static navigationOptions = {
        title: 'Produck',
    };

    constructor(props) {
        super(props);
    }

    /**
     * Defines content and look of the WebViewScreen.
     */
    render() {
        const DEFAULT_URL = "https://www.myurl.de/index.html";

        return (
            <View style={{ flex: 1 }}>
                <WebView
                    ref = {webview => {
                        this.myWebView = webview;
                    }}
                    renderLoading = {this.renderLoading}
                    startInLoadingState = {true}
                    automaticallyAdjustContentInsets = {true}
                    source = {{ uri: DEFAULT_URL }}
                    javaScriptEnabled = {true}
                    domStorageEnabled = {true}
                    cacheEnabled = {false}
                    useWebKit = {true} // use WKWebView on iOS (http://facebook.github.io/react-native/blog/2018/08/27/wkwebview)
                    onNavigationStateChange={this.handleWebViewNavigationStateChange.bind(this)}
                />
            </View>
        );
    }

    handleWebViewNavigationStateChange = newNavState => {
        const {url} = newNavState;
        if (!url) return;

        if (isExternal(url)) {
            this.myWebView.stopLoading();

            // do something else, e.g.
            Linking.openURL(url);
        }
    };

}

如果我单击该 Web 视图中的链接,URL 将按预期在系统浏览器中打开。然而问题是,之后网络视图被冻结。我无法再单击任何链接,甚至无法滚动页面。当然,这不应该是这样的。重点是在其他地方打开链接,以便 Web 视图中的页面保持可用。即使我删除了结果,结果也将保持不变Linking-部分。然后页面就会在单击链接时冻结。

有人知道该怎么办吗?我想 stopLoading 方法的作用不仅仅是中止加载。它是否也可能取消当前页面上任何正在运行的 Javascript?如果是这样,我可以阻止吗?


我至少为我的案例找到了解决方案,感谢this https://github.com/react-native-community/react-native-webview/pull/107拉取请求。而不是使用onNavigationStateChange and stopLoading我转向onShouldStartLoadWithRequest。 在此事件的回调方法中,您可以简单地通过返回来定义是否应丢弃当前 webview 的请求false or true。所以你会得到这样的东西:

render() {
    ...
    return(...
        <WebView
            ...
            onShouldStartLoadWithRequest={this.handleWebViewRequest.bind(this)}
            ...
        />
    );
}

handleWebViewRequest = request => {
    const {url} = request;
    if (!url) return false;

    if (isExternal(url)) {
        Linking.openURL(url);
        return false;
    } else {
        return true;
    }
}

到目前为止,“做什么”部分。好吧,我也想回答我的其他问题,并深入研究了react-native-webview的代码(这根本没有乐趣......注释呢?->“让代码说话”->好吧,它没有) 。花了一些时间从一个授权目标跳到下一个目标后,某个地方stopLoading-call 似乎交给了原生WebView。因此 Android 和 iOS 的行为也可能完全不同(我目前只为 Android 开发)。至于“我可以阻止”——整个问题的一部分,我可以说:“不”。 当然,最有趣的部分是“什么是stopLoading实际上呢?我在某处读到它确实阻止了当前页面上的链接被单击。但这只是一个未经证实的说法。当我到达本土时Android-WebView-文档 https://developer.android.com/reference/android/webkit/WebView我找到了非常非常好的解释“停止当前负载”。 (去谷歌,耶)。然后我就失去了进一步挖掘的动力。 好吧,除非有人比我更有见识,可以提出更详细的解释,否则我可能会接受我自己的答案,因为它至少是我面临的开发问题的解决方案。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

react-native-webview的方法stopLoading导致网站冻结 的相关文章

  • 重命名从 HTML5 画布创建的图像

    我制作了一个简单的画布并将其另存为图像 我在这段代码的帮助下做到了这一点 var canvas document getElementById mycanvas var img canvas toDataURL image png 并弹出创
  • 如何在回调函数之外使用 FB.api(JS SDK) 响应?

    我在登录甚至调用 api 方面没有任何问题 我只是在 api 回调之外获取响应时遇到问题 我知道它是异步运行的 所以我想将它放在一个返回响应的函数中 这是我的想法 What I would like to be able to do fun
  • 让 GTM 代码在 Web 应用程序上运行

    我们公司的职业 工作网站使用第三方服务 允许用户提交职位发布申请 最初 用户登陆一个与 GTM 完美集成的外部平台 在 CMS 中 您可以轻松地将 GTM 代码添加到标题和正文区域 然而 一旦用户点击职位描述上的 应用 他们就会被重定向到一
  • 从提交的表单中获取值

    我有一个非常简单的表格
  • Javascript - 删除粘贴上的空格

    我有一个最大长度为 10 的输入文本字段 该字段用于澳大利亚电话号码 10 位数字 电话号码通常分为以下语法 12 12345678 如果有人复制上面的内容并将其粘贴到我的输入字段中 显然会留下最后一位数字并保留空格 有没有办法在粘贴到输入
  • 可以在 d3.js 中使用具有固定圆圈大小的圆圈包布局吗?

    此圆形包布局示例 http bl ocks org 4063269 http bl ocks org 4063269 非常适合我正在从事的项目 但是它会调整所有圆圈相对于彼此的大小 有没有一种简单的方法来指定每个圆的固定半径 我已经搜索了源
  • 是否有管理 __utma、__utmz 等 cookie 的标准?

    无论我登录 Facebook 还是 Twitter 我都会受到以下名称的 cookie 轰炸 utma utmb utmc utmv 它们的功能是什么 是否有一个标准来管理这些在服务器端的使用方式 这些 cookie 通常与谷歌分析 htt
  • 错误:“无效数据消息 - 全部长度必须为:8” - PickerIOS

    Edit 似乎如果我注释掉第 63 行 this setState logged in true 行 我就不会收到错误 我的猜测是 我尝试根据用户是否登录来更改渲染函数中显示的内容的方式是导致此错误的原因 有任何想法吗 我感觉 在理解 Re
  • React 和 ES6 继承

    Note 这篇文章是在 React 不支持 ES6 v12 时发布的 我有一个 ES6 课程 class BaseClass getInitialState return message Hello render return div di
  • 如何并排展开和折叠三个div?

    document ready function toggle click function if this data name show sidebar animate width 10 hide map animate width 89
  • 避免 IE 中因背景图像而出现“混合内容”警告的具体规则是什么?

    这与SSL 和 CSS 背景图像导致的混合内容 https stackoverflow com questions 1548551 ssl and mixed content due to css background images但这个问
  • 我想在数据表中使用 Div 结构而不是 Table。是否可以?

    我想用数据表 https datatables net 用div结构代替表格 目的是满足设计要求 有什么可能的方法或替代方案吗 不 您将无法执行此操作 Datatables 的核心仅适用于表格元素和子 thead tbody tfooter
  • 反应:无效的挂钩调用。钩子只能在函数组件体内调用

    我花了两天时间试图了解错误在哪里 知道吗 App js import React useState useEffect from react import Menu from components Menu function App ret
  • 为什么闭包编译器不缩短这个?

    我不确定这只是一个错误还是一个预期的功能 基本上 我有这个微小的功能 我现在看到end这里是蓝色的 但这工作得很好 如果我将其重命名为其他名称 我仍然遇到问题 function f a b var start Math min a b va
  • 如何使我的网站兼容移动设备和平板电脑? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我想让我现有的网站在手机 平板电脑上查看时自动调整 甚至在您在桌面上调整屏幕时自动调整 如果失败的话 如果太难 你有什么建议 我基本上
  • 为车把/余烬定义模板内的数组?

    我在 ember 应用程序中有一个车把模板 它接受一个数组 我目前像这样声明数组 模板 Gd radio input content radioContent value blue JavaScript App IndexControlle
  • 矩形描边上的单击事件

    我想仅在矩形的笔划上添加单击事件 并避免在矩形内部单击 下面是代码 var stage new Kinetic Stage container container width 578 height 200 var layer new Kin
  • 如何强制传单更新地图?

    当我将 Leaflet 与 React 一起使用时 我遇到了问题 据我研究 问题是 Leaflet 也想控制 DOM 渲染 现在 国家将使用与后端信息相对应的特定颜色代码 范围为1 gt 100 正确着色 但是 它每分钟更新一次 更新后 国
  • 如何使用 JavaScript 大致计算网站的连接速度?

    如何使用 JavaScript 大致计算网站的连接速度 我想创建一个像这样的javascript小部件 它将计算打开当前打开页面的速度 我想问是否可以仅使用 javascript 来完成此操作以及想法是什么 Update 请注意 页面大小始
  • 如何使用 PHP 读取/显示 XML

    有没有办法使用 PHP 读取 external xml 来自不同网站的 xml 文件 我知道有一种方法可以使用 JavaScript 读取 XML 但前提是它们都位于同一根目录中 您能否提供有关如何获取 xml 文件的示例 然后阅读以下内容

随机推荐