关于javascript:reactnativereanimated-与reactnativesvg-使用中的一个小问题

应用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 应用中的一个小问题

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理