javascript - 页面重定向时如何从 webview 获取 url？ (这是功能组件而不是类)

Question

这是我的功能组件

const MyScreen = (props) => {

  return (
    <Wrapper>
      <WebView
        source={{uri: `${Helpers.URL}`}}
        javaScriptEnabled={true} //enabling JavaScript
        javaScriptEnabledAndroid={true}
        onMessage={event => {
        }}
        onLoadStart={() => {
          console.log("LOAD START ");
        }}
        onLoadEnd={() => {

        }}
        onError={err => {
          console.log('ERROR ');
          console.log(err);
        }}
        onNavigationStateChange = {() => {
          console.log('State changed...');
          // TODO: check what the url is at this point
        }}

      />
    </Wrapper>

  )
}

我希望能够获取新加载页面的 url。

Answer 1

你可以试试

const MyScreen = (props) => {


  handleNavigationStateChange = navState => {
    // This gets us the navstate which has the url of the newly loaded page
    console.log(navState);
  };


  const url = `${Helpers.URL}`

  // this javascript will be injected on page load 
  const injectedJs = `
  window.postMessage(window.location.href);
`;


  return (
    <WebView
      source={{ uri: url }}
      bounces={true}
      style={[
        {
          flex: 1
        },
      ]}
      injectedJavaScript={injectedJs}
      startInLoadingState
      scalesPageToFit
      javaScriptEnabledAndroid={true}
      javaScriptEnabled={true}
      onNavigationStateChange={this.handleNavigationStateChange}
      onMessage={event => {
        alert('MESSAGE >>>>' + event.nativeEvent.data);
      }}
      onLoadStart={() => {
        console.log("LOAD START ");
      }}
      onLoadEnd={() => {
        console.log('LOAD END');
      }}
      onError={err => {
        console.log('ERROR ');
        console.log(err);
      }}
    />
  )
}