React native WebView URL

Question

我正面临从WebView检索当前URL的问题。目前，我正在使用以下方法获取URL

onNavigationStateChange()

最近注意到URL已弃用！我需要使用源支柱获取URL。但是我无法弄清楚。另外，上面的功能被称为两次。有什么方法可以在loadingFinished()函数中获取URL？

来源：https：//facebook.github.io/react-native/docs/webview.html

谢谢

Answer 1

您可以使用onNavigationStateChange。导航状态更改，更新state。并在需要时使用state的url。

代码： -

import React, { Component } from 'react';
import { Text, View, WebView } from 'react-native';
const initialUrl = 'https://github.com';
let url = '';
export default class App extends Component {
  state = {
    url: initialUrl,
  };
  onNavigationStateChange = navState => {
    if (url!==navState.url) { 
      url = navState.url;
      alert(url);
      this.setState({
        url: url
      })
    }
  };
  render() {
    const { url } = this.state;
    return (
      <View style={{paddingTop: 24, flex: 1}}>
        <Text style={{backgroundColor: 'black', color: 'white'}}>{ url }</Text>
        <WebView
        style={{ flex: 1}}
          source={{
            uri: initialUrl,
          }}
          onNavigationStateChange={this.onNavigationStateChange}
          startInLoadingState
          scalesPageToFit
          javaScriptEnabled
        />
      </View>
    );
  }
}

零食上的实时示例https://snack.expo.io/syrnrlj-g