当我们使用,或之react-native-reanimated类的动画属性时，在“本机” UI 线程上运行动画。这些属性不会影响布局引擎，因此我们可以在主线程 (JS) 上完成布局，通过桥将值传递给 UI 线程，然后在不涉及布局引擎的情况下为内容设置动画。translateXscaleopacityreact-native-reanimated
height但是，当,padding或之类的属性margin被动画化时，就不是很清楚了。这些属性会影响布局，我们需要在属性发生变化时更新布局。但是布局是由 Javascript 中的主线程完成的。如果布局引擎必须在每一帧都处于活动状态，因为height或padding已经改变，它肯定会严重影响性能。
事实上，我目前在制作动画时遇到了巨大的性能问题padding。分析器告诉我性能问题来自网桥。似乎 UI 线程每帧都回调 Javascript，可能是为了让主线程更新布局，然后布局再次通过桥传递给原生。
但是，react-native-reanimated提供了 example widthandheight/index.js，它清楚地为 等属性设置了动画width，height并且fontSize对布局有影响。此示例以 60fps 平稳运行。
如何react-native-reanimated处理对布局有影响的动画？动画开始和结束时是否有布局过程，中间只有 UI 线程（这听起来像是实验性的过渡功能，但我不是在谈论过渡）。为了获得良好的性能，是否需要遵循一些特殊的方法？
编辑：与此同时，我了解到其中一些假设是错误的。React Native 布局不是在 Javascript 线程上完成的，而是在原生 UI 线程上完成的。所以，原则上，动画时不应该有过桥调用padding，width和margin。我的性能问题可能源于我的布局太复杂而无法以 60 fps 更新。