应用 react-native-reanimated 能够在使 RN 上的动画更加晦涩。应用它的陈说式的 api 将动画事后定义好。并在 UI 线程中运行，防止了 js 与 native 的交互。实现了 60FPS 的动画成果。
本文记录一次在应用 reanimated 和 react-native-svg 中遇到的一个问题曾经解决方案。
遇到的问题
最近一个需要中，遇到须要利用 svg 来实现一个绳子弹动的动画。
在做 demo 时，成果合乎预期。
但当放到实在的页面中，并存在大量组件渲染时，通过Animated.createAnimatedComponent(Path) 创立的<Path /> 组件在执行动画时存在卡顿的状况（并不合乎预期）。
解决形式
最终一番排查问题之后，找到问题所在。感激这个 issue – Animating SVGs with reanimated are not native animations
reanimated 默认只对存在白名单中的 props 解决成 native 端执行动画
而在 svg 中，想要批改 <Path /> 上的 props 来实现动画，比方d 这种，默认是不在 native 端执行
所以须要把d 这个 prop 加到 reanimated 的白名单中，应用上面两行代码：
Animated.addWhitelistedNativeProps({d: true})
Animated.addWhitelistedUIProps({d: true})
当然除了<Path /> 的d prop，别的组件上的 prop 都能用这种形式增加到 reanimated 的白名单中
最初
最终通过上文提到的 issue 我的问题失去了解决，reanimated 的维护者也将上述两个办法增加到了 reanimated v1.x.x 的文档中。
本文作者：Roy Luo
本文链接：react-native-reanimated 与 react-native-svg 应用中的一个小问题