يمكن أن يساعد استخدام Stack Navigator تطبيقك في الانتقال من شاشة إلى أخرى ، بأقل قدر من الشفرة.

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

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

قبل ان تبدأ

لمتابعة هذا البرنامج التعليمي على جهاز الكمبيوتر المحلي لديك ، يجب أن يكون لديك ما يلي مثبتًا:

  • Node.js v10 أو أعلى
  • Xcode أو بيئة تطوير أندرويد (الإعداد لتشغيل المحاكي)
  • تفاعل CLI الأصلي

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

قبل أن تبدأ في النظر في كيفية تنفيذ التنقل في تطبيق React Native الخاص بنا ، دعنا نفهم كيفية عمل آلية تنقل المكدس في React Native.

فهم كيفية عمل Stack Navigation

instagram viewer

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

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

الآن ، إذا كنت تريد العودة إلى الشاشة السابقة ، فإن التطبيق ينبثق شاشتك الحالية من المكدس ويظهر لك الشاشة الموجودة تحتها. يشبه هذا السلوك ما يحدث عند النقر فوق رمز "رجوع" في متصفح الويب الخاص بك.

من خلال الفهم الواضح لآلية تنقل المكدس ، حان الوقت الآن لإعدادها في تطبيق React Native.

1. قم بتثبيت React Navigation للتطبيقات الأصلية

للبدء ، قم بتثبيت رد حزمة الملاحة للتطبيقات الأصلية في مشروع React Native الخاص بك عن طريق تنفيذ هذا الأمر على محطة طرفية:

npm أنا @تتفاعل-ملاحة/محلي

تتطلب الحزمة التي قمت بتثبيتها للتو تفاعل المكدس الأصلي و تفاعل الشاشات الأصلية لتعمل بشكل صحيح. لتثبيت RN Stack ، قم بتشغيل:

npm أنا @تتفاعل-ملاحة/محلي-كومة

لتثبيت الثانية ، قم بتشغيل هذا:

npm أنا أتفاعل-محلي-شاشات

الآن لديك كل ما تحتاجه لبدء إنشاء آلية التنقل في تطبيقك. الخطوة التالية هي إعداد الشاشات.

2. قم بإعداد الشاشة في تطبيق React Native الخاص بك

في هذا المثال ، سننشئ شاشتين فقط - الشاشة الرئيسية والشاشة الخاصة.

قم بإنشاء مجلد باسم شاشات داخل الدليل الجذر للتطبيق الخاص بك. بعد ذلك ، قم بإنشاء ملفين باسم HomeScreen.js و AboutScreen.js داخل الدليل شاشات.

ماذا تضيف إلى ملف HomeScreen.js الخاص بك

افتح ملف HomeScreen.js وابدأ باستيراد ما يلي:

يستورد * مثل تتفاعل من'تتفاعل';
يستورد {Text، View، StyleSheet، TouchableOpacity} من"رد فعل أصلي";
يستورد {useState} من'تتفاعل'

بعد ذلك ، قم بإنشاء المكون الوظيفي HomeScreen والوصول إلى كائن التنقل باستخدام تفكيك الكائن (وفقًا لـ تفاعل أفضل الممارسات) ، ثم قم بإرجاع العنوان والزر للتنقل إلى الشاشة "حول":

يصدّرتقصيروظيفةالشاشة الرئيسية({ملاحة}) { 
يعود ( 
<منظرأسلوب={styles.container}>
<نصأسلوب={styles.paragraph}> الشاشة الرئيسية نص>
 العنوان ="انتقل إلى" حول "
 onPress = {() => navigation.navigate ("AboutScreen")} 
 /> 
منظر>
 );
}

نحن هنا نخبر React Native بالانتقال إلى عن عندما يضغط المستخدم على الزر. في هذه الحالة ، لا نقوم بتمرير أي بيانات إلى الشاشة. لكن افترض أنك تريد ذلك تمرير البيانات إلى الوظيفة; إليك كيف تفعل ذلك:

يصدّرتقصيروظيفةالشاشة الرئيسية({ملاحة}) { 
مقدار ثابت البيانات = { اسم الموقع: "John's Tech" }
يعود ( 
<منظرأسلوب={styles.container}>
// النص هنا 
 العنوان ="انتقل إلى" حول "
 onPress = {() => navigation.navigate ("AboutScreen"، بيانات)} 
 /> 
منظر>
 );
}

الآن عند الضغط على الزر ، يقوم هذا الرمز بتمرير البيانات إلى الشاشة التالية ، عن. داخل AboutScreen.js ملف ، يمكنك الوصول إلى البيانات من المسار وعرضها على واجهة المستخدم.

ماذا تضيف إلى ملف AboutScreen.js الخاص بك

افتح ملف AboutScreen.js وابدأ باستيراد التبعيات التالية:

يستورد * مثل تتفاعل من'تتفاعل';
يستورد {Text، View، StyleSheet، Button} من"رد فعل أصلي";

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

يصدّرتقصيروظيفةحول الشاشة({طريق}) { 
يترك dataObj = route.params
يعود ( 
<منظرأسلوب={styles.container}>
<نصأسلوب={styles.paragraph}>
 هذا يكون شاشة "حول" الخاصة بـ {dataObj.websiteName} 
نص>
منظر>
 );
}

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

الخطوة التالية هي إعداد متصفح المكدس الخاص بنا مع الشاشتين.

3. توصيل الشاشات بـ Stack Navigator

داخل App.js ، ابدأ باستيراد التبعيات التالية:

يستورد * مثل تتفاعل من'تتفاعل';
يستورد الشاشة الرئيسية من"./screens/HomeScreen"
يستورد حول الشاشة من"./screens/AboutScreen"
يستورد {NavigationContainer} من"@ رد فعل التنقل / أصلي"
يستورد {createNativeStackNavigator} من"@ React-navigation / native-stack"

في السطر الثاني والثالث ، قمنا باستيراد الشاشتين اللتين أنشأناهما للتو. ثم قمنا بالاستيراد حاوية الملاحة

من @ رد فعل التنقل / أصلي و createNativeStackNavigator من @ رد فعل التنقل / المكدس الأصلي لمساعدتنا في توصيل الشاشات.

بعد ذلك ، اتصل createNativeStackNavigator لاسترداد المكدس:

مقدار ثابت المكدس = createNativeStackNavigator ()

يتيح لنا ذلك "تكديس" الشاشات التي تريد الانتقال بينها في تطبيقك.

قم بإنشاء وظيفة مكون التطبيق وأعد كلتا الشاشتين بتنسيق كما هو مبين أدناه. تأكد من لفه في أو أنها لن تعمل:

يصدّرتقصيروظيفةبرنامج() { 
يعود ( 
<حاوية الملاحة>
<كومة. الملاح>
<كومة. شاشةاسم="الشاشة الرئيسية"عنصر = {الشاشة الرئيسية} />
<كومة. شاشةاسم="AboutScreen"عنصر = {AboutScreen} />
كومة. الملاح>
حاوية الملاحة>
 );
}

يضع هذا الرمز شاشة HomeScreen أعلى المكدس ، مما يعني أن التطبيق سيعرض أولاً مكون Home عند انتهاء التحميل.

الآن تم تعيين كل شيء. يمكنك اختبار التطبيق بالنقر فوق اذهب إلى حول زر على Home UI. هذا يجب أن يعيد توجيهك إلى عن، وستجد ملف اسم الموقع خاصية معروضة في واجهة المستخدم:

2 صور

أفضل شيء في استخدام React Navigation for Native هو سهولة الإعداد والاستخدام. لا يتطلب أي تكوينات إضافية (إلى جانب المكتبات المطلوبة التي قمت بتثبيتها) ، ويمكنك أيضًا الاتصال أنواع مختلفة من جدران Paywall (إذا كنت تنوي إنشاء تطبيق قائم على الاشتراك).

تعرف على المزيد حول React Native

React Native هو إطار عمل عبر الأنظمة الأساسية لإنشاء تطبيقات تعمل على أجهزة Android و iOS. هناك الكثير لتتعلمه حول React Native ، وإذا كنت جديدًا في استخدام إطار العمل ، فيجب أن تبدأ بتعلم الأساسيات.