تعرف على كيفية بناء نظام تنقل قوي لتطبيق React Native باستخدام مكتبة React Navigation.

يجب أن تحتوي تطبيقات الهاتف المحمول على نظام تنقل يوجه المستخدمين بسهولة من خلال الشاشات والوظائف المختلفة.

يمكن أن تساعدك React Navigation ، وهي مكتبة تنقل قوية ومرنة لـ React Native ، في إنشاء تلك التجربة. من خلال تسخير إمكانياته ، يمكنك إنشاء نظام تنقل متنقل رائع دون عناء.

تثبيت مكتبة ملاحة React

يوفر React Navigation ثلاثة أنماط تنقل رئيسية ، وهي Stack و Tab و Drawer navigation لبناء نظام تنقل. توفر أنماط التنقل هذه إطارًا لتنظيم وإدارة التنقل بين الشاشات المختلفة داخل تطبيقك.

لبدء استخدام React Navigation ، ثبِّت المكتبة والاعتمادات الضرورية لها:

npm install @ رد فعل ملاحة / أصلي
npm تثبيت تفاعل الشاشات الأم سياق المنطقة الآمنة

إعداد المستكشف

يعيش كل ملاح في React Navigation في مكتبته المنفصلة الخاصة به. لاستخدام أي من الملاحين ، يجب عليك تثبيتها بشكل فردي.

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

instagram viewer
شاشات مجلد. سيعمل هذا على فصل مكونات الشاشة عن المكونات الأخرى.

ستكتب الرمز لإعداد نمط التنقل الذي تستخدمه داخل مشروعك App.js ملف.

إنشاء Navigator داخل ملف App.js يعد الملف من أفضل الممارسات لعدة أسباب:

  • ال App.js الملف هو عادةً مكون المستوى الأعلى في تطبيق React Native. سيضمن تحديد المستكشف في هذا الملف أن يكون التسلسل الهرمي للتنقل في أعلى مستوى لشجرة المكونات الخاصة بك ويمكن الوصول إليه طوال الوقت.
  • وضع المستكشف في ملف App.js يتيح لك file الوصول بسهولة إلى الحالة والدعائم على مستوى التطبيق وتمريرها إلى الشاشات داخل المتصفح.
  • رد فعل الملاحة حاوية الملاحة يوفر السياق اللازم للتنقل ويقع عادةً في الداخل App.js. من خلال وضع Navigator في نفس الملف ، يمكنك دمجها بسهولة مع ملف حاوية الملاحة.

ستاك نافيجيتور

يعد Stack Navigator أكثر أنماط التنقل شيوعًا داخل مكتبة React Navigation. يستخدم بنية بيانات مكدس حيث تكون كل شاشة مكونًا مختلفًا تمامًا ويتم تكديسها فوق العنصر السابق.

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

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

يستورد تتفاعل من'تتفاعل';
يستورد {NavigationContainer} من"@ رد فعل التنقل / أصلي";
يستورد {createStackNavigator} من"@ رد فعل التنقل / المكدس";
// استيراد مكونات شاشتك
يستورد الشاشة الرئيسية من"./screens/HomeScreen";
يستورد التفاصيل من"./screens/DetailsScreen";


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


مقدار ثابت التطبيق = () => {
يعود (


"بيت" المكون = {HomeScreen} />
"تفاصيل" المكون = {DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
يصدّرتقصير برنامج؛

تقوم كتلة التعليمات البرمجية أعلاه بإنشاء مكون Stack Navigator باستخدام createStackNavigator () من مكتبة الملاحة.

في هذا المثال ، يحتوي Stack Navigator على شاشتين: بيت و تفاصيل.

الآن قم بتثبيت Stack Navigator:

npm install @ رد فعل ملاحة / مكدس

داخل الشاشة الرئيسية، يمكنك استخدام ال ملاحة كائن لاختبار Stack Navigator:

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

 العنوان ="انتقل إلى .."
 onPress = {() => navigation.navigate ("DetailScreen")}
 />
 </View>
 );
};


يصدّرتقصير الشاشة الرئيسية؛
مقدار ثابت الأنماط = StyleSheet.create ({}) ،
2 صور

لاحظ كيف يقوم Stack Navigator تلقائيًا بإنشاء زر سهم للتعامل مع التنقل الخلفي إلى الشاشات السابقة.

ملاح علامات التبويب

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

للبدء ، قم بتثبيت @ رد فعل التنقل / أسفل علامات التبويب مكتبة باستخدام مدير الحزم NPM.

مع createBottomNavigator ()، يمكنك إنشاء مثيل من Tab Navigator كما فعلت مع Stack Navigator:

يستورد {createBottomTabNavigator} من"@ رد فعل التنقل / أسفل علامات التبويب";
مقدار ثابت Tab = createBottomTabNavigator () ،

وبعد ذلك ، حدد الشاشات التي تريدها كعلامات تبويب داخل الملاح و حاوية الملاحة:

يصدّرتقصيروظيفةبرنامج() {
يعود (


 الاسم ="بيت"
 المكوِّن = {HomeScreen}
 الخيارات = {{ عنوان: "بيت" }}
 />
 الاسم ="حساب تعريفي"
 المكون = {ProfileScreen}
 الخيارات = {{ عنوان: "حساب تعريفي" }}
 />
 الاسم ="تفاصيل"
 المكون = {DetailScreen}
 الخيارات = {{ عنوان: "تفاصيل" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

عند تشغيل تطبيقك ، يجب أن ترى Tab Navigator مع شاشات محددة في الجزء السفلي.

3 صور

يمكنك استخدام ملف علامة التبويبption لوضع الملاح في قمة, يمين, غادر، أو قاع (تقصير).

متصفح الدرج

تعد Drawer Navigators أو الأدراج نمط تنقل شائعًا في تطبيقات الأجهزة المحمولة. يمكنك فتح الأدراج عن طريق التمرير أو النقر فوق الزر. يؤدي هذا إلى انزلاق الدرج من جانب الشاشة ، وكشف محتوياته.

2 صور

لاستخدام Drawer Navigator ، قم بتثبيته مع ملفات رد فعل-أصلية-معالج لفتة و رد فعل - أصلية - إنعاش:

npm install @ رد فعل ملاحة / درج
npm تثبيت رد فعل-أصلية-إيماءة-معالج رد فعل-أصلية-إنعاش

ستحتاج أيضًا إلى تكوين إعادة تنشيط داخل ملف babel.config.js ملف:

وحدة.exports = {
 الإعدادات المسبقة: ["معرض بابل المسبق"],
 المكونات الإضافية: ["رد فعل-أصلية-إنعاش / مكون إضافي"],
};

فيما يلي مثال على كيفية إعداد Drawer Navigator:

يستورد"معالج إيماءات التفاعل الأصلي"; // يجب أن يكون هذا الاستيراد في الأعلى
يستورد {عرض ، نص ، زر} من"رد فعل أصلي";
يستورد {createDrawerNavigator} من"@ رد فعل التنقل / درج";
يستورد {NavigationContainer} من"@ رد فعل التنقل / أصلي";


مقدار ثابت الدرج = createDrawerNavigator () ،


مقدار ثابت محتوى الدرج = ({ ملاحة }) => {
يعود (
ثني: 1, محاذاة العناصر: "مركز", تبرير المحتوى: "مركز" }}>
حجم الخط: 24, وزن الخط: "عريض" }}>
 مرحبًا بك في الدرج
 </Text>

 هذا بعض المحتوى الإضافي الذي يمكنك عرضه في الدرج.
 </Text>


مقدار ثابت التطبيق = () => (

 initialRouteName ="بيت"
 drawerContent = {(الدعائم) => <محتوى الدرج {... الدعائم} />}
 >
 {/ * شاشاتك الأخرى هنا * /}
 </Drawer.Navigator>
 </NavigationContainer>
);
يصدّرتقصير برنامج؛

في هذا المثال ، فإن ملف محتوى الدرج تم تمرير المكون باسم الدرج المحتوى دعم ل createDrawerNavigator. داخل محتوى الدرج المكون ، يمكنك تخصيص المحتوى لعرض المعلومات المطلوبة باستخدام مكونات النص أو أي عناصر وأنماط أخرى.

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

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

ضع في اعتبارك أفضل الممارسات هذه لتحقيق أقصى استفادة من Drawer Navigator:

  • تجنب إغراق الدرج بالعديد من الخيارات وركز على تقديم الميزات الأكثر صلة والأكثر استخدامًا.
  • صنف العناصر ذات الصلة بشكل منطقي وبديهي لمساعدة المستخدمين في العثور بسرعة على ما يبحثون عنه.
  • استخدم الرموز أو المؤشرات المرئية لمساعدة المستخدمين على فهم الغرض من كل عنصر في الدرج.

تمرير البيانات مع أدوات التنقل

يوفر React Navigation آلية قوية تسمح لك بتمرير البيانات عبر أدوات التنقل.

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

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

يستورد تتفاعل من'تتفاعل';
يستورد {عرض ، نص ، زر} من"رد فعل أصلي";
مقدار ثابت الشاشة الرئيسية = ({ ملاحة }) => {
مقدار ثابت handleItemPress = (غرض) => {
 navigation.navigate ("DetailScreen"، { غرض })؛
 };


يعود (

قائمة ل العناصر </Text>
يصدّرتقصير الشاشة الرئيسية؛

ال مقبض تستخدم الوظيفة التنقل طريقة للتنقل إلى ملف التفاصيل أثناء تمرير بيانات العنصر المحدد كمعامل في الوسيطة الثانية.

لتتمكن من الوصول إلى البيانات التي تم تمريرها داخل ملف التفاصيل المكون ، سوف تحتاج ملاحة دعم:

يستورد تتفاعل من'تتفاعل';
يستورد {عرض ، نص} من"رد فعل أصلي";
مقدار ثابت DetailScreen = ({ ملاحة }) => {
مقدار ثابت item = navigation.getParam ('غرض', '');


يعود (

شاشة التفاصيل </Text>
{item} </Text>
 </View>
 );
};
يصدّرتقصير التفاصيل

هنا ، التفاصيل يستخدم المكون navigation.getParam لاسترداد العنصر الذي تم تمريره من أدوات التنقل. في هذا المثال ، يتم تعيين قيمة افتراضية لسلسلة فارغة في حالة عدم توفر البيانات. بهذه الطريقة ، لن يتعطل تطبيقك عند العرض.

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

تنظيم كود الملاحة الخاص بك

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

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