React Native Webview 在 <a> 点击时推送新页面

Question

我正在尝试创建一个混合反应本机应用程序来在 webviews 中托管我网站的内容。像这样：Supreme App

我想要实现的一件事是：当<a href>在我的网站上单击链接时，我希望应用程序推送新页面并在新页面中显示新链接内容，而不是 webview 仅显示新链接的内容，以便我可以保持良好的页面 backstack，感觉更像是原生应用程序（对于每个导航，都有一个新页面）。

我想知道如何检测链接点击，推送新页面而不是让 webview 进行默认链接导航。谢谢！

Answer 1

您可以使用WebViewproponNavigationStateChange来检测 url 的变化。

单击将重定向后<a>，webview将onNavigationStateChange触发。您可以使用此回调在应用程序中推送新屏幕。

例如。

       <WebView
             ref={r => this.webview = r}
             style = {{marginTop : 0}}
             onNavigationStateChange={this._onNavigationStateChange}
             source = {{uri: 'https://www.your-url.com' }}
       />


      _onNavigationStateChange=(webViewState)=>{
          let newUrl = webViewState.url
          /*Your navigation logic*/
       }

参考