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

38次阅读

共计 783 个字符,预计需要花费 2 分钟才能阅读完成。

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

正文完
 0