React Native Webview内链接跳转至新Webview的实现问题

你之前尝试用NativeRouter处理Webview内部页面跳转的方向是错误的。Webview是独立的浏览器环境，内部链接跳转和React Native原生路由（react-router-native）属于两个互不干扰的体系，强行混用会引发路由冲突与渲染错误。

下面是简洁可行的实现方案：

核心思路 #

拦截Webview内部的链接请求，将符合/:id格式的跳转请求在当前Webview中加载，而非让系统打开外部浏览器或触发原生路由。

代码实现 #

import { useState } from 'react';
import { SafeAreaView } from 'react-native';
import { WebView } from 'react-native-webview';

export const About = () => {
  const [currentUrl, setCurrentUrl] = useState(`${BASE_URL}/about`);

  const handleNavigation = (request) => {
    const targetUrl = request.url;
    // 校验是否为同域下的/:id格式链接，可根据实际id规则调整正则
    if (targetUrl.startsWith(BASE_URL) && targetUrl.match(/\/[^/]+$/)) {
      setCurrentUrl(targetUrl);
      // 返回false阻止默认跳转，由状态更新控制Webview加载新地址
      return false;
    }
    // 外部链接允许默认跳转行为
    return true;
  };

  return (
    <SafeAreaView edges={['right', 'top', 'left']} style={{ flex: 1 }}>
      <WebView 
        source={{ uri: currentUrl }} 
        shouldStartLoadWithRequest={handleNavigation}
        // 这里添加你的自定义配置，比如启用JS、设置UserAgent等
        javaScriptEnabled={true}
      />
    </SafeAreaView>
  );
};

关键细节说明 #

• shouldStartLoadWithRequest：Webview发起请求前会触发该方法，返回false可拦截默认跳转，由我们手动控制加载地址。
• 状态管理currentUrl：通过React状态维护Webview当前加载的地址，拦截到目标链接时更新状态即可实现页面切换。
• 同域校验：targetUrl.startsWith(BASE_URL)确保只处理自有网站内的链接，避免拦截外部跳转。
• 组件名修正：react-native-webview的官方组件是大写的WebView，原代码中的小写Webview会导致组件找不到的错误，需修正。

额外提示 #

react-router-native仅用于管理React Native原生组件构成的页面跳转，和Webview内部的网页路由体系完全独立，不要混用两者来处理Webview内的页面切换。

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