Question

I'm trying to create a hybrid react native app to host my website's content in webviews. Something like this: Supreme App

上推送新页面

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

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

Answer 1

您可以使用WebView属性onNavigationStateChange来检测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*/
       }

Reference

React Native Webview在<a> clicked

1 个答案: