React Native使用react-native-svg实现勾选框时对勾样式异常求助

问题根因 #

你遇到的对勾样式异常确实是checkMarkPath路径配置错误导致的：

• 原路径的终点坐标(69, 1.5)已经超出了你定义的64x64选框范围，且路径走势是从左下直接向右上方延伸，没有对勾的第二个折角，自然渲染为斜向线段，而非预期的对勾形状。
• 原路径使用的贝塞尔曲线参数配置不符合对勾的形态要求，多余的曲线命令也会干扰最终渲染效果。

排查步骤 #

1. 剥离动画逻辑单独验证路径：注释掉动画相关代码，直接用静态Path组件渲染checkMarkPath，可以确认路径本身的形态错误，排除动画逻辑的影响。
2. 核对坐标范围：你内部选框的有效坐标范围是x:0-64、y:0-64，原路径终点x=69、y=1.5已经超出边界，被clipPath裁剪后就会呈现你看到的短斜杠效果。

修复方案 #

替换checkMarkPath为适配你64x64选框的标准对勾路径即可，推荐使用更简单的折线命令实现，形态可控性更高：

// 替换原来的checkMarkPath定义
const checkMarkPath = 'M15 31L28 44L49 23'

如果需要带圆角的平滑对勾，可以改用二次贝塞尔曲线实现：

const checkMarkPath = 'M15 31Q17 33 28 44Q30 45 49 23'

可选优化：你代码中导入的AniamtedStroke拼写存在笔误，正确拼写应为AnimatedStroke，如果本地文件命名一致可忽略，否则会导致组件加载异常。

验证步骤 #

替换路径后先静态渲染确认对勾形态符合预期，再恢复动画逻辑，调整strokeWidth参数到你需要的粗细即可。

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