React Native中如何获取URL动态变化的指定分段（如/bbb部分）

问题场景 #

你有类似http://localhost:3000/aaa/bbb/ccc的URL，其中/bbb分段会随刷新变化，想要在组件的return()中获取该分段的实时值，之前使用硬编码URL的方式（const url = new URL("http://localhost:3000/aaa/bbb/ccc");）无法生效。

解决方案 #

需要根据URL的来源（WebView加载的网页或应用内路由）选择对应方法：

1. 处理WebView中的网页URL

如果URL是WebView加载的网页地址，需要监听WebView的导航状态来获取实时URL，再解析路径分段：

import React, { useState } from 'react';
import { Text } from 'react-native';
import { WebView } from 'react-native-webview';

const WebViewUrlSegment = () => {
  const [dynamicSegment, setDynamicSegment] = useState('');

  const handleUrlChange = (navState) => {
    const currentUrl = navState.url;
    if (!currentUrl) return;
    
    // 拆分URL路径为分段数组，过滤空字符串
    const pathSegments = new URL(currentUrl).pathname.split('/').filter(seg => seg);
    // 目标分段是数组第2项（索引1，对应原URL中的/bbb）
    if (pathSegments.length >= 2) {
      setDynamicSegment(pathSegments[1]);
    }
  };

  return (
    <>
      <WebView
        source={{ uri: 'http://localhost:3000/aaa/bbb/ccc' }}
        onNavigationStateChange={handleUrlChange}
      />
      <Text>当前动态分段：{dynamicSegment}</Text>
    </>
  );
};

export default WebViewUrlSegment;

2. 处理应用内路由URL（基于React Navigation）

如果是React Native应用内的路由（比如路径定义为/aaa/:dynamicSegment/ccc），直接通过路由参数获取更高效：

import React from 'react';
import { Text } from 'react-native';
import { useRoute } from '@react-navigation/native';

const AppRouteSegment = () => {
  const route = useRoute();
  // 从路由参数中取出动态分段，默认值为空字符串
  const dynamicSegment = route.params?.dynamicSegment || '';

  return (
    <Text>当前动态分段：{dynamicSegment}</Text>
  );
};

export default AppRouteSegment;

原代码无效原因 #

你之前的代码使用了硬编码的固定URL，没有获取刷新后的实时URL，因此无论页面怎么刷新，拿到的都是写死的bbb，无法捕获变化后的分段值。

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