React Native中如何搜索JSX的Path组件并根据API数据绘点

步骤1：提取路径数据到映射表 #

先把原JSX里硬编码的200个Path组件关键信息提取出来，做成国家-路径映射表。每个条目包含国家ID（和API返回的id对应）、路径的d属性，后续再补充预计算的中心点坐标：

const countryPathMap = {
  MZ: {
    d: "M346.86 200.232h-1.219l-.09-.863...", // 原Path的d属性值
    center: { cx: 345.2, cy: 198.6 } // 后续计算的中心点
  },
  US: {
    d: "...", // 美国区域的Path d值
    center: { cx: 120.5, cy: 89.3 }
  },
  // 其他所有国家的条目...
};

步骤2：预计算Path的中心点坐标 #

SVG的Path没有直接提供中心点，需要通过路径的**边界框（Bounding Box）**计算中心。为避免React Native渲染时性能损耗，建议提前在浏览器环境批量计算：

// 浏览器控制台运行的脚本，批量生成中心点
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
document.body.appendChild(svg);

function getPathCenter(pathD) {
  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  path.setAttribute("d", pathD);
  svg.appendChild(path);
  const bbox = path.getBBox();
  svg.removeChild(path);
  return {
    cx: bbox.x + bbox.width / 2,
    cy: bbox.y + bbox.height / 2
  };
}

// 给映射表的每个条目添加center属性
for (const countryId in countryPathMap) {
  countryPathMap[countryId].center = getPathCenter(countryPathMap[countryId].d);
}

把计算出的center数据直接写入countryPathMap即可。

步骤3：改造SvgComponent组件 #

将原硬编码的Path改为从映射表渲染，同时根据API传入的regions数据，匹配对应国家的中心点渲染Circle：

import * as React from "react";
import { moderateScale } from "react-native-size-matters";
import Svg, { Rect, Path, Circle } from "react-native-svg";

// 预定义的国家路径映射表（包含d属性和预计算的中心点）
const countryPathMap = {
  // 填充所有国家的条目...
};

function SvgComponent({ props, regions }) {
  return (
    <Svg
      height={250.76015857284443}
      width={375}
      xmlns="http://www.w3.org/2000/svg"
      style={{
        top: moderateScale(30),
        alignSelf: "center",
      }}
      viewBox="0.2943508424182359 0.2943508424182359 600 256.76015857284443"
      preserveAspectRatio="xMinYMin"
      overflow="hidden"
      {...props}
    >
      <Rect
        x={-4035.01}
        y={-1726.15}
        width={10090}
        height={4317.85}
        rx={0}
        ry={0}
        fill="none"
        transform="scale(.2973)"
        style={{
          WebkitTapHighlightColor: "transparent",
        }}
        fillOpacity={0}
      />
      {/* 渲染所有国家的Path */}
      {Object.entries(countryPathMap).map(([id, { d }]) => (
        <Path
          key={id}
          fill="#88a4bc"
          stroke="#fff"
          d={d}
          className={`sm_state sm_state_${id}`}
          strokeWidth={1.124908875}
          strokeLinejoin="round"
          style={{
            WebkitTapHighlightColor: "transparent",
          }}
          opacity={1}
          cursor="pointer"
          strokeOpacity={1}
          fillOpacity={1}
        />
      ))}
      {/* 根据API数据渲染对应国家的Circle */}
      {regions?.map((region) => {
        const countryData = countryPathMap[region.id];
        if (!countryData) return null; // 跳过未匹配的国家
        return (
          <Circle
            key={region.id}
            cx={countryData.center.cx}
            cy={countryData.center.cy}
            r={92 / 9}
            fill="red"
          />
        );
      })}
    </Svg>
  );
}

export default SvgComponent;

关键注意点 #

• 确保countryPathMap中的国家ID和API返回的id完全一致（比如API的"US"对应映射表的"US"）
• 优先选择预计算中心点，避免React Native中实时计算200个Path的边界框导致性能下降
• 如果需要动态计算（比如路径会动态变化），可以通过useRef获取Path元素，在组件挂载后调用getBBox()方法，但不推荐大规模使用

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