react-native-webview的方法stopLoading导致网站卡顿
The method stopLoading of react-native-webview causes the website to freeze
我想在我的 webview 中拦截对 link 的点击,并执行自定义操作,而不是像官方 [=12] 中描述的那样导航到 link 的目标=].这是我的做法:
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);
}
};
}
如果我在该 webview 中单击 link,URL 将按预期在系统浏览器中打开。然而,问题是之后 webview 被冻结了。我无法再点击任何链接,甚至无法滚动页面。当然这不是应该的。重点是在其他地方打开 link 以便 webview 中的页面保持可用。结果将保持不变,即使我删除了 Linking
部分。然后页面会在 link 单击时冻结。
有人知道怎么办吗?我想 stopLoading 方法的作用不仅仅是中止加载。它是否也可以取消当前页面上的任何 运行 Javascript?如果是这样,我可以阻止吗?
由于 this 拉取请求,我至少找到了解决方案。我没有使用 onNavigationStateChange
和 stopLoading
,而是使用 onShouldStartLoadWithRequest
。
在此事件的回调方法中,您可以定义就当前 webview 而言是否应丢弃请求,或者不简单地通过返回 false
或 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;
}
}
"what to do" 部分到目前为止。好吧,我还想回答我的其他问题并深入研究 react-native-webview 的代码(这一点都不好玩......评论呢? -> 'let the code speak' -> 好吧,它没有)。在花费一些时间从一个委托目标跳转到下一个委托目标后,stopLoading
-调用似乎被移交给了本机 WebView。因此 Android 和 iOS 的行为也可能完全不同(我目前只为 Android 开发)。至于整个问题的 "can I prevent" 部分,我可以说:"No"。
当然,最有趣的部分应该是 "what does stopLoading
actually do? Somewhere I read that it prevents Links on the current page from being clicked, indeed. But that was just a non-proven statement. As I got to the native Android-WebView-documentation I found the very very good explanation " 停止当前负载。”(去 Google,是的)。然后我就失去了深入挖掘的所有动力。
好吧,除非有人比我更开明,可以提出更详尽的解释我可能会接受我自己的答案,因为它至少是我面临的 dev-problem 的解决方案。
我想在我的 webview 中拦截对 link 的点击,并执行自定义操作,而不是像官方 [=12] 中描述的那样导航到 link 的目标=].这是我的做法:
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);
}
};
}
如果我在该 webview 中单击 link,URL 将按预期在系统浏览器中打开。然而,问题是之后 webview 被冻结了。我无法再点击任何链接,甚至无法滚动页面。当然这不是应该的。重点是在其他地方打开 link 以便 webview 中的页面保持可用。结果将保持不变,即使我删除了 Linking
部分。然后页面会在 link 单击时冻结。
有人知道怎么办吗?我想 stopLoading 方法的作用不仅仅是中止加载。它是否也可以取消当前页面上的任何 运行 Javascript?如果是这样,我可以阻止吗?
由于 this 拉取请求,我至少找到了解决方案。我没有使用 onNavigationStateChange
和 stopLoading
,而是使用 onShouldStartLoadWithRequest
。
在此事件的回调方法中,您可以定义就当前 webview 而言是否应丢弃请求,或者不简单地通过返回 false
或 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;
}
}
"what to do" 部分到目前为止。好吧,我还想回答我的其他问题并深入研究 react-native-webview 的代码(这一点都不好玩......评论呢? -> 'let the code speak' -> 好吧,它没有)。在花费一些时间从一个委托目标跳转到下一个委托目标后,stopLoading
-调用似乎被移交给了本机 WebView。因此 Android 和 iOS 的行为也可能完全不同(我目前只为 Android 开发)。至于整个问题的 "can I prevent" 部分,我可以说:"No"。
当然,最有趣的部分应该是 "what does stopLoading
actually do? Somewhere I read that it prevents Links on the current page from being clicked, indeed. But that was just a non-proven statement. As I got to the native Android-WebView-documentation I found the very very good explanation " 停止当前负载。”(去 Google,是的)。然后我就失去了深入挖掘的所有动力。
好吧,除非有人比我更开明,可以提出更详尽的解释我可能会接受我自己的答案,因为它至少是我面临的 dev-problem 的解决方案。