我想在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(使用前将#替换为@)