React Native Webview 处理 url 更改监听器答案

【问题标题】：React Native Webview handle url change listenerReact Native Webview 处理 url 更改监听器
【发布时间】：2016-12-12 22:31:43
【问题描述】：

可以在 React Native Web 视图上处理 URL 更改。

我尝试处理onNavigationStateChange 监听器。但它只有一次射击。当页面加载时触发 onNavigationStateChange。当我导航到另一个页面时，此事件不会触发。

有什么想法吗？

【问题讨论】：

onNavigationStateChange 每次我将 webview 中的 url 更改为不同的域时都会为我触发，例如facebook.com 到 bbc.com。从测试来看，它似乎不会因为同一域内的页面更改而触发。你想完成什么？
您好，感谢您的反馈。我需要相同的域。例如example.com/login 到example.com/logout。
我没有适合你的解决方案，但这样的事情可能会帮助你productpains.com/post/react-native/…
npm 上已经有一个包，但在它成为核心反应本机的一部分之前，它一直处于保留状态。您也许可以使用它来允许原生 WebView 和反应原生 github.com/alinz/react-native-webview-bridge 之间的双向通信

标签： react-native

【解决方案1】：

尝试升级您的 React Native（和 React）版本。它应该被修复。也许是一个老问题，因为现在它工作正常。

查看此链接：React Native webview get url

【讨论】：

【解决方案2】：

参考import { WebView } from 'react-native-webview'

请尝试关注code/method 以获取当前导航path/url，因为在您的情况下onNavigationStateChange 这可能不会返回导航路径，因此您可以尝试onLoadProgress。

不是这个

 onNavigationStateChange={(state) => {
  console.log("current_path",path);

 }}

试试这个

这可能会被多次调用，请相应地处理您的情况。

 onLoadProgress={({ path}) => {
 console.log("current_path",path);
 }}

这就是我的 WebView 的样子

  <WebView
    source={{ uri: this.state.url }}
    onLoadEnd={() => this.hideSpinner()}
    onMessage={onMessage.bind(this)}
    ref={WEBVIEW_REF => (this.WebViewRef = WEBVIEW_REF)}
    startInLoadingState={true}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    onLoadProgress={({ nativeEvent }) => {
       //your code goes here       
    }}
    onNavigationStateChange={(state) => {
       //your code goes here       
    }} 
   />

【讨论】：

我也从使用 onNavigationStateChange 改为使用 onLoadProgress。 onLoadProgress 在我的 SPA 应用程序中开始和结束时总是被调用以进行任何更改。可以从 event.nativeEvent 中获取相同的状态变化数据

【解决方案3】：

当我点击它导航到默认移动浏览器时，我在反应原生 WebView 和它的按钮中加载网站链接。

在 react native android 当前场景中运行应用程序：当我单击网站中的按钮时，它导航到默认浏览器并且没有得到我尝试上述建议的 url。

预期场景：当我单击网站中的该按钮时，它不应导航到默认浏览器，我想要在默认浏览器中打开的 url。

my react version: "react-native": "0.64.0",

onLoadProgress = {({ nativeEvent }) => {
    //your code goes here       
}}
onNavigationStateChange={navState => {
    console.log("navState ", navState);
}}

【讨论】：

下次edit答案添加附加信息。

【解决方案4】：

 onNavigationStateChange={({ url, canGoBack }) => {
          console.log("url>>>>>>>>",url);
        }}

【讨论】：