React Native webview获取网址

时间:2016-08-23 11:05:05

标签: webview react-native

Webview组件允许我指定目标网址,例如facebook.com

render() {

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

但是,如果我点击Facebook中的链接,我该如何获取点击的网址或网址?

1 个答案:

答案 0 :(得分:43)

这是我用于上一个项目的Webview。

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

对你来说必不可少的是这一行:

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

您可以像这样阅读网址:

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

如果我没记错的话,加载网址时会发生3次火灾。

webviewState对象原型:

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

调用此事件的第3个(最后)时间,加载属性为false

让我知道它是否有帮助。