React Native SVG中Path组件onPress在Android端失效问题排查

这个问题大概率和viewBox、width/height的设置有关——Android端react-native-svg对这些属性的正确性要求比iOS更严格，很容易因为设置不当导致点击区域和视觉图形错位。

核心排查方向： #

• viewBox不匹配
  如果viewBox的数值没有完全包裹所有Path的图形范围，Android会错误计算可点击区域，比如部分Path的点击区域被移出可视范围，或者和其他元素的点击区域重叠覆盖。
  解决办法：用SVG编辑器导出正确的viewBox（比如Figma导出时会自动生成匹配的viewBox），或者手动调整viewBox="0 0 实际图形宽度 实际图形高度"，确保所有Path都在这个范围内。

• width/height比例不一致
  Android端对SVG缩放的解析和iOS有差异，如果Svg标签的width/height和viewBox的宽高比不匹配，会导致图形缩放后，点击区域和视觉图形错位。
  解决办法：给Svg设置固定数值的宽高（比如width={320} height={480}），并且保证宽高比和viewBox完全一致。例如viewBox是0 0 32 48，那Svg的宽高就设320和480，维持1:1.5的比例。

额外的必查点： #

• 给每个Path设置fill属性：Android端如果Path没有填充（哪怕有stroke），可能会导致点击区域失效，建议加fill="transparent"或者实际的填充色。
• 检查G标签的transform：如果给G标签加了translate、scale等变换，Android端的点击区域计算可能出错，尽量把变换直接应用到单个Path上，或者验证transform数值是否正确。
• 排查层级覆盖：确认没有其他绝对定位的View覆盖了无法点击的Path，导致点击事件被拦截。

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