山西省财政厅网站三基建设专栏听完米课做的网站

山西省财政厅网站三基建设专栏,听完米课做的网站,粉红色主题 模板 网站 在线预览,做汤的网站有哪些[toc] 只要 RN 项目里一旦涉及到图片编辑、画布、地图、白板、卡片拖拽这些复杂交互#xff0c;手势问题几乎是必踩坑。 常见的吐槽包括#xff1a; 手势一多就开始互相打架JS 线程一忙#xff0c;动画直接掉帧Reanimated 写到后面自己都不敢改 这篇文章不讲零散 API#x…[toc]只要 RN 项目里一旦涉及到图片编辑、画布、地图、白板、卡片拖拽这些复杂交互手势问题几乎是必踩坑。常见的吐槽包括手势一多就开始互相打架JS 线程一忙动画直接掉帧Reanimated 写到后面自己都不敢改这篇文章不讲零散 API而是从架构设计的角度一步步讲清楚复杂手势在 RN 里应该怎么“组织”并给你一套可直接复用的模式。为什么 RN 复杂手势容易失控先理解为什么问题会集中爆发。1. 手势不是“事件”而是“状态机”拖拽、缩放、旋转都不是 click 这种瞬时事件而是有开始有持续变化有结束还可能并发发生如果你把它们当成普通回调来写代码一定会乱。2. JS 线程天生不适合做高频动画如果你还在用onGestureEvent{()setState(...)}那掉帧是必然的。复杂手势的更新频率非常高60fps必须让动画跑在 UI 线程。3. Reanimated 写法容易“业务 动画搅在一起”很多项目的 Reanimated 代码长这样手势逻辑动画计算边界判断业务状态全写在一个useAnimatedGestureHandler里半年后没人敢动。手势体系的正确打开方式核心思想一句话总结Gesture Handler 负责“识别手势”Reanimated 负责“驱动动画”JS 负责“业务决策”。三者职责一定要拆开。Gesture Handler v2 的设计模式v2 是一个质的变化不只是 API 更好看。推荐组合方式Gesture 识别 Shared Value 状态 Animated Style 表现核心原则不在 JS 里算位移不在手势回调里写业务手势只改 Shared ValueShared Values复杂手势的“唯一数据源”Shared Value 的最大价值不是性能而是让状态变得可控。推荐的状态拆分constscaleuseSharedValue(1);constrotationuseSharedValue(0);consttranslateXuseSharedValue(0);consttranslateYuseSharedValue(0);每个手势只负责自己那一块数据。Demo可缩放 / 旋转 / 拖拽的图片编辑器这是一个可以直接跑的 Demo 结构非常适合图片编辑、贴纸、画布类场景。1. 初始化 Shared ValuesconstscaleuseSharedValue(1);constrotationuseSharedValue(0);consttranslateXuseSharedValue(0);consttranslateYuseSharedValue(0);这些值就是你这个组件的“物理状态”。2. 拖拽手势PanconstpanGestureGesture.Pan().onUpdate(e{translateX.valuee.changeX;translateY.valuee.changeY;});这里有两个关键点用changeX / changeY不是translationX不依赖 JS不 setState3. 缩放手势PinchconstpinchGestureGesture.Pinch().onUpdate(e{scale.valuee.scale;});这里不做边界判断只负责“真实缩放”。4. 旋转手势RotationconstrotationGestureGesture.Rotation().onUpdate(e{rotation.valuee.rotation;});保持简单逻辑越少越稳定。5. 手势组合关键constcomposedGestureGesture.Simultaneous(panGesture,pinchGesture,rotationGesture);Simultaneous 是复杂交互的核心不要再手写冲突判断。6. Animated Style统一渲染出口constanimatedStyleuseAnimatedStyle((){return{transform:[{translateX:translateX.value},{translateY:translateY.value},{scale:scale.value},{rotateZ:${rotation.value}rad},],};});这里是唯一一个关心“怎么画”的地方。7. 完整组件结构GestureDetector gesture{composedGesture} Animated.Image source{require(./image.png)} style{[styles.image, animatedStyle]} / /GestureDetector结构非常清晰Gesture 负责交互Animated Style 负责展示JS 不参与动画架构拆分让 Reanimated 不再难维护推荐拆分方式usePanGesture.ts usePinchGesture.ts useRotationGesture.ts useTransformStyle.ts每个 Hook 只干一件事。示例usePanGestureexportfunctionusePanGesture(x,y){returnGesture.Pan().onUpdate(e{x.valuee.changeX;y.valuee.changeY;});}这样做的好处手势逻辑可以复用改一个手势不影响其他新人也能看懂手势冲突怎么排查1. 优先用 Simultaneous / Exclusive不要自己写 if 判断。2. 打印 Shared Value而不是 JS stateuseDerivedValue((){console.log(scale.value);});3. 暂时禁用某个手势快速定位constdisabledGestureGesture.Pan().enabled(false);为什么这种架构不卡原因很简单手势识别在 UI 线程动画计算在 UI 线程JS 线程完全不参与高频更新JS 只在你需要的时候比如点击保存读取最终状态。实际场景怎么用图片编辑器拖动图片双指缩放旋转角度地图 / 画布平移视口缩放画布多点协作卡片编辑 / 贴纸系统拖动排序旋转贴纸缩放元素总结RN 复杂手势不是 API 难而是架构没想清楚。你只要记住这几条手势 ≠ 业务Shared Value 是唯一真相UI 动画不要走 JSGesture 组合优于冲突判断这套模式一旦搭好后面加手势、调动画都非常稳。