React Native Android Webview跳转返回后无法点击链接问题求助

我来帮你搞定这个问题！你遇到的情况大概率是因为拦截跳转并停止Webview加载后，Webview的内部导航状态被锁定了，返回页面后没有恢复正常的交互状态。下面是几个经过验证的解决方法：

方法一：用状态变量重置Webview的加载源 #

通过状态变量管理Webview的source属性，返回Webview页面时重新设置加载源，让Webview初始化交互状态：

import React, { useState, useEffect, useRef } from 'react';
import { WebView } from 'react-native-webview';
import { BackHandler } from 'react-native';

const WebViewScreen = () => {
  const targetUrl = '你的指定URL';
  const [webViewSource, setWebViewSource] = useState({ uri: targetUrl });
  const [hasNavigatedAway, setHasNavigatedAway] = useState(false);
  const webViewRef = useRef(null);

  // 监听物理返回按钮，处理返回Webview的逻辑
  useEffect(() => {
    const backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      () => {
        if (hasNavigatedAway) {
          // 返回时重新设置source，恢复Webview交互
          setWebViewSource({ uri: targetUrl });
          setHasNavigatedAway(false);
          return true; // 拦截系统默认返回行为
        }
        return false;
      }
    );

    return () => backHandler.remove();
  }, [hasNavigatedAway]);

  const handleNavigationStateChange = (navState) => {
    if (navState.url !== targetUrl && !hasNavigatedAway) {
      // 执行应用内页面跳转逻辑，比如React Navigation的navigate
      // navigation.navigate('你的内部页面', { url: navState.url });
      setHasNavigatedAway(true);
      // 停止Webview加载
      webViewRef.current?.stopLoading();
    }
  };

  return (
    <WebView
      ref={webViewRef}
      source={webViewSource}
      onNavigationStateChange={handleNavigationStateChange}
      // 确保启用基础交互所需的配置
      javaScriptEnabled={true}
      domStorageEnabled={true}
    />
  );
};

export default WebViewScreen;

方法二：通过修改key属性强制Webview重新渲染 #

改变Webview的key属性会让React重新创建组件实例，彻底重置它的内部状态：

import React, { useState, useEffect, useRef } from 'react';
import { WebView } from 'react-native-webview';
import { BackHandler } from 'react-native';

const WebViewScreen = () => {
  const targetUrl = '你的指定URL';
  const [webViewKey, setWebViewKey] = useState(Date.now());
  const [hasNavigatedAway, setHasNavigatedAway] = useState(false);
  const webViewRef = useRef(null);

  useEffect(() => {
    const backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      () => {
        if (hasNavigatedAway) {
          // 修改key触发Webview重新渲染
          setWebViewKey(Date.now());
          setHasNavigatedAway(false);
          return true;
        }
        return false;
      }
    );

    return () => backHandler.remove();
  }, [hasNavigatedAway]);

  const handleNavigationStateChange = (navState) => {
    if (navState.url !== targetUrl && !hasNavigatedAway) {
      // 应用内跳转逻辑
      // navigation.navigate('你的内部页面');
      setHasNavigatedAway(true);
      webViewRef.current?.stopLoading();
    }
  };

  return (
    <WebView
      key={webViewKey}
      ref={webViewRef}
      source={{ uri: targetUrl }}
      onNavigationStateChange={handleNavigationStateChange}
      javaScriptEnabled={true}
      domStorageEnabled={true}
    />
  );
};

export default WebViewScreen;

方法三：调整stopLoading的调用时机 #

过早调用stopLoading可能打断Webview的事件绑定，试试延迟调用：

const handleNavigationStateChange = (navState) => {
  if (navState.url !== targetUrl && !hasNavigatedAway) {
    setHasNavigatedAway(true);
    // 延迟100ms再停止加载，确保状态更新完成
    setTimeout(() => {
      webViewRef.current?.stopLoading();
    }, 100);
    // 执行应用内跳转
    // navigation.navigate('你的内部页面');
  }
};

额外注意点 #

• 务必开启javaScriptEnabled和domStorageEnabled，这是Webview正常交互的基础配置；
• 如果使用React Navigation跳转，确认返回Webview页面时组件会触发重新渲染或状态更新。

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