前端实战

把 PanResponder 和 GestureHandler 的抽象对齐到一套手势模型里,我们踩过的坑和最终选型

跨端组件库需同时兼容 React Native 新旧架构,手势系统成为最大难点。PanResponder 与 Gesture Handler 在事件响应链、状态机粒度和坐标体系上存在结构性差异,无法直接对齐。最终方案以 Gesture Handler 的完整手势模型为统一抽象层,向上提供声明式 API,向下通过适配器模式模拟 PanResponder 的缺失状态与坐标补偿,在保留旧架构兼容性的同时,确保新架构下零开销直通。

前端实战

同一套设计令牌在 React Native、Flutter 和 Web 里跑出三套样式,我们踩过的坑比想象中多

设计令牌从 Figma 导出 JSON 后,在三端渲染时因平台差异产生大量样式不一致问题。颜色方面,Android 动态色彩、Flutter 色域、Web 深色模式自动反转导致色差;字号受设备像素比和系统缩放影响;间距圆角存在像素取整差异;阴影和动效因渲染引擎不同难以统一。解决方案包括在令牌中引入渲染意图标记、字号缩放限制、安全值检查、自定义贝塞尔曲线,以及建立令牌契约测试防止生成器错误。