Keplr移动端饼图点击事件处理：区分可用币与质押区块

在移动端Keplr应用中，当账户有可用币且处于质押状态时，会展示一个饼图：绿色半圆代表可用币，蓝色半圆代表质押资产。当前使用react-native-svg绘制该饼图，通过两组<Use>和<Circle>标签分别渲染两个半圆。但添加onPress点击事件后，无论点击哪个半圆，始终触发eventClick("first")，需要实现点击可用币（first-arc）触发eventClick("first")，点击质押区块（second-arc）触发eventClick("second")。

以下是几种可行的解决思路，按优先级排序：

1. 为每个圆弧元素绑定独立事件并确保点击区域不重叠 #

核心问题大概率是两个圆弧的点击区域重叠，或是<Use>标签的事件绑定未正确关联对应元素。直接用<Circle>绘制两个半圆，为每个元素绑定带明确参数的事件函数，同时通过角度划分确保绘制范围无重叠：

import Svg, { Circle } from 'react-native-svg';

// 绘制可用币半圆（绿色）
<Circle
  cx="50"
  cy="50"
  r="40"
  fill="#2ecc71"
  startAngle={0}
  endAngle={Math.PI}
  stroke="none"
  onPress={() => eventClick("first")}
/>

// 绘制质押资产半圆（蓝色）
<Circle
  cx="50"
  cy="50"
  r="40"
  fill="#3498db"
  startAngle={Math.PI}
  endAngle={2 * Math.PI}
  stroke="none"
  onPress={() => eventClick("second")}
/>

这种方式通过startAngle和endAngle明确划分两个半圆的范围，避免点击区域重叠，同时每个元素的onPress函数直接传递对应参数，不会出现混淆。

2. 通过元素ID区分触发事件的目标 #

如果必须使用<Use>标签复用元素，可以给每个<Use>设置唯一id，并在统一的事件处理函数中通过事件目标的ID判断触发逻辑：

import Svg, { Defs, Circle, Use, ClipPath, Rect } from 'react-native-svg';

const handlePress = (e) => {
  const targetId = e.nativeEvent.target.id;
  switch(targetId) {
    case "first-arc-use":
      eventClick("first");
      break;
    case "second-arc-use":
      eventClick("second");
      break;
    default:
      break;
  }
};

<Defs>
  {/* 定义可复用的半圆模板 */}
  <Circle id="half-circle" cx="50" cy="50" r="40" stroke="none" />
  {/* 定义裁剪路径限制显示范围 */}
  <ClipPath id="first-clip">
    <Rect x="0" y="0" width="50" height="100" />
  </ClipPath>
  <ClipPath id="second-clip">
    <Rect x="50" y="0" width="50" height="100" />
  </ClipPath>
</Defs>

{/* 使用模板并设置独立ID、裁剪路径和点击事件 */}
<Use
  href="#half-circle"
  id="first-arc-use"
  fill="#2ecc71"
  clipPath="url(#first-clip)"
  onPress={handlePress}
/>
<Use
  href="#half-circle"
  id="second-arc-use"
  fill="#3498db"
  clipPath="url(#second-clip)"
  onPress={handlePress}
/>

通过clipPath确保每个<Use>只显示对应的半圆区域，同时利用id在事件处理中区分点击目标，避免事件混淆。

3. 调整元素层级与指针事件属性 #

如果是元素层级导致点击事件被上层元素拦截，可以调整渲染顺序或设置pointerEvents属性控制事件响应：

• 将需要优先响应点击的元素放在后面渲染（react-native-svg中后渲染的元素层级更高）
• 给上层元素设置pointerEvents="box-only"，确保只响应自身范围内的点击，不覆盖下层元素

示例：

// 先渲染first-arc，再渲染second-arc，确保second-arc的点击区域可被触发
<Use href="#first-arc" onPress={() => eventClick("first")} pointerEvents="box-only" />
<Use href="#second-arc" onPress={() => eventClick("second")} />

• 确保每个圆弧的绘制范围（角度、裁剪路径）无重叠，否则点击重叠区域会触发上层元素的事件
• react-native-svg中<Use>标签的事件绑定依赖于引用元素的可点击区域，必要时直接使用<Circle>、<Path>等基础图形标签替代复用标签
• 避免在事件绑定中使用共享闭包变量，确保每个元素的事件函数传递的参数明确

内容的提问来源于stack exchange，提问作者Thành Lệ