على الويب، يُظهر شريط العنوان مكانك، ويمشي زرّ الرجوع عبر السجلّ. أما على الهاتف فلا يرى المستخدمون أيًّا منهما: يرون شاشات تنزلق من اليمين، وسهم رجوع أو إيماءة سحب، وtabs في الأسفل. وتحت السطح، ما زال Expo Router يعطي كل شاشة URL، وهذا ما يجعل الـ deep links والتنقّل المضبوط بالأنواع ونسخة الويب ممكنة. تحصل على النموذجين معًا.
\nيبني Expo Router نظام التنقّل من الملفات الموجودة في src/app. مسار الملف هو المسار (route):
src/app/\n _layout.tsx wraps everything below in a navigator\n index.tsx /\n about.tsx /about\n settings/\n _layout.tsx wraps the settings screens\n index.tsx /settings\n units.tsx /settings/units\n +not-found.tsx any URL that doesn't matchكل ملف مسار يصدّر component بشكل افتراضي (default export). وهذا كل ما تعنيه الشاشة:
\nimport { Text, View } from 'react-native';\n\nexport default function About() {\n return (\n <View style={{ flex: 1, padding: 16 }}>\n <Text>Trailhead keeps a private log of your hikes.</Text>\n </View>\n );\n}ولأن كل ملف في المجلّد يصبح مسارًا، أبقِ كل ما عداه في مكان آخر: src/components، وsrc/lib، وsrc/state. component صفّ حُفظ خطأً في src/app يصبح شاشة يستطيع أي أحد الوصول إليها عبر deep link.
يرسم ملف _layout.tsx أداة تنقّل حول المسارات الموجودة في مجلّده. يستخدم الـ root layout في Trailhead Stack، وهو أداة التنقّل الأصلية التي تضيف الشاشات وتُزيلها بحركات المنصّة، مع السحب للرجوع على iOS وإيماءة الرجوع على مستوى النظام في Android:
import { Stack } from 'expo-router';\n\nexport default function RootLayout() {\n return (\n <Stack screenOptions={{ headerTintColor: '#2f6f4e' }}>\n <Stack.Screen name=\"index\" options={{ title: 'Trailhead' }} />\n <Stack.Screen name=\"about\" options={{ title: 'About' }} />\n </Stack>\n );\n}تنطبق screenOptions على كل شاشة في الـ stack؛ وكل Stack.Screen يخصّص شاشة واحدة، تُطابَق باسم مسارها name. لست مضطرًا إلى إدراج كل مسار: المسارات غير المدرجة تعمل مع ذلك بالخيارات الافتراضية.
بضعة خيارات للترويسة تغطّي معظم الاحتياجات: title، وheaderShown: false للشاشات التي ترسم شريطها العلوي بنفسها (مثل الخريطة بملء الشاشة من الدرس السابق)، وheaderBackTitle للتسمية بجوار سهم الرجوع في iOS، وheaderRight لزرّ مثل “Edit”. وعلى iOS يعطيك headerLargeTitle: true العنوان الكبير القابل للطي الذي تراه في تطبيقات Apple نفسها، وهو يناسب قائمة رئيسية مثل سجلّ الرحلات.
وحين يعتمد العنوان على البيانات (اسم الرحلة مثلًا)، ارسم <Stack.Screen options={{ title: hike.name }} /> داخل الشاشة نفسها. لا يرسم شيئًا مرئيًا؛ بل يضبط ترويسة الشاشة التي هو فيها.
لكل ما ينقر عليه المستخدم، استخدم Link. يرسم نصًّا افتراضيًا؛ ومع asChild يسلّم التنقّل إلى الـ component القابل للضغط الخاص بك:
import { Link } from 'expo-router';\nimport { Pressable, Text, View } from 'react-native';\n\nexport default function HikeLog() {\n return (\n <View style={{ flex: 1, padding: 16, gap: 12 }}>\n <Link href=\"/about\">About Trailhead</Link>\n <Link href=\"/settings\" asChild>\n <Pressable accessibilityRole=\"button\">\n <Text>Settings</Text>\n </Pressable>\n </Link>\n </View>\n );\n}ومن الكود، بعد حفظ أو تسجيل دخول، استخدم الكائن router:
import { router } from 'expo-router';\n\nrouter.push('/settings/units'); // add a screen on top\nrouter.back(); // pop the top screen\nrouter.replace('/'); // swap the current screen; no way back to itpush هو الانتقال الأمامي المعتاد. وreplace للمسارات التي لا معنى للعودة فيها: بعد الشاشات التعريفية، وبعد تسجيل الدخول، وبعد تأكيد «تم الحفظ!». أما back فهو ما يفعله سهم الرجوع في الترويسة وإيماءة السحب أصلًا؛ استدعه بنفسك بعد حفظ نموذج ليعود المستخدم إلى حيث جاء. وهناك أيضًا router.navigate، الذي يذهب إلى مسار، وإن كان ذلك المسار موجودًا في الـ stack أصلًا، يعود إليه بدلًا من إضافة نسخة مكرّرة.
من المغري أن تعامل الـ stack كسجلّ المتصفّح، لكن هناك فرقًا واحدًا مهمًّا: كل شاشة في الـ stack تبقى مركّبة. حين تضيف شاشة تفاصيل الرحلة، يحتفظ السجلّ تحتها بالـ state وموضع التمرير، وتستمر الـ effects الخاصة به في العمل. ولهذا يكون الرجوع فوريًا، ولهذا أيضًا لا يُعاد تشغيل useEffect في الشاشة حين تعود إليها. وحين تحتاج إلى تحديث البيانات في كل مرة تعود فيها الشاشة إلى الواجهة، يوفّر Expo Router الـ hook useFocusEffect، الذي يعمل حين تحصل الشاشة على التركيز (focus) وينظّف حين تفقده.
يُرسم +not-found.tsx لأي URL لا يطابق مسارًا، وهذا يحدث على الجوّال غالبًا عبر deep links من رسائل بريد قديمة أو من شاشة غُيّر اسمها. أعطه رسالة ودودة وLink يعود إلى الرئيسية.
والتفكير بالـ URLs يؤتي ثماره لاحقًا في هذا القسم: يستطيع إشعار أن يفتح /hikes/42 مباشرة، ويستطيع رابط في رسالة أن يفتح التطبيق على الشاشة الصحيحة، وتعمل المسارات نفسها على الويب إن بنيت Trailhead له يومًا.
في الدرس التالي ستضيف tabs في أسفل التطبيق، وشاشة تفاصيل لكل رحلة، وتمرّر معرّف الرحلة عبر الـ URL.
\n","toc":[{"id":"sec-1","text":"الملفات هي المسارات","level":2},{"id":"sec-2","text":"الـ layouts تغلّف ما يجاورها","level":2},{"id":"sec-3","text":"التنقّل بين الشاشات","level":2},{"id":"sec-4","text":"الـ stack ليس سجلّ المتصفّح","level":2},{"id":"sec-5","text":"شاشة «غير موجود» ولماذا ما زالت الـ URLs مهمّة","level":2}],"takeaways":["كل ملف داخلsrc/app هو مسار (route)، ومساره هو الـ URL؛ أبقِ الـ components والـ hooks والأدوات المساعدة خارج ذلك المجلّد.","يغلّف ملف _layout.tsx المسارات المجاورة له بأداة تنقّل (navigator)، مثل Stack أصلي.","استخدم <Link href> للتنقّل الذي ينقر عليه المستخدم، واستخدم router.push وrouter.replace وrouter.back من الكود.","push يضيف شاشة إلى الـ stack، وback يُزيلها، وreplace يستبدل الشاشة الحالية فلا يستطيع المستخدم العودة إليها."],"further":[{"title":"Expo Router introduction","url":"https://docs.expo.dev/router/introduction/"},{"title":"Core concepts of file-based routing","url":"https://docs.expo.dev/router/basics/core-concepts/"},{"title":"Navigating between pages","url":"https://docs.expo.dev/router/basics/navigation/"}],"quiz":[{"q":"أضفت src/app/HikeRow.tsx ليحوي component صفّ قائمة قابلًا لإعادة الاستخدام. ماذا يحدث؟
Screen فقط على أنها مسارات.","why":"لا توجد قاعدة تسمية كهذه. كل ملف في مجلّد التطبيق مسار."},{"text":"يسجّله Expo Router مسارًا على /HikeRow، فيصبح component مخصّص لإعادة الاستخدام شاشةً يمكن التنقّل إليها.","why":"صحيح. ضع الـ components المشتركة في src/components (أو في أي مكان خارج src/app)."},{"text":"يفشل البناء، لأن ملفات المسارات يجب أن تكون بأحرف صغيرة.","why":"حالة الأحرف لا تجعل الملف خارج المسارات. سيُسجَّل مع ذلك على /HikeRow."}],"answer":1},{"q":"بعد أن ينهي المستخدم الشاشات التعريفية (onboarding)، ينتقل Trailhead إلى سجلّ الرحلات. يجب ألا يعيده زرّ الرجوع إلى الشاشات التعريفية. أيّ استدعاء يناسب؟
","options":[{"text":"router.push('/')","why":"push يترك الشاشات التعريفية تحتها، فيعود الرجوع إليها."},{"text":"router.back()","why":"هذا يذهب إلى ما كان قبل الشاشات التعريفية، وهو ليس سجلّ الرحلات."},{"text":"router.replace('/')","why":"صحيح. يستبدل replace الشاشة الحالية بالجديدة، فلا يبقى شيء يُرجَع إليه."}],"answer":2},{"q":"أين يوضع عنوان الترويسة لشاشة /settings؟
<Stack.Screen name="settings" options={{ title: 'Settings' }} />، أو يُضبط من الشاشة نفسها بالـ component ذاته.","why":"صحيح. يمكن أن تعيش الخيارات في الـ layout (جيد للعناوين الثابتة) أو أن تُرسم داخل الشاشة (جيد حين تعتمد على البيانات)."},{"text":"في app.json تحت expo.routes.settings.title.","why":"لا يوجد مفتاح كهذا. خيارات التنقّل تعيش في الـ layouts والشاشات."},{"text":"في عنصر <title> أعلى الـ JSX الخاص بالشاشة.","why":"هذا HTML. الترويسات الأصلية تُضبط عبر خيارات أداة التنقّل."}],"answer":0}],"exercise":{"kind":"fill","language":"text","template":"# URL file that renders it\n/ src/app/{{0}}.tsx\n/settings src/app/settings/{{1}}.tsx\n/settings/units src/app/settings/{{2}}.tsx\n(Stack around settings/*) src/app/settings/{{3}}.tsx\n(any unknown URL) src/app/{{4}}.tsx\n\n# In code, after the units form saves, return to /settings:\nrouter.{{5}}();","blanks":[{"answers":["index"]},{"answers":["index"]},{"answers":["units"]},{"answers":["_layout"]},{"answers":["+not-found"]},{"answers":["back","dismiss"]}],"title":"اربط عناوين Trailhead بالملفات","prompt":"املأ أسماء الملفات (دون .tsx) ليرسم Expo Router كل URL من الملف الصحيح، ويغلّف شاشات الإعدادات بـ layout خاص بها، ويعرض شاشة ودودة للعناوين غير المعروفة. ثم اختر دالة router التي تعود من /settings/units إلى /settings بعد الحفظ دون تكديس شاشة مكرّرة.
/ أو /settings) يأتي من ملف بالاسم نفسه في الموضعين.","لملفات الـ layout وملف «غير موجود» بادئات خاصة: شرطة سفلية وعلامة زائد.","سهم الرجوع في الترويسة يفعل الشيء نفسه الذي تفعله الدالة التي تحتاج إليها."],"explanation":"يرسم index.tsx الـ URL الخاص بالمجلّد نفسه، لذا يأتي كلٌّ من / و/settings من ملف index. ويصبح units.tsx داخل settings/ المسار /settings/units. يغلّف _layout.tsx المسارات المجاورة له بأداة تنقّل، ويلتقط +not-found.tsx العناوين غير المطابقة. بعد الحفظ، يُزيل router.back() شاشة الوحدات ويكشف شاشة الإعدادات التي كانت تحتها أصلًا؛ أما push('/settings') فسيكدّس نسخة ثانية.