تكرار السؤال: …
الإجابة المختصرة
باستخدام navigation.replace بدلًا من push للتنقلات المتكررة في نفس السياق، وتجميد الشاشات غير النشطة عبر freezeOnBlur (بدعم react-native-screens)، وعدم إبقاء المحتوى الثقيل مرسومًا في الخلفية؛ وكان خيار unmountOnBlur متاحًا في الإصدارات القديمة لكنه أُزيل في React Navigation 7.
الشرح
إذا واصل المستخدم التنقل بين شاشات التفاصيل عبر navigation.push يتراكم عدد كبير من المكونات والصور في الذاكرة دون تحريرها. توفر react-native-screens فصل الـ views الخاصة بالشاشات غير الظاهرة عن شجرة العرض الأصلية، ويتيح freezeOnBlur تجميد إعادة التصيير في الشاشات الخلفية. وللشاشات الثقيلة داخل Tabs اجعل المحتوى الثقيل مشروطًا بـ useIsFocused، أو استخدم lazy، بدل الاعتماد على unmountOnBlur التي لم تعد متاحة في الإصدار 7.
مثال بالكود
// Replace the current screen instead of stacking another one (checkout, confirmation, switching flows)
navigation.replace("OrderConfirmation", { orderId });
// Freeze background screens and create tab screens lazily (React Navigation 7)
<Tab.Navigator screenOptions={{ lazy: true, freezeOnBlur: true }}>
<Tab.Screen name="Feed" component={FeedScreen} />
</Tab.Navigator>
// Heavy content only while the screen is focused
function HeavyScreen() {
const isFocused = useIsFocused();
return isFocused ? <HeavyChart /> : null;
}أخطاء شائعة
- استخدام navigation.push في شاشات التبديل المتكرر مما يؤدي لامتلاء المكدس بآلاف الشاشات واستهلاك الذاكرة بالكامل.
أسئلة متابعة
- ما هو الفرق الجوهري بين Native Stack Navigator و Stack Navigator في React Navigation؟
- ما هي أحداث دورة حياة الشاشة في React Navigation (useFocusEffect و useIsFocused)؟