Pressto 设计系统集成把主题元数据安全带入 worklet 的终极方案【免费下载链接】presstoYour React Native app deserves better tap interactions.项目地址: https://gitcode.com/gh_mirrors/pre/presstoPressto 是一个面向 React Native 的主线程动画可按压组件库它让你用一个metadata字段就能把设计系统主题元数据安全地带入 Reanimated 的worklet并全程保持类型安全。下面这份指南手把手带你打通这条链路。为什么主题元数据难进 worklet在 Reanimated 里动画函数worklet运行在UI 线程而普通 JS 变量、主题对象活在JS 线程——两个线程天然隔离。这就是痛点你明明定义了漂亮的设计系统主题却无法在 worklet 里直接theme.colors.primary否则要么拿到undefined要么触发跨线程报错。Pressto 的答案非常克制一个类型化的metadata字段把主题对象整体穿墙送进 worklet且在 TypeScript 层给你完整的自动补全。核心原理一字段贯穿主题与 worklet整个机制由三层协作完成源码见 src/pressables/base.tsx类型层——createAnimatedPressableTMetadata()用泛型把你定义的主题类型注入 worklet配置层——PressablesConfig的metadata属性作为全局默认主题下发消费层—— worklet 的options.metadata直接读取onPress/globalHandlers也能拿到同一份数据。第一步定义一个类型安全主题先用 TypeScript 把你的设计系统写成类型完整示例见 example/app/metadata-example.tsxtype AppTheme { colors: { primary: string; primaryDark: string; background: string }; spacing: { medium: number; large: number }; borderRadius: { medium: number; large: number }; }; const theme: AppTheme { colors: { primary: #6366F1, primaryDark: #4F46E5, background: #0F172A }, spacing: { medium: 16, large: 24 }, borderRadius: { medium: 12, large: 16 }, };第二步用一行 metadata 注入全局主题import { PressablesConfig, PressableScale } from pressto; export default function App() { return ( PressablesConfig metadata{theme} PressableScale onPress{() {}} Text主题按钮/Text /PressableScale /PressablesConfig ); }配置类型定义位于 src/provider/index.tsx其中metadata?: TMetadata就是主题的传送门。第三步在 worklet 里安全消费const ThemedButton createAnimatedPressableAppTheme((progress, { metadata }) { worklet; // 必写告诉 Reanimated 这段要跑到 UI 线程 return { backgroundColor: metadata.colors.primary, padding: metadata.spacing.medium, borderRadius: metadata.borderRadius.medium, }; });注意开头那句worklet;—— 这是把函数搬进 UI 线程的护照漏了它主题读取和动画都会静默失效。metadata 的三级流转Pressto 对metadata的合并策略清晰且可预测见 src/pressables/base.tsx 的解析逻辑全局默认PressablesConfig metadata{theme}作用范围内所有 pressable 继承单组件覆盖PressableScale metadata{{ ...theme, name: checkout }} /它会替换而非合并全局值想保留主题就自行展开事件回传globalHandlers.onPress({ metadata })与组件自身的onPress都能拿到同一份 metadata方便做埋点识别。PressablesConfig globalHandlers{{ onPress: ({ metadata }) track(tap, metadata?.name), }} metadata{theme} PressableScale metadata{{ ...theme, name: checkout }} / /PressablesConfig这套行为的回归保障可参考测试用例 src/tests/metadata.test.tsx。避坑指南别让 worklet 指令失踪新手最常踩的坑动画写了、主题也传了就是不动。九成原因是漏了worklet;指令。好消息是 Pressto 自带了一把哨兵——eslint-plugin-pressto。它的规则 require-worklet-directive.js 会在编码阶段就揪出漏写worklet的createAnimatedPressable回调把线上隐患挡在开发期。 建议把eslint-plugin-pressto的 recommended 配置开起来和类型检查一起构成主题元数据安全的双保险。上手清单✅ 用类型定义设计系统主题而非散落的魔法值✅ 在根节点用PressablesConfig的metadata一次性下发主题✅createAnimatedPressableAppTheme泛型绑定类型✅ 每个 worklet 首行写worklet;✅ 需要单按钮差异化时用组件级metadata覆盖小结Pressto 把主题进 worklet这件在 React Native 里历来棘手的事收敛成一个类型化字段 一个泛型 一条 eslint 规则。你无需理解线程隔离的细节就能让设计系统稳稳地驱动 60fps 的按压动画。更多 API 细节可回到仓库根目录的 README.md 查阅完整文档。【免费下载链接】presstoYour React Native app deserves better tap interactions.项目地址: https://gitcode.com/gh_mirrors/pre/pressto创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考