{"id":"l-rn-3-2","courseId":"react-native-apps","lang":"ar","kind":"lesson","summary":"أضف إلى Trailhead أشرطة tabs سفلية باستخدام مجموعة مسارات، وشاشة لتفاصيل الرحلة عبر مسار ديناميكي [id]، واقرأ الـ params الخاصة بها بأمان، متذكّرًا أن الـ params تصل دائمًا نصوصًا.","html":"

صار في Trailhead الآن أكثر من مكان يمكن أن تكون فيه: سجلّ الرحلات، وصفحة الإحصاءات، والإعدادات، إضافةً إلى شاشة تفاصيل لكل رحلة. الثلاثة الأولى نظائر يتنقّل المستخدمون بينها طوال الوقت؛ أما شاشة التفاصيل فشيء تتعمّق فيه ثم تعود منه. هذا هو الشكل الكلاسيكي لتطبيقات الجوّال: tabs للنظائر، وstack للتعمّق.

\n

مجموعة مسارات للـ tabs

\n

هذه بنية الملفات التي يستخدمها Trailhead:

\n
Text
src/app/\n  _layout.tsx          root Stack\n  (tabs)/\n    _layout.tsx        Tabs navigator\n    index.tsx          /          (Log)\n    stats.tsx          /stats\n    settings.tsx       /settings\n  hikes/\n    [id].tsx           /hikes/42  (pushed over the tabs)
\n

المجلّد بين قوسين مجموعة مسارات (route group). تتيح لشاشات الـ tabs الثلاث أن تتشارك layout دون أن تضيف شيئًا إلى عناوينها: (tabs)/stats.tsx هو /stats، لا /tabs/stats.

\n

يُرجع layout الـ tabs أداة التنقّل Tabs، مع Tabs.Screen واحد لكل tab، بالترتيب الذي يجب أن تظهر به:

\n
src/app/(tabs)/_layout.tsx
import Ionicons from '@expo/vector-icons/Ionicons';\nimport { Tabs } from 'expo-router';\n\nexport default function TabLayout() {\n  return (\n    <Tabs screenOptions={{ tabBarActiveTintColor: '#2f6f4e' }}>\n      <Tabs.Screen\n        name=\"index\"\n        options={{\n          title: 'Log',\n          tabBarIcon: ({ color, size }) => <Ionicons name=\"list\" color={color} size={size} />,\n        }}\n      />\n      <Tabs.Screen\n        name=\"stats\"\n        options={{\n          title: 'Stats',\n          tabBarIcon: ({ color, size }) => <Ionicons name=\"stats-chart\" color={color} size={size} />,\n        }}\n      />\n      <Tabs.Screen\n        name=\"settings\"\n        options={{\n          title: 'Settings',\n          tabBarIcon: ({ color, size }) => <Ionicons name=\"settings-outline\" color={color} size={size} />,\n        }}\n      />\n    </Tabs>\n  );\n}
\n

ثم يضع الـ root layout مجموعة الـ tabs كلها داخل الـ Stack، مع إخفاء ترويسة المجموعة نفسها (فلكل tab ترويسته)، ويليها مسار التفاصيل:

\n
src/app/_layout.tsx
import { Stack } from 'expo-router';\n\nexport default function RootLayout() {\n  return (\n    <Stack>\n      <Stack.Screen name=\"(tabs)\" options={{ headerShown: false }} />\n      <Stack.Screen name=\"hikes/[id]\" options={{ title: 'Hike' }} />\n    </Stack>\n  );\n}
\n

ولأن hikes/[id] ينتمي إلى الـ Stack الجذري لا إلى الـ tabs، فإن فتح رحلة يُدخل شاشة كاملة منزلقة فوق شريط الـ tabs، وتعيدك إيماءة الرجوع إلى الـ tab الذي جئت منه. هذا ما تفعله معظم تطبيقات iOS وAndroid، ويعطي شاشة التفاصيل ارتفاع الهاتف كله.

\n

عادتان تُبقيان الـ tabs مريحة. اجعلها بين ثلاث وخمس وجهات رئيسية يزورها المستخدمون كثيرًا؛ فالـ tab السادس يعني عادةً أن بعضها مكانه داخل الإعدادات. وتذكّر أن الـ tabs تبقى مركّبة بعد زيارتها: انتقل من Log إلى Stats ثم عُد، وسيحتفظ السجلّ بموضع تمريره. هذا هو السلوك الذي يتوقّعه المستخدمون، فلا تُعِد ضبطه. وإن احتاج tab واحد إلى شاشات تعمّق خاصة به تُبقي شريط الـ tabs ظاهرًا، فأعطِ ذلك الـ tab مجلّدًا بملف _layout.tsx خاص به يُرجع Stack؛ فتداخل أدوات التنقّل ليس إلا تداخلًا للمجلّدات.

\n\n

المسارات الديناميكية والـ params

\n

الملف المسمّى بأقواس مربّعة، [id].tsx، يطابق أي جزء مفرد من الـ URL ويكشفه بوصفه param اسمه id. اقرأه باستخدام useLocalSearchParams:

\n
src/app/hikes/[id].tsx
import { Stack, useLocalSearchParams } from 'expo-router';\nimport { Text, View } from 'react-native';\nimport { useHike } from '../../state/hikes';\n\nexport default function HikeDetail() {\n  const { id } = useLocalSearchParams<{ id: string }>();\n  const hike = useHike(id);\n\n  if (!hike) {\n    return (\n      <View style={{ flex: 1, padding: 24 }}>\n        <Text>That hike doesn't exist anymore.</Text>\n      </View>\n    );\n  }\n\n  return (\n    <View style={{ flex: 1, padding: 16 }}>\n      <Stack.Screen options={{ title: hike.name }} />\n      <Text style={{ fontSize: 16 }}>{hike.distanceKm} km</Text>\n    </View>\n  );\n}
\n

وللوصول إليها، اربط إلى الـ URL. إما أن تبني النص بنفسك، أو تدع Expo Router يملأ النمط:

\n
TSX
<Link href={`/hikes/${hike.id}`}>{hike.name}</Link>\n\n<Link href={{ pathname: '/hikes/[id]', params: { id: hike.id } }}>{hike.name}</Link>
\n

أي شيء في params ليس جزءًا من المسار يصبح query string: فـ params: { id: hike.id, units: 'mi' } ينتج /hikes/42?units=mi، وتقرأ شاشة التفاصيل units بالـ hook نفسه.

\n\n

المعرّفات في الـ params، والبيانات من الـ state

\n

مرّر أصغر شيء يعرّف البيانات، وهو معرّف في العادة، وابحث عن البيانات في الشاشة الوجهة. يبدو تمرير كائن رحلة كامل مريحًا، لكن الـ params تُحوَّل إلى نصّ داخل الـ URL: يصبح الكائن نصًّا، ولا يستطيع deep link إعادة إنشائه أبدًا، وإن عدّل المستخدم الرحلة، تعرض شاشة التفاصيل النسخة القديمة التي سُلّمت لها. الدرس التالي يبني الـ state المشتركة التي يقرأ منها useHike(id).

\n

يُرجع useLocalSearchParams الـ params الخاصة بالشاشة التي يُستدعى فيها، وهذا ما تريده في الغالبية العظمى من الحالات. أما شقيقه useGlobalSearchParams فيتحدّث كلما تغيّر أي مسار، حتى المسارات في الخلفية، وهذا يسبّب عمليات render إضافية؛ احتفظ به لأشياء مثل التحليلات (analytics) التي تهتم فعلًا بكل عملية تنقّل.

\n

التالي: الـ state التي تقف وراء عمليات البحث هذه، أي مصدر واحد للحقيقة عن الرحلات، تتشاركه كل الـ tabs والشاشات.

\n","toc":[{"id":"sec-1","text":"مجموعة مسارات للـ tabs","level":2},{"id":"sec-2","text":"المسارات الديناميكية والـ params","level":2},{"id":"sec-3","text":"المعرّفات في الـ params، والبيانات من الـ state","level":2}],"takeaways":["المجلّد بين قوسين، مثل (tabs)، يجمّع المسارات تحت layout دون أن يضيف جزءًا إلى الـ URL.","ضع أداة تنقّل الـ tabs في (tabs)/_layout.tsx، وأضف شاشات التفاصيل من الـ Stack الجذري لتغطّي شريط الـ tabs.","الملف المسمّى [id].tsx يطابق أي جزء مفرد من الـ URL؛ اقرأه باستخدام useLocalSearchParams().","الـ params في المسارات نصوص (أو مصفوفات من النصوص)، فحوّلها وتحقّق منها قبل الاستخدام.","مرّر المعرّفات في الـ params، لا الكائنات كاملة أبدًا، وابحث عن البيانات في الشاشة الوجهة."],"further":[{"title":"Navigation layouts","url":"https://docs.expo.dev/router/basics/navigation-layouts/"},{"title":"Tabs","url":"https://docs.expo.dev/router/advanced/tabs/"},{"title":"URL parameters","url":"https://docs.expo.dev/router/reference/url-parameters/"}],"quiz":[{"q":"

ما الـ URL الذي يخدمه src/app/(tabs)/stats.tsx؟

","options":[{"text":"/(tabs)/stats","why":"الأقواس تحدّد مجموعة، والمجموعات لا تظهر في الـ URL أبدًا."},{"text":"/tabs/stats","why":"يُحذف اسم المجموعة كله، لا الأقواس وحدها."},{"text":"/stats","why":"صحيح. المجموعة (tabs) تحدّد فقط أي layout يغلّف الشاشة."}],"answer":2},{"q":"

شاشة التفاصيل تفعل هذا، والرحلة ذات المعرّف 7 لا تُطابَق أبدًا. لماذا؟

\n
TSX
const { id } = useLocalSearchParams<{ id: string }>();\nconst hike = hikes.find((h) => h.id === id); // h.id is a number
\n","options":[{"text":"useLocalSearchParams يعمل فقط داخل شاشات الـ tabs.","why":"يعمل في أي مسار. المشكلة في المقارنة، لا في مكان تشغيل الـ hook."},{"text":"id هو النص “7”، و7 === "7" قيمتها false؛ حوّله باستخدام Number(id) وتحقّق من النتيجة.","why":"صحيح. الـ params في الـ URL نصوص دائمًا. الـ generic يحدّد نوعها فقط، ولا يحوّل أي شيء."},{"text":"يجب أن يكون اسم ملف المسار [hikeId].tsx ليصل الـ param.","why":"اسم الملف يحدّد اسم الـ param فقط. و[id].tsx يعطيك id."}],"answer":1},{"q":"

يمرّر زميلك كائن رحلة كاملًا بوصفه param في المسار حتى لا تحتاج شاشة التفاصيل إلى البحث عنه. ما المشكلة الرئيسية؟

","options":[{"text":"الـ params تُحوَّل إلى نصّ داخل الـ URL، فيصبح الكائن نصًّا، ولا تستطيع الـ deep links إعادة إنشائه، وتعرض الشاشة بيانات قديمة بعد التعديل.","why":"صحيح. مرّر المعرّف واقرأ الرحلة الحالية من الـ state أو التخزين في الشاشة الوجهة."},{"text":"الـ params في المسارات محدودة بحرف واحد.","why":"لا يوجد حدّ كهذا. المشكلة أن الـ URLs تحمل نصوصًا، لا كائنات."},{"text":"الكائنات في الـ params تجعل التطبيق ينهار على Android فقط.","why":"يسيء التصرّف بالطريقة نفسها على المنصّتين. لكنه لا ينهار."},{"text":"يشفّر Expo Router الـ params، فسيكون الأمر بطيئًا.","why":"الـ params ليست مشفّرة؛ إنها جزء من URL. السرعة ليست المشكلة."}],"answer":0}],"exercise":{"kind":"web","mode":"js","starter":{"js":"// params is whatever useLocalSearchParams() returned for /hikes/[id]\n// Return { id, units, photo } with real types and safe defaults.\nfunction parseHikeParams(params) {\n return { id: params.id, units: params.units, photo: params.photo };\n}\n\nconsole.log(parseHikeParams({ id: '42', units: 'MI', photo: '2' }));\nconsole.log(parseHikeParams({ id: 'abc' }));\n"},"solution":{"js":"function first(value) {\n return Array.isArray(value) ? value[0] : value;\n}\n\nfunction parseHikeParams(params) {\n const rawId = first(params.id);\n const id = /^\\d+$/.test(rawId ?? '') && Number(rawId) > 0 ? Number(rawId) : null;\n\n const rawUnits = String(first(params.units) ?? '').toLowerCase();\n const units = rawUnits === 'mi' ? 'mi' : 'km';\n\n const rawPhoto = first(params.photo);\n const photo = /^\\d+$/.test(rawPhoto ?? '') ? Number(rawPhoto) : 0;\n\n return { id, units, photo };\n}\n\nconsole.log(parseHikeParams({ id: '42', units: 'MI', photo: '2' }));\nconsole.log(parseHikeParams({ id: 'abc' }));\n"},"checks":[{"id":"valid","test":"return typeof parseHikeParams === 'function' && (() => { const r = parseHikeParams({ id: '42', units: 'mi', photo: '2' }); return r.id === 42 && r.units === 'mi' && r.photo === 2; })();"},{"id":"bad-id","test":"return (() => { const r = parseHikeParams({ id: 'abc' }); return r.id === null && r.units === 'km' && r.photo === 0; })() && parseHikeParams({ id: '0' }).id === null && parseHikeParams({ id: '4.5' }).id === null && parseHikeParams({ id: '-3' }).id === null && parseHikeParams({}).id === null;"},{"id":"units","test":"return parseHikeParams({ id: '1', units: 'MI' }).units === 'mi' && parseHikeParams({ id: '1', units: 'miles' }).units === 'km' && parseHikeParams({ id: '1' }).units === 'km';"},{"id":"photo","test":"return parseHikeParams({ id: '1', photo: '0' }).photo === 0 && parseHikeParams({ id: '1', photo: '3' }).photo === 3 && parseHikeParams({ id: '1', photo: 'x' }).photo === 0 && parseHikeParams({ id: '1', photo: '-2' }).photo === 0;"},{"id":"arrays","test":"const r = parseHikeParams({ id: ['7', '8'], units: ['mi', 'km'], photo: ['1'] }); return r.id === 7 && r.units === 'mi' && r.photo === 1;"}],"title":"اقرأ الـ params في المسار بأمان","prompt":"

يمكن فتح شاشة التفاصيل في Trailhead على /hikes/[id] من داخل التطبيق، أو من إشعار، أو من رابط قديم يحوي أي شيء. اكتب parseHikeParams(params) التي تأخذ الكائن القادم من useLocalSearchParams() وتُرجع { id, units, photo }:

\n\n

قد يصل أي param أيضًا مصفوفةً من النصوص (مفتاح query مكرّر). استخدم القيمة الأولى.

\n","hints":["اكتب دالة مساعدة صغيرة أولًا: const first = (v) => Array.isArray(v) ? v[0] : v;.","/^\\d+$/ لا يقبل إلا الأرقام، فيرفض -3 و4.5 وabc في اختبار واحد. ثم تحقّق أن الرقم أكبر من 0 في حالة المعرّف.","للوحدات، حوّل النص إلى أحرف صغيرة وقارنه بـ 'mi'؛ وكل ما عداه يعود إلى 'km'."],"explanation":"

الـ params تأتي من URL، فهي نصوص أو مصفوفات من النصوص، لا أرقام أبدًا، مهما قال الـ generic في TypeScript. توحيدها في دالة نقية واحدة يعطي الشاشة أنواعًا حقيقية وقيمًا افتراضية آمنة، ويحوّل الـ deep link المعطوب إلى id: null، فتعرض الشاشة رسالة ودودة «الرحلة غير موجودة» بدلًا من الانهيار. والتعبير النمطي الذي يقبل الأرقام فقط أكثر صرامة من Number()، التي تقبل بسرور '4.5' و' 7 ' و'' (بوصفها 0).

\n","checkLabels":{"valid":"مجموعة params عادية تُحوَّل إلى أنواع حقيقية","bad-id":"المعرّفات غير الصالحة أو المفقودة تصبح null","units":"الوحدات لا تتأثّر بحالة الأحرف وقيمتها الافتراضية km","photo":"فهرس الصورة يساوي 0 افتراضيًا للقيم المفقودة أو غير الصالحة","arrays":"الـ params التي تصل مصفوفات تستخدم قيمتها الأولى"}},"words":591,"readMinutes":3}