كيف تدمج React Native Gesture Handler (RNGH) مع Reanimated لبناء تفاعلات إيماءات لمسية فورية؟

الإجابة المختصرة

باستخدام Gesture.Pan() أو Gesture.Tap() وتمرير معالجات الأحداث الحركية (onUpdate, onEnd) لتعديل Shared Values مباشرة على خيط الـ UI بدون أي تأخير لمسي.

الشرح

تعترض مكتبة RNGH تفاعلات اللمس على المستوى الأصلي للنظام (Native Touch Handlers) دون المرور بآلية أحداث ريأكت التقليدية. بالتكامل مع Reanimated، يتم تطبيق إيماءات السحب والرمي (Fling / Pan) بحسابات فيزيائية مباشرة على الـ UI Thread، مما يمنح المستخدم تجربة سريعة وخالية تماماً من الـ Latency.

مثال بالكود

import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';

function DraggableBall() {
  const translationX = useSharedValue(0);

  const pan = Gesture.Pan()
    .onChange((event) => {
      translationX.value += event.changeX;
    })
    .onEnd(() => {
      translationX.value = withSpring(0);
    });

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: translationX.value }],
  }));

  return (
    <GestureDetector gesture={pan}>
      <Animated.View style={[styles.ball, animatedStyle]} />
    </GestureDetector>
  );
}

أخطاء شائعة

• نسيان تغليف جذر التطبيق بالكامل بمكون <GestureHandlerRootView>، مما يعطل عمل الإيماءات في أندرويد.

أسئلة متابعة

• ما هو مفهوم الـ Shared Values في Reanimated وكيف تختلف عن useState؟
• لماذا يعتبر Animated API المدمج بطيئاً ولماذا تعد مكتبة React Native Reanimated هي المعيار الصناعي؟

المصادر

• React Native Gesture Handler docs — Introduction
• Reanimated docs — Handling gestures