时间戳

首页 > 解决方案 > react spring如何原生渲染？

reactjs - react spring如何原生渲染？

问题描述

react spring 自带了一个animated功能，可以让组件进行原生修改，而无需重新渲染组件。我发现动画组件有几个方法类似于react native 的动画组件。两者之间是否有任何联系，或者这些概念.interpolate()对于动画库来说是否非常普遍？

标签： reactjsreact-nativereact-spring

解决方案

该库最初是 Animated 的一个分支，内部仍然有很多相似之处。Christopher Chedeau 的 Animated 有一个专门用于网络的存储库：https ://github.com/animatedjs/animated遗憾的是它不再维护。

它的工作方式是组件通过 createAnimatedComponent （被公开为“动画”）包装：https ://github.com/react-spring/react-spring/blob/master/src/animated/createAnimatedComponent.tsx

这个高阶组件拦截样式和属性（它们不是原始值，而是自更新类）。它调用“applyAnimatedValues”来写入 React 外部的目标。每个目标（dom、native、konva、三个等）都必须填写。例如，dom 如何应用这些道具：https ://github.com/react-spring/react-spring/blob/master/src/targets/web/globals.ts#L82-L127

希望有帮助！

推荐阅读