لماذا يعتبر Animated API المدمج بطيئاً ولماذا تعد مكتبة React Native Reanimated هي المعيار الصناعي؟

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

لأن Animated المدمج غالباً ما يمر عبر خيط JavaScript البطيء أو يقتصر useNativeDriver فيه على التعتيم والتحويل، بينما Reanimated تنفذ كود الحركة بالكامل على خيط الـ UI مباشرة بواسطة Worklets بمعدل 60-120fps.

الشرح

عند استخدام Animated التقليدي دون useNativeDriver، يتم حساب كل إطار حركي في خيط الـ JS وإرساله عبر الـ Bridge، مما يسبب تقطيعاً وتجميداً فورياً للحركة إذا كان التطبيق يجري أي عملية منطقية. بينما تستخدم Reanimated تقنية Worklets لتجميع دوال JavaScript الصغيرة وتشغيلها مباشرة داخل خيط الـ UI بشكل منفصل تماماً عن خيط الـ JS.

مثال بالكود

// مثال Reanimated فائق السلاسة ينفذ على الـ UI Thread:
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';

function Box() {
  const offset = useSharedValue(0);

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

  return <Animated.View style={[styles.box, animatedStyles]} />;
}

أخطاء شائعة

• الاعتقاد بأن useNativeDriver في النظام المدمج يدعم تحريك خصائص العرض والارتفاع أو الألوان، حيث يدعم فقط transform و opacity.

أسئلة متابعة

• كيف تدمج React Native Gesture Handler (RNGH) مع Reanimated لبناء تفاعلات إيماءات لمسية فورية؟
• ما هو مفهوم الـ Shared Values في Reanimated وكيف تختلف عن useState؟

المصادر

• React Native docs — Animated
• Reanimated docs — Getting started