React Native webview 获取 url [英] React Native webview get url

问题描述

Webview 组件允许我指定目标 url，例如脸书网

Webview component allowing me to specify a destination url, e.g. facebook.com

render() {

    return (
        <WebView
          source={{uri: https://www.facebook.com}}
          style={{marginTop: 20}}
        />
    );
  }

但是，如果我点击 facebook 中的链接，我怎样才能获得被点击的 url 或被登陆的 url?

However, If i click the link in facebook, how can I get the url being clicked or the url being landed?

推荐答案

这是我在之前的项目中使用的 Webview.

Here is a Webview I used for my previous project.

<WebView
       ref="webview"
       source={{uri:this.state.url}}
       onNavigationStateChange={this._onNavigationStateChange.bind(this)}
       javaScriptEnabled = {true}
       domStorageEnabled = {true}
       injectedJavaScript = {this.state.cookie}
       startInLoadingState={false}
     />

对你来说必不可少的是这条线:

for you essential is this line:

           onNavigationStateChange={this._onNavigationStateChange.bind(this)}

你可以像这样读取 URL:

and you can read the URL like this:

_onNavigationStateChange(webViewState){
  console.log(webViewState.url)
}

如果我没记错的话，这会在加载 url 时触发 3 次.

If I remember correctly this fires 3 times when loading a url.

webviewState 对象原型:

webviewState object prototype:

{
  canGoBack: bool,
  canGoForward: bool,
  loading: bool,
  target: number,
  title: string,
  url: string,
}

第三次(最后)调用此事件，加载属性为 false

The 3rd (final) time this event is called, the loading attribute is false

如果有帮助，请告诉我.

let me know if it helps.

这篇关于React Native webview 获取 url的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！