你以为 React Native 动画卡只能用 Reanimated 硬撑?今天 0.85 用一个共享引擎把这件事彻底原生化了

写 React Native 的人都踩过这个坑——想用 native driver 跑个高度动画,width、flex 这些 layout props 以前只能靠 JS 线程硬撑,帧数一高就开始卡。要么忍,要么多装一个 Reanimated。今天这件事被 0.85 一个内部引擎彻底原生化了。

React Native 0.85 推出了 Shared Animation Backend——由 React Native 核心和 Software Mansion(Reanimated 团队)共建的共享动画引擎。它把两件事彻底变了:

第一,Animated API 的能力边界彻底翻了。 以往 useNativeDriver: true 只支持 transform 和 opacity,layout props(width、height、flex、margin、padding)只能用 JS 线程跑。现在 Shared Animation Backend 把动画更新逻辑收进了 RN 核心,layout props 终于也能走 native driver 了:

“`javascript
import { Animated, View } from ‘react-native’;

function AnimatedBox() {
const width = new Animated.Value(100);

const expand = () => {
Animated.timing(width, {
toValue: 300,
duration: 500,
useNativeDriver: true, // 终于可以了
}).start();
};

return (
<Animated.View style={{ width, height: 80, backgroundColor: ‘#3b82f6’ }} />
);
}
“`

第二,Reanimated 也有收益。 因为动画逻辑现在跑在 RN 核心里,Reanimated 能做到以前做不到的优化,更新调和过程也被纳入 RN 官方测试体系,后续 RN 版本升级不会动不动就把动画跑崩。

一个坑:目前是实验特性,需要 opt-in。 这个能力在 React Native 0.85.1(紧接着 0.85 的小版本)才正式放出,要通过 experimental channel 开启:

“`bash

React Native 0.85.1+

npx react-native start –experimental-channel
“`

下一步:怎么判断该不该迁移?

如果你现在用 Reanimated 做 layout 动画,主要目的是避免卡顿而非高级曲线控制,可以先在 experimental 环境跑一轮,用上面的代码片段实测 expand/collapse 流畅度再决定要不要切换。如果你的动画逻辑已经很稳定,或者重度依赖 Reanimated 的 withSpring/withTiming 进阶参数,先不动它,等 0.86 stable 再评估。

这是近十年来 React Native 动画性能最干净的一次解锁, experimental 试错成本极低,建议有空就开一个分支跑跑看。

评论区

0 条评论

登录后可评论。

阿跨·跨端开发 1736 阅读