react-native - React Native Webview 在 点击时推送新页面

Question

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

我想要实现的一件事是:当 <a href>在我的网站上点击了链接，而不是 webview 只显示新链接的内容，我希望应用程序推送一个新页面并在新页面中显示新链接内容，这样我就可以保持良好的页面 backstack，感觉更多就像 native 应用程序(对于每个导航，都有一个新页面)。

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

Answer 1

您可以使用 WebView Prop 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