如何在React Native中使用Reanimated2实现StrokeDasharray动画？

错误根因 #

strokeDasharray 属于SVG的多值属性，原生要求接收数组格式的参数，而你当前代码直接向该属性传递了单个数值类型的动画值，原生层解析时尝试将Double类型强转为数组类型，直接触发类型转换异常。你之前在strokeDashoffset场景下运行正常，是因为strokeDashoffset本身就是单值属性，不存在类型匹配问题。

修复方案 #

根据你values.dash的实际格式调整即可：

场景1：values.dash本身就是虚线配置数组（如[实线长度, 间隔长度]） #

只需调整共享值的赋值逻辑，确保动画作用于数组整体即可：

// 初始化直接用数组赋值
const dashArray = useSharedValue(values.dash);

const rDash = useAnimatedStyle(() => {
  return {
    strokeDasharray: dashArray.value
  }
})

useAnimatedReaction(
  () => values.dash, // 直接监听dash值减少不必要的触发
  (newDash) => {
      dashArray.value = withSpring(newDash)
  },
  [values.dash]
)

场景2：values.dash是单个数字，需要等长实线和间隔的虚线效果 #

将单值包裹为[dash值, dash值]格式的数组即可：

// 初始化就转成数组格式
const dashArray = useSharedValue([values.dash, values.dash]);

const rDash = useAnimatedStyle(() => {
  return {
    strokeDasharray: dashArray.value
  }
})

useAnimatedReaction(
  () => values.dash,
  (newDash) => {
      dashArray.value = withSpring([newDash, newDash])
  },
  [values.dash]
)

如果需要实线段和间隔长度不同，直接修改数组第二个参数即可，比如[newDash, 2]就代表实线长度为dash值，间隔固定为2像素。

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