تكرار السؤال: …
الإجابة المختصرة
يعتمد Expo Router على هيكل الملفات والمجلدات لتوليد مسارات التطبيق تلقائياً (كما في Next.js) مع دعم الروابط العميقة و Universal Links افتراضياً وتوحيد كود الويب والهاتف.
الشرح
بدلاً من كتابة ملفات تكوين مسارات ضخمة، يمثل كل ملف داخل مجلد app/ شاشة في التطبيق (مثل app/index.tsx لشاشة البداية، و app/profile/[id].tsx للشاشات الديناميكية). يوفر Expo Router ميزات قوية مثل Nested Layouts عبر _layout.tsx، ودعم Type-safe Routes تلقائياً مع الاستفادة من محرك React Navigation في الخلفية.
مثال بالكود
// هيكل المجلدات في Expo Router:
// app/
// _layout.tsx // الحاوية والـ Stack الرئيسي
// index.tsx // الشاشة الرئيسية (/)
// user/
// [id].tsx // شاشة ديناميكية (/user/42)
// استخدام التوجيه:
import { Link } from 'expo-router';
<Link href="/user/42">زيارة الملف الشخصي</Link>;أخطاء شائعة
- تسمية الملفات بأسماء تتعارض مع أنماط Expo Router الخاصة مثل استخدام أسماء تبدأ بشرطة سفلية _ دون قصد حجزها كـ Layouts.
أسئلة متابعة
- كيف تطبق أمان الأنواع الكامل (Type-Safe Navigation) في React Navigation مع TypeScript؟
- كيف تدير الروابط العميقة (Deep Linking & Universal Links) لفتح شاشات محددة من الروابط الخارجية؟