أثناء تطوير تطبيقات الهاتف المحمول على React Native ، جربت العديد من المكتبات القياسية للملاحة ، ولكن عند استخدام كل منها شعرت بألم رهيب وجهنمي. لقد تم جعلها غير ملائمة وغير واضحة لدرجة أن تطوير أبسط الميزات على ما يبدو تحول إلى مهمة رائعة.
باستخدام التنقل المتفاعل أو تدفق الموجه الأصلي ، إذا كنت بحاجة إلى إنشاء شاشة يمكن الوصول إليها من عدة أماكن مختلفة ، فسيكون من الصعب جدًا عليك إنشاء تسلسل هرمي للمسارات المتداخلة بحيث يعمل كل شيء كما ينبغي. أو إذا كنت بحاجة إلى شاشة لتظهر مع الرسوم المتحركة غير الافتراضية ، فيجب عليك أيضًا النفخ. كما أن هذه المكتبات تتجسد الفكرة الضارة والمدمرة المتمثلة في تضمين مكونات واجهة المستخدم مثل شريط التنقل العلوي وعلامات التبويب. هذا انتهاك مباشر لمنهج أحادي الاتجاه ، عندما تؤدي مكتبة واحدة وظيفة واحدة فقط ، ولكن نوعيًا. بسبب هذا الاتصال الوثيق لمكونات واجهة المستخدم مع التنقل ، غالبًا ما تظهر الأخطاء - تظهر العديد من أشرطة التنقل على الشاشة ، قد يحتوي أحدها على زر رجوع واسم شاشة آخر.
لدي الكثير من الحزن للاختناق مع المكتبات القياسية ، قررت تطوير ملاحي الخاص. كانت الأهداف الرئيسية في التطوير هي بساطة واجهة برمجة التطبيقات ، وعدم وجود هيكل جامد لشاشات التعشيش وفصل الرسوم المتحركة عن المحتوى. لذلك ولدت رد الفعل الأصلي سهل التوجيه.
بساطة API ونقص الهيكل الصلب
في المتصفحات التي استخدمتها سابقًا ، يمكن الوصول إلى المعلمات التي تم تمريرها إلى الشاشة فقط على طول مسار معقد مثل `router.state.params.name`. في المستكشف الخاص بي ، أمرر المعلمات مباشرة إلى مكون الشاشة. في بعض الحالات ، يمكن أن يؤدي هذا إلى تعارض في الأسماء ، لكنني قررت تجاهل حل هذه المشكلة. أيضا في الكود أدناه يمكنك أن ترى أن المسارات ليس لها هيكل واضح ويمكنك إضافة أي شاشة جديدة من أي شاشة أخرى.
import React from 'react' import Router from 'react-native-easy-router' import { Text, View } from 'react-native' const First = ({ router }) => ( <View style={{ backgroundColor: 'white', flex: 1 }}> <Text>First screen</Text> <Text onPress={() => router.push.Second({ name: 'John' })}>Go forward</Text> </View> ) const Second = ({ router, name }) => ( <View style={{ backgroundColor: 'pink', flex: 1 }}> <Text>Second screen</Text> <Text>Hello {name}!</Text> <Text onPress={() => router.pop()}>Go back</Text> </View> ) const routes = { First, Second } export default () => <Router routes={routes} initialRoute="First" />
الرسوم المتحركة
الرسوم المتحركة أسهل للعمل معها. إذا كان من الضروري التفادي في التنقل التفاعلي وتفاعل الموجه الأصلي ، من أجل المراوغة لجعل الرسوم المتحركة غير الافتراضية لشاشة معينة ، ثم في جهاز التوجيه المتفاعل الأصلي سهل ، يمكن للشاشة أن تطير برسوم متحركة مختلفة ، علاوة على ذلك ، يمكن للشاشة أن تطير وتطير مع الرسوم المتحركة المختلفة. على سبيل المثال ، في المثال أدناه ، ستطير الشاشة من الأسفل وتطير إلى اليمين.
import React from 'react' import Router from 'react-native-easy-router' import { Text, View } from 'react-native' const First = ({ router }) => ( <View style={{ backgroundColor: 'white', flex: 1 }}> <Text>First screen</Text> <Text onPress={() => router.push.Second({}, {type:'bottom'})}>Go to second screen</Text> </View> ) const Second = ({ router }) => ( <View style={{ backgroundColor: 'pink', flex: 1 }}> <Text>Second screen</Text> <Text onPress={() => router.pop({type:'right'})}>Go back</Text> </View> ) export default () => <Router routes={{ Screen1, Screen2 }} initialRoute="Screen1" />
يمكنك حتى إضافة الرسوم المتحركة المخصصة الخاصة بك. ربما تريد أن تطير الشاشة من الزاوية اليمنى السفلية وتتداعى في نفس الوقت. يمكن العثور على مثال لكيفية القيام بذلك
هنا .
الخلاصة
يستخدم الملاح المطور بالفعل في العديد من مشاريعنا التجارية ، وقد حصل على توزيع صغير ومراجعات دافئة بين بعض مطوري React Native. إذا كنت ترغب في رؤية المزيد من الأمثلة على الاستخدام وتحديد ما إذا كان من الممكن استخدام هذا المستكشف في مشروعك ، فيمكنك البحث في
مستودع المشروع.