أسئلة مقابلات Animations & Gestures (Reanimated & RNGH) في React Native
10 سؤال عن Animations & Gestures (Reanimated & RNGH) من مسار React Native. اقرأ الإجابة المختصرة لكل سؤال هنا، وافتح السؤال للشرح الكامل والأمثلة والأخطاء الشائعة والمصادر.
- متوسط
لماذا يعتبر Animated API المدمج بطيئاً ولماذا تعد مكتبة React Native Reanimated هي المعيار الصناعي؟
لأن Animated المدمج غالباً ما يمر عبر خيط JavaScript البطيء أو يقتصر useNativeDriver فيه على التعتيم والتحويل، بينما Reanimated تنفذ كود الحركة بالكامل على خيط الـ UI مباشرة بواسطة Worklets بمعدل 60-120fps.
اقرأ الشرح الكامل - متوسط
ما هو مفهوم الـ Shared Values في Reanimated وكيف تختلف عن useState؟
الـ Shared Values تحتفظ ببيانات رقمية حركية قابلة للتعديل والوصول المتزامن من كلا الخيطين (JS و UI)، وتعديلها لا يطلق دورة إعادة تصيير (Re-render) في شجرة ريأكت بل يغير عقد الرسم مباشرة.
اقرأ الشرح الكامل - متقدم
كيف تدمج React Native Gesture Handler (RNGH) مع Reanimated لبناء تفاعلات إيماءات لمسية فورية؟
باستخدام Gesture.Pan() أو Gesture.Tap() وتمرير معالجات الأحداث الحركية (onUpdate, onEnd) لتعديل Shared Values مباشرة على خيط الـ UI بدون أي تأخير لمسي.
اقرأ الشرح الكامل - متوسط
ما هي حركات التخطيط التلقائية (Layout Animations) في Reanimated؟
هي ميزة تتيح للعناصر التحرك تلقائيًا بحركات دخول وخروج وانتقال (Entering, Exiting, Layout) عند إضافتها أو حذفها أو تغيير حجمها في الشجرة دون كتابة كود حركة معقد.
اقرأ الشرح الكامل - متقدم
ما هي حركات العناصر المشتركة (Shared Element Transitions) بين الشاشات وكيف تنفذها؟
هي حركة انتقال سلسة لعنصر بصري (مثل صورة منتج) أثناء الانتقال من شاشة القائمة إلى شاشة التفاصيل ليتوسع بسلاسة من موضعه الأصلي إلى موضعه النهائي في الشاشة الجديدة.
اقرأ الشرح الكامل - مبتدئ
متى نستخدم Lottie Animations وكيف نتحكم في تشغيل ملفات JSON الحركية في React Native؟
نستخدم Lottie لعرض الرسوم المعقدة التي يصممها محترفو الأنيميشن على Adobe After Effects وتصديرها كملفات JSON متجهة خفيفة، باستخدام مكتبة lottie-react-native.
اقرأ الشرح الكامل - متوسط
ما هي حركات النوابض الفيزيائية (Spring Physics) ومزاياها مقارنة بالحركات التوقيتية (Timing Animations)؟
حركات الـ Spring تحاكي القوانين الفيزيائية الحقيقية (الكتلة والصلابة والتخميد) دون تحديد مدة زمنية ثابتة، وتتكيف طبيعياً مع سرعة إيماءة إصبع المستخدم دون توقف مصطنع.
اقرأ الشرح الكامل - متقدم
كيف تبني مؤشر تمرير مخصص (Custom Scroll Interpolation) باستخدام useAnimatedScrollHandler؟
باستخدام useAnimatedScrollHandler لتسجيل إزاحة التمرير (contentOffset.y) في قيمة Shared Value، واستخدام interpolate لربطها بتغيير شفافية أو حجم شريط العنوان بسلاسة.
اقرأ الشرح الكامل - متقدم
ما هي مكتبة React Native Skia وكيف تستخدم للرسوم البيانية والمؤثرات البصرية ثنائية الأبعاد فائقة السرعة؟
هي غلاف عالي الأداء لمحرك Google Skia المكتوب بـ C++، يتيح الرسم المباشر على الـ Canvas، وإنشاء التدرجات اللونية الحركية (Shaders)، والرسوم البيانية المخصصة بطلاقة 120fps.
اقرأ الشرح الكامل - متوسط
كيف تكتشف وتعالج تقطيع الفريمات وسقوط الإطارات (Dropped Frames) أثناء الحركات؟
باستخدام شاشة Perf Monitor في قائمة المطورين ومراقبة عدادي UI FPS و JS FPS لتحديد الخيط المسؤول عن التقطيع، مقترنة بأدوات React Native DevTools (Profiler).
اقرأ الشرح الكامل