web-dev-qa-db-ja.com

React Native webview get url

リンク先URLを指定できるWebviewコンポーネント。 facebook.com

render() {

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

ただし、facebookのリンクをクリックした場合、URLがクリックされたり、URLが表示されたりするにはどうすればよいですか？

webviewreact-native
17
bns

これは、以前のプロジェクトで使用した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)}

そして、あなたはこのようなURLを読むことができます：

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

私の記憶が正しければ、URLの読み込み時に3回起動します。

webviewStateオブジェクトプロトタイプ：

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

このイベントが呼び出される3番目（最終）の時間、ローディング属性はfalse

役立つかどうか教えてください。

45
dv3