تصميم جديد للتوجيه الأصلي مع جهاز توجيه إكسبو

التوجيه المستند إلى الملفات هو أسلوب شائع لتطوير الويب يقوم بتعيين مسار URL إلى ملف معين في دليل المشروع. يتجنب هذا النظام تكوينات التوجيه المعقدة المتضمنة في بناء أنظمة الملاحة.

مع إصدار مكتبة Expo Router ، أصبح التوجيه المستند إلى الملفات ممكنًا باستخدام تطبيقات React Native. يمكن أن يكون Expo Router نظام تنقل أفضل لمطوري React Native الذين يعملون مع Expo.

تصميم جديد للملاحة مع جهاز التوجيه Expo Router

يوفر جهاز التوجيه expo حلاً توجيهيًا لتطبيقات React Native Expo. يختلف هذا النظام اختلافًا كبيرًا عما تريده بناء نظام ملاحة باستخدام React Navigation. يعمل Expo Router على تبديد الاهتمامات الرئيسية باستخدام نظام الملاحة العامل الحالي.

تتضمن هذه المشكلات وجود نظام تنقل لا يعمل باستمرار في كل مكان ، والصعوبات في إدارة الارتباط العميق ، وكذلك الإعدادات المعقدة لانتقالات التنقل المخصصة.

يعد التنقل / التوجيه المستند إلى ملف جهاز التوجيه إكسبو نظامًا بسيطًا يعمل بشكل جيد وهو مألوف بالفعل بين مطوري JavaScript وأطر عمل JavaScript مثل Next.js ، حيث يمكنك تحديد المسارات.

تركيب وإعداد راوتر اكسبو

من السهل إلى حد ما ترحيل مشروع Expo الخاص بك من نظام الملاحة القديم إلى استخدام جهاز توجيه Expo.

الخطوة 1: قم بتثبيت Expo Router

استخدم هذا الأمر الطرفي لتشغيل برنامج تثبيت expo-router:

npx expo install expo-router

ستحتاج أيضًا إلى التأكد من تثبيت تبعيات الأقران هذه:

• رد فعل أصلي سياق منطقة آمنة
• رد فعل الشاشات الأصلية
• معرض الربط
• المعرض-شريط الحالة
• رد فعل-أصلية-معالج لفتة

في حالة عدم وجود أي منها ، يمكنك تثبيتها عن طريق تشغيل:

تثبيت المعرض npx 

الخطوة الثانية: قم بتحديث نقطة الدخول

إنشاء ملف index.js ملف ليحل محل الخاص بك App.js نقطة الدخول وتعيين index.js كنقطة دخول التطبيق في الداخل app.json:

// عيّن index.js كنقطة دخول
{
"رئيسي": "index.js"
}
// استيراد ما يلي داخل index.js
يستورد"جهاز التوجيه / الدخول";

يستخدم Expo Router ملف رابط عميق مخطط لتحديد الشاشة أو المحتوى الذي سيتم فتحه عند التوجيه.

حدد مخطط ارتباط عميق لتطبيقك عن طريق إضافة ملف مخطط الملكية ل app.json:

{
"إكسبو": {
"مخطط": "تطبيقي"
 }
}

الخطوة 4: التكوين النهائي

الخطوة الأخيرة هي إعداد حزمة metro الخاصة بتطبيق Expo وتهيئة Babel لدعم Expo Router في تطبيقك.

داخل babel.config.js تعديل الكود الحالي ليبدو كما يلي:

وحدة.exports = وظيفة (api) {
 api.cache (حقيقي);
يعود {
 الإعدادات المسبقة: ["معرض بابل المسبق"],
 المكونات الإضافية: [
يتطلب.حل("جهاز التوجيه / بابل"),
/* */
 ],
 };
};

أعد الآن إنشاء تطبيقك وابدأ تشغيله عن طريق تشغيل:

معرض npx - واضح

بناء مسارات التطبيق الخاص بك مع Expo Router

يمكنك البدء في إعداد تدفق التنقل داخل ملف برنامج مجلد. ال index.js الملف هو نقطة البداية الخاصة بك. يضيف Expo Router مسار كل ملف تقوم بإنشائه بالداخل برنامج إلى نظام توجيه التطبيق باستخدام روابط URL لداخلية لمطابقة كل صفحة.

على سبيل المثال ، قم بإنشاء ملف SecondScreen.js ملف داخل ملف برنامج دليل وتصدير مكون افتراضي:

يستورد {StyleSheet ، Text ، View} من"رد فعل أصلي";
يستورد تتفاعل من"تتفاعل";
مقدار ثابت SecondScreen = () => {
يعود (


الشاشة الثانية </Text>
 </View>
 </View>
 );
};
يصدّرتقصير الشاشة الثانية؛
مقدار ثابت الأنماط = StyleSheet.create ({}) ،

يمكنك الانتقال إلى هذه الشاشة من index.js مع ال useRouter () طريقة:

يستورد {useRouter} من"جهاز التوجيه المعرض";
يصدّرتقصيروظيفةصفحة() {
مقدار ثابت التنقل = useRouter () ؛
يعود (

مرحبًا بالعالم </Text>
هذه هي الصفحة الأولى ل التطبيق الخاص بك/Text>
 العنوان ="انتقل إلى SecondScreen"
 onPress = {() => {
 navigation.push ("/الشاشة الثانية");
 }}
 />
 </View>
 );
}

هنا تقوم بتعيين جهاز التوجيه للتنقل واستخدامه داخل عنصر الزر عن طريق الاتصال navigation.push ("/ second"). الوسيطة ضمن الدفع هي مسار الملف للشاشة التي ترغب في الانتقال إليها.

داخل الشاشة الثانية يمكنك أيضًا الانتقال إلى شاشة الفهرس مثل هذا:

يستورد { وصلة } من"جهاز التوجيه المعرض";
مقدار ثابت SecondScreen = () => {
يعود (


الشاشة الثانية </Text>
"/" كطفل>

انتقل إلى index.js </Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

يأخذ عنصر الارتباط خاصية href لتحديد المسار. داخل التطبيق ، "/" المسار يتوافق مع ملف الإدخال (index.js). الدعامة الثانية هي كطفل. تسمح لك هذه الخاصية بتصيير أول مكون فرعي بكل الخاصيات المحددة بدلاً من مكون الرابط الافتراضي. يمكنك استخدام هذا لتخصيص مظهر مكون الارتباط أو لتنفيذ منطق التوجيه المخصص.

تحديد المسارات الديناميكية

باستخدام المسارات الديناميكية ، يمكنك إنشاء مسارات ديناميكيًا بناءً على معلمات أو بيانات معينة. بدلاً من تحديد مجموعة ثابتة من المسارات ، فإنك تكتسب المرونة والقدرة على التكيف في التنقل في تطبيقك.

لبدء استخدام المسارات الديناميكية في Expo Router ، تحتاج إلى تحديد المسارات للتعامل مع المحتوى الديناميكي. يمكنك استخدام المسارات ذات المعلمات من خلال تحديد العناصر النائبة داخل مسار المسار. ستتوفر قيم هذه العناصر النائبة لمسارك عندما ينتقل شخص ما إليه.

على سبيل المثال ، ضع في اعتبارك تطبيق التدوين حيث تريد عرض منشورات مدونة فردية. يمكنك تحديد مسار ديناميكي للتعامل مع كل منشور من مشاركات المدونة:

// app /ways / BlogPost.js
يستورد تتفاعل من"تتفاعل";
يستورد {useRouter} من"جهاز التوجيه المعرض";
مقدار ثابت BlogPost = ({ طريق }) => {
مقدار ثابت {postId} = route.params؛
يعود (

عرض مشاركة مدونة مع المعرف: {postId} </Text>
 </View>
 );
};
يصدّرتقصير مشاركة مدونة؛

في هذا المثال ، تقوم بتعريف مكون مسار ديناميكي باسم مشاركة مدونة. ال الطريق يسمح لك الكائن بالوصول إلى قيم المعلمات التي تم تمريرها إلى المسار. في هذه الحالة ، تقوم بالوصول إلى ملف بعد معرف المعلمة لعرض منشور المدونة المقابل.

توليد طرق ديناميكية

الآن بعد أن تم تحديد مسار ديناميكي ، يمكنك إنشاء مسارات ديناميكيًا استنادًا إلى البيانات أو إدخال المستخدم. على سبيل المثال ، إذا كانت لديك قائمة بمشاركات المدونة التي تم جلبها من واجهة برمجة التطبيقات ، فيمكنك إنشاء مسارات ديناميكيًا لكل منشور مدونة.

هذا مثال:

// app / المكونات / BlogList.js
يستورد تتفاعل من"تتفاعل";
يستورد {useNavigation} من"جهاز التوجيه المعرض";
مقدار ثابت BlogList = ({blogPosts}) => {
مقدار ثابت التنقل = useNavigation () ؛
مقدار ثابت navigateToBlogPost = (بعد معرف) => {
 navigation.navigate ("مشاركة مدونة"، { بعد معرف })؛
 };
يعود (

 {blogPosts.map ((بريد) => (
 مفتاح = {post.id}
 onPress = {() => navigateToBlogPost (post.id)}
 >
{post.title} </Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
يصدّرتقصير قائمة المدونات ؛

في هذا المثال ، تقوم بالتكرار على امتداد المدونة مجموعة وتقديم أ مكون لكل وظيفة. عندما تضغط على منشور ، فإن ملف navigateToBlogPost يعمل ، ويمرر بعد معرف إلى طريق الملاحة.

التعامل مع الطرق الديناميكية

يمكنك الاستماع إلى أحداث الملاحة الخاصة بمسار ديناميكي باستخدام useFocusEffect خطاف.

على سبيل المثال:

// app /ways / BlogPost.js
يستورد تتفاعل من"تتفاعل";
يستورد {الطريق ، useFocusEffect} من"جهاز التوجيه المعرض";
مقدار ثابت BlogPost = ({ طريق }) => {
مقدار ثابت {postId} = route.params؛
 useFocusEffect (() => {
// إحضار بيانات منشور المدونة بناءً على postId
// قم بتنفيذ أي إجراءات أخرى ضرورية عند التركيز
 });
يعود (

عرض مشاركة مدونة مع المعرف: {postId} </Text>
 </View>
 );
};
يصدّرتقصير مشاركة مدونة؛

في هذا المثال ، فإن ملف useFocusEffect الخطاف يستمع إلى أحداث التركيز الخاصة بـ مشاركة مدونة عنصر. داخل رد الاتصال ، يمكنك جلب بيانات إضافية أو تنفيذ إجراءات أو تحديث الشاشة بناءً على منشور المدونة المركّز.

الملاحة بالطرق الديناميكية

للتنقل إلى مسار ديناميكي ، يمكنك استخدام طرق التنقل التي يوفرها Expo Router.

على سبيل المثال ، للانتقال إلى ملف مشاركة مدونة مكون مع محدد بعد معرف، يمكنك استخدام ال التنقل طريقة:

// app / المكونات / BlogList.js
يستورد تتفاعل من"تتفاعل";
يستورد {useNavigation} من"جهاز التوجيه المعرض";
مقدار ثابت BlogList = ({blogPosts}) => {
مقدار ثابت التنقل = useNavigation () ؛
مقدار ثابت navigateToBlogPost = (بعد معرف) => {
 navigation.navigate ("مشاركة مدونة"، { بعد معرف })؛
 };
يعود (

 {blogPosts.map ((بريد) => (
 مفتاح = {post.id}
 onPress = {() => navigateToBlogPost (post.id)}
 >
{post.title} </Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
يصدّرتقصير قائمة المدونات ؛

عندما تضغط على منشور مدونة ، فإن ملف navigateToBlogPost ستطلق الوظيفة مع بعد معرف.

يساعدك Expo Router في هيكلة تطبيقاتك الأصلية

يوفر Expo Router حلاً ممتازًا لإدارة التنقل في تطبيقات React Native الخاصة بك. من خلال إعادة تصور تجربة التوجيه الأصلية ، يوفر Expo Router المرونة وسهولة الاستخدام.

لقد قمت باستكشاف ميزات Expo Router ، وتعمق في مفاهيم التوجيه الأساسية ، واكتشفت كيفية إنشاء مسارات ديناميكية. باستخدام Expo Router ، يمكنك إنشاء تدفقات تنقل ديناميكية ، والتعامل مع البيانات المتغيرة أو إدخال المستخدم ، وتخصيص التنقل في تطبيقك.