onNavigationStateChange 不适用于我在 Angular 中的 WebView URL [英] onNavigationStateChange is not working with my WebView URL which in Angular

问题描述

它只给出我在任何其他页面上点击或想要导航的第一次(主 URL)加载的 URL，这应该是不同的.对于 SPA

It only gives the URL of the first-time (main-URL) loading wherever I click or want to navigate on any other pages, which should be different.For the SPA

<WebView
  originWhitelist={['*']}
  ref={c => this._webview = c}
  source={{ uri: this.props.url }}
  dataDetectorTypes={'all'}
  onNavigationStateChange={this._onNavigationStateChange.bind(this)}
  onLoadStart={this._webLoadStart.bind(this)}
  onLoadEnd={this._webLoadEnd.bind(this)}
  onError={this._webLoadError.bind(this)}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  allowUniversalAccessFromFileURLs={true}
/>

推荐答案

SPA 应用程序不会触发 onLoad 事件，因此 navigationState 仅捕获第一个加载的 url.您需要在 WebView 中注入一个自定义 javascript，以通知 React Native 应用程序的 url 更改.

The SPA applications don't trigger a onLoad event, so the navigationState only captures the first loaded url. You need to inject a custom javascript in your WebView that notifies the React Native app of the url change.

我建议如下:

如果 angular 应用程序由您控制，那么每次 url 更改时，它都会使用 window.postMesssage 发送一条消息.

If the angular app is controlled by you, then have it send a message using window.postMesssage every time the url changes.

像这样:

// create the function to notify React in your angular app
window.notifyReact = function(data, type){
   if(window && window.postMessage) {
     window.postMessage({data:data, type:type});
   }
}

// use the function on every route change in your angular app
notifyReact({newUrl: "https://somenewurl/with-new-params"}, "URL_CHANGE")

然后在你的本机应用程序中，在你的 WebView 中监听消息:

then in your react native app, listen for messages in your WebView:

<WebView 
    ...yourOtherProps
    onMessage={e => {
      const data = e && e.nativeEvent.data ? e.nativeEvent.data.data : null;

       //print the data coming from the angular app to the console, data.newUrl should have the new url
      console.log("data from angular app:", data);
      }
    }
/>

如果 angular 应用程序不是由您控制，那么最好的办法是在 WebView 加载到您的本机应用程序中时注入一个 javascript 并让它拦截 url/hash 更改或来自 window.history.pushState/popState 的更改.

If the angular app is not controlled by you, then your best bet is to follow a similar approach with the above code by injecting a javascript when the WebView loads inside your react native app and have it intercept the url/hash changes or changes coming from window.history.pushState/popState.

祝你好运！

这篇关于onNavigationStateChange 不适用于我在 Angular 中的 WebView URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！