تكرار السؤال: …
الإجابة المختصرة
هي حركة انتقال سلسة لعنصر بصري (مثل صورة منتج) أثناء الانتقال من شاشة القائمة إلى شاشة التفاصيل ليتوسع بسلاسة من موضعه الأصلي إلى موضعه النهائي في الشاشة الجديدة.
الشرح
توفر Reanimated v3 دعماً مدمجاً لحركات العناصر المشتركة عبر خاصية sharedTransitionTag. عندما تحتوي الشاشة الأولى والشاشة الثانية على عنصرين يحملان نفس الـ tag، يقوم محرك الحركات بحساب مسار التحول ومطابقة أبعاد العنصر وموضعه بسلاسة دون انقطاع أثناء تنقل الراوتر.
مثال بالكود
// في شاشة القائمة:
<Animated.Image
source={{ uri: item.imageUrl }}
sharedTransitionTag={`image-${item.id}`}
style={styles.thumbnail}
/>
// في شاشة التفاصيل:
<Animated.Image
source={{ uri: item.imageUrl }}
sharedTransitionTag={`image-${item.id}`}
style={styles.fullHeroImage}
/>أخطاء شائعة
- استخدام sharedTransitionTag متطابق لأكثر من عنصر ظاهر على نفس الشاشة مما يسبب تعارض المعرفات.
أسئلة متابعة
- ما هو الفرق الجوهري بين Native Stack Navigator و Stack Navigator في React Navigation؟
- ما هو مفهوم الـ Shared Values في Reanimated وكيف تختلف عن useState؟