React Native WebView导航时onNavigationStateChange返回上一页URL问题

我之前也踩过这个坑！你遇到的情况其实是React Native WebView的一个常见异步时序问题——当你导航到新页面时，onNavigationStateChange的回调触发时机可能早于页面实际加载完成的时间，导致拿到的还是上一页的URL状态。

问题根源 #

WebView的导航状态是分阶段触发的：从开始导航、正在加载到加载完成，有些场景下onNavigationStateChange会在开始导航的瞬间就触发，这时候新页面的URL还没完全同步到WebView的状态里，所以返回的是当前页面（也就是你说的上一页）的信息。

可行的解决方案 #

• 方案1：过滤加载完成状态
  在回调里判断webViewState.loading是否为false，只有当页面完全加载完成后才更新你的状态，这样就能拿到最终的新页面URL：

  _onNavigationStateChange(webViewState) {
    // 仅在页面加载完成时更新URL
    if (!webViewState.loading) {
      this.setState({ youtube_video_url: webViewState.url });
    }
  }
  

• 方案2：改用onLoad/onLoadEnd事件
  如果onNavigationStateChange的时序问题还是存在，可以直接用WebView提供的onLoad或onLoadEnd回调，这两个事件是在页面完全加载完成后才触发的，能确保拿到正确的新页面URL：

  <WebView
    ref={r => this.webview = r}
    style={{marginTop: 0}}
    onLoad={(syntheticEvent) => {
      const { nativeEvent } = syntheticEvent;
      this.setState({ youtube_video_url: nativeEvent.url });
    }}
    startInLoadingState={true}
    source={{uri: 'https://www.youtube.com'}}
  />
  

• 方案3：升级WebView版本
  如果你用的是较老版本的React Native WebView，这个问题可能是已知bug。现在官方已经把WebView移到社区维护的react-native-webview包了，建议升级到最新版本，很多导航相关的时序问题都已经被修复。

另外你提到已经在GitHub Issues提交了反馈，这步做得很对！如果上面的方案都没解决，也可以跟进Issues里的官方回复，有时候这类问题可能是特定网站的跳转逻辑和WebView交互的边缘case。

内容的提问来源于stack exchange，提问作者Vishal Deep