تكرار السؤال: …
الإجابة المختصرة
بتعريف RootStackParamList يحدد أسماء كافة المسارات ونوع المعاملات المقبولة، واستخدامه مع NativeStackScreenProps أو خطاف useNavigation.
الشرح
يمنع هذا النمط أخطاء أسماء المسارات الإملائية وتمرير معاملات ناقصة أو غير صالحة بين الشاشات. يتيح تعريف أنواع عامة (Global Type Augmentation) لـ ReactNavigation.RootParamList الاستفادة التلقائية من الإكمال الذكي للروابط (Autocomplete) في كافة أرجاء التطبيق.
مثال بالكود
export type RootStackParamList = {
Feed: undefined;
Profile: { userId: string; source?: string };
};
// داخل مكون الشاشة:
import type { NativeStackScreenProps } from '@react-navigation/native-stack';
type Props = NativeStackScreenProps<RootStackParamList, 'Profile'>;
function ProfileScreen({ route, navigation }: Props) {
const { userId } = route.params; // التحقق الصارم من نوع المعاملات
return <Text>معرف المستخدم: {userId}</Text>;
}أخطاء شائعة
- استخدام useNavigation<any>() مما يلغي كافة مزايا TypeScript ويسمح بتسرب أخطاء runtime غير المكتشفة.
أسئلة متابعة
- ما هي معمارية Expo Router وكيف تختلف بنية File-based Routing عن React Navigation التقليدي؟
- ما هو الفرق الجوهري بين Native Stack Navigator و Stack Navigator في React Navigation؟