rn navio

نافيو

Navio هي مكتبة التنقل لـ React Native Build على رأس التنقل في React. الهدف الرئيسي هو تحسين DX عن طريق إنشاء تخطيط التطبيق في مكان واحد واستخدام قوة TypeScript لتوفير الإكمال التلقائي والميزات الأخرى.

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

إذا ساعدك Navio بطريقة ما ، فدعمه بـ ️

☣ لا يزال Navio مكتبة شابة وربما يكون لها تغييرات في المستقبل. تحقق مما إذا كان Navio جاهزًا للإنتاج

Quickstart

تثبيت التبعيات

 الغزل إضافة RN-navio

رد فعل التبعيات التنقل

نظرًا لأن Navio مبني على قمة التنقل React ، ستحتاج إلى تثبيت المكتبات التالية:

 Yarn إضافة @react navigation/stack @react navigation/native @react navigation/native-stack @react navigation/bottom-tabs @react navigation/derer

لمزيد من المعلومات ، يرجى التحقق من خطوات التثبيت.

قم بإنشاء تخطيط Navio الأول

سيؤدي هذا الرمز إلى إنشاء تطبيق بسيط مع شاشة واحدة.

 // app.tsximport {text} من 'React-native' ؛ import {navio} من 'rn-navio' ؛ const home = () => {
  إرجاع <النص> الصفحة الرئيسية </text> ؛} ؛ const navio = navio.build ({
  الشاشات: {home} ،
  المداخن: {Homestack: ['Home'] ،
  } ،
  الجذر: 'stacks.homestack' ،}) ؛ التصدير الافتراضي () => <navio.app /> ؛

التطبيق المستند إلى علامة التبويب مع 2 علامات تبويب

 // app.tsximport {text} من 'React-native' ؛ import {navio} من 'rn-navio' ؛ const home = () => {
  إرجاع <النص> الصفحة الرئيسية </text> ؛} ؛ const إعدادات = () => {
  إرجاع <Text> إعدادات إعدادات </text> ؛} ؛ const navio = navio.build ({
  الشاشات: {الصفحة الرئيسية ، الإعدادات} ،
  المكدس: {Homestack: ['home'] ، SettingSstack: ['Settings'] ،
  } ،
  علامات التبويب: {apptabs: {layout: {hometab: {stack: 'homestack'} ، settingstab: {stack: 'SettingSstack'} ،} ،} ،
  } ،
  الجذر: 'tabs.apptabs' ،}) ؛ التصدير الافتراضي () => <navio.app /> ؛

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

ملعب

رد فعل المبتدئين الأصليين

يمكنك الحصول على مشروع جديد مع Navio من Expo-Starter:

 تطبيق NPX CLI-RN جديد

معرض الوجبات الخفيفة

العب مع المكتبة في المعرض الخفيفة.

واجهة برمجة تطبيقات الملاحة

يوفر Navio مجموعة من الإجراءات لأداء التنقل داخل التطبيق. افترض أن لديك كائن navio :

شائع

• .N

  كائن التنقل الحالي من React Navigation. يمكنك تنفيذ أي من هذه الإجراءات.

• .push(name, params?)

  يضيف طريقًا فوق المكدس ويتنقل إلى الأمام إليه.

• .goBack()

  يسمح بالعودة إلى الطريق السابق في التاريخ.

• .setParams(name, params)

  يسمح بتحديث params لمسار معين.

• .setRoot(as, rootName)

  يضبط جذر التطبيق الجديد. يمكن استخدامه للتبديل بين Stacks Tabs Drawers .

مداخن

الإجراءات المتعلقة بالمداخن.

• .stacks.push(name)

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

• .stacks.pop(count?)

  يعيدك إلى شاشة سابقة في المكدس.

• .stacks.popToTop()

  يعيدك إلى الشاشة الأولى في المكدس ، ورفض جميع الآخرين.

• .stacks.setRoot(name)

  يعين جذر التطبيق الجديد من المكدس.

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

الإجراءات المتعلقة بعلامات التبويب.

• .tabs.jumpTo(name)

  تستخدم للقفز إلى مسار موجود في علامة تبويب الملاح.

• .tabs.updateOptions(name, options)

  خيارات التحديثات لعلامة تبويب معينة. تستخدم لتغيير عدد الشارة.

• .tabs.setRoot(name)

  يعين جذر التطبيق الجديد من علامات التبويب.

أدراج

الإجراءات المتعلقة بالأدراج.

• .drawers.open()

  تستخدم لفتح جزء الدرج.

• .drawers.close()

  تستخدم لإغلاق جزء الدرج.

• .drawers.toggle()

  تستخدم لفتح جزء الدرج إذا تم إغلاقه ، أو أغلق إذا تم فتحه.

• .drawers.jumpTo(name)

  تستخدم للقفز إلى طريق موجود في درج الملاح.

• .drawers.updateOptions(name, options)

  تحديث خيارات محتوى قائمة درج معين. تستخدم لتغيير عنوانها.

• .drawers.setRoot(name)

  يضبط جذر التطبيق الجديد من الأدراج.

معارض

الإجراءات المتعلقة بالمعارض.

• .modals.show(name, params)

  تستخدم لإظهار مشروط موجود وتمرير المعلمات.

• .modals.getParams(name)

  إرجاع params تم تمريرها لطريقة .show ().

السنانير

خطافات مفيدة.

• .useN()

  تكرار خطاف useNavigation() من التفاعل الملاحة. تستخدم للراحة داخل الشاشات للوصول إلى كائن التنقل. مستندات.

• .useR()

  مكرر من useRoute() الخطاف من React Mavigation. تستخدم للراحة داخل الشاشات للوصول إلى كائن الطريق. مستندات

• .useParams()

  تستخدم للوصول السريع إلى معاملات مسار التنقل. تستخدم للراحة داخل الشاشات عند تمرير المعلمات.

هيكل التصميم

يتطلب Navio screens stacks واحد على الأقل لإنشاء تخطيط تطبيق. tabs ، drawers ، modals ، root ، hooks defaultOptions هي اختيارية وتستخدم لتخطيطات التطبيق أكثر تقدمًا.

شاشات

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

يمكن تعريف الشاشة عن طريق تمرير مكون رد فعل عادي. إذا كنت ترغب في تمرير بعض الخيارات التي تصف الشاشة ، فيمكنك تمرير كائن أيضًا.

مثال

 استيراد {screen1 ، screen3} من '@app/screens' ؛ const navio = navio.build ({
  الشاشات: {واحد: screen1 ، اثنان: () => {return <> </> ؛} ثلاثة: {component: screen3 ، الخيارات: (الدعائم) => ({title: 'threeone'})}
  } ،}) ؛

مداخن

تم تصميم المداخن باستخدام Screens التي تم تعريفها من قبل. يجب أن تساعد IDEs في الإكمال التلقائي لتحسين DX.

يمكن تعريف المكدس عن طريق تمرير مجموعة من Screens . إذا كنت ترغب في تمرير بعض الخيارات إلى Stack Navigator ، فيمكنك تمرير كائن.

مثال

 const navio = navio.build ({
  // شاشات مأخوذة من الخطوة السابقة
  المكدس: {mainstack: ['One' ، 'اثنين'] ، examplestack: {شاشات: ['Three'] ، NavigatorProps: {screenlisteners: {focus: () => {} ،} ،} ،} ،
  } ،}) ؛

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

تم تصميم علامات التبويب باستخدام Screens Stacks Drawers التي تم تعريفها من قبل.

يمكن تعريف علامات التبويب عن طريق تمرير كائن content ، واختياريًا ، الدعائم لـ Navigator.

يمكن أن يأخذ المحتوى كقيمة واحدة من Stacks أو Drawers أو مجموعة Screens أو كائن يصف المكدس وخيارات علامة التبويب السفلية (تصف العنوان ، الرمز ، إلخ).

مثال

 const navio = navio.build ({
  // الشاشات والمداخن مأخوذة من الخطوة السابقة
  علامات التبويب: {apptabs: {layout: {maintab: {stack: ['One' ، 'اثنين'] ، // أو الدرج: 'somedrawer' ، الخيارات: () => ({title: 'main' ،}) ، } ، exampletab: {stack: 'examplestack' ، // أو derer: 'somedrawer' ، الخيارات: () => ({title: 'example' ، }) ،} ،} ، الخيارات: {...} ،
  } ،}) ؛

أدراج

تم تصميم الأدراج باستخدام Screens Stacks وعلامات Tabs التي تم تعريفها من قبل.

يمكن تعريف الأدراج عن طريق تمرير كائن content ، واختياريًا ، الدعائم لـ Navigator.

يمكن أن يأخذ المحتوى كقيمة واحدة من Stacks أو Tabs أو صفيف Screens أو كائن يصف المكدس وخيارات علامة التبويب السفلية (تصف العنوان ، أيقونة ، إلخ).

مثال

 const navio = navio.build ({
  // الشاشات والمداخن مأخوذة من الخطوة السابقة
  أدراج: {maindrawer: {layout: {main: 'mainstack' ، مثال: 'examplestack' ، الملعب: ['One' ، 'اثنين' ، 'ثلاثة'] ،} ، الخيارات: {...} ، // اختياري NavigatorProps: {...} ، // اختياري} ،
  } ،}) ؛

معارض

تم تصميم الوسائط باستخدام Screens Stacks التي تم تعريفها من قبل. يمكنك عرض/تقديمها في أي وقت أثناء استخدام التطبيق.

يمكن تعريف وسيط عن طريق تمرير مجموعة من Screens أو اسم Stacks .

مثال

 const navio = navio.build ({
  // الشاشات والمداخن مأخوذة من الخطوة السابقة
  Midals: {examplemodal: {stack: 'examplestack' ، الخيارات: {...} ، // اختياري} ،
  } ،}) ؛

جذر

هذا هو اسم الجذر للتطبيق. يمكن أن تكون واحدة من Stacks أو Tabs أو Drawers .

يمكنك تغيير جذر التطبيق لاحقًا بواسطة navio.setRoot('drawers', 'AppDrawer') أو عن طريق تغيير initialRouteName <navio.App /> .

مثال

 const navio = navio.build ({
  // المداخن وعلامات التبويب والأدراج مأخوذة من أمثلة سابقة
  الجذر: 'tabs.apptabs' ، // أو 'stacks.mainstack' ، أو 'dearers.appdrawer'}) ؛

السنانير

قائمة السنانير التي سيتم تشغيلها على كل Stacks أو Tabs أو أدراج Drawers . مفيد لوضع الظلام أو تغيير اللغة.

مثال

 const navio = navio.build ({
  السنانير: [Usetranslation] ،}) ؛

الخيارات الافتراضية

الخيارات الافتراضية التي سيتم تطبيقها في كل Stacks أو Tabs Drawer أو الشاشات والحاويات Modal التي تم إنشاؤها داخل التطبيق.

Note جميع خيارات شاشات الحاويات وعلامات Tabs Drawer لها headerShown: false بشكل افتراضي (من أجل إخفاء رؤوس التنقل غير الضرورية). يمكنك دائمًا تغييرها والتي قد تكون مفيدة إذا كنت ترغب في الحصول على زر < Back عند إخفاء علامات التبويب (الضغط على Stack جديد).

مثال

 const navio = navio.build ({
  defaultOptions: {stacks: {screen: {headershadowvisible: false ، headertintcolor: colors.primary ،} ، الحاوية: {headershown: true ،} ،} ، علامات التبويب:
  } ،}) ؛

برنامج

يقوم Navio بإنشاء مكون الجذر للتطبيق بعد تحديد التصميم. يمكن استخدامه لتمريره مباشرة registerRootComponent() أو للالتفاف مع مقدمي الخدمات الإضافية أو إضافة المزيد من المنطق قبل بدء التطبيق.

 const navio = navio.build ({...}) ؛ التصدير الافتراضي () => <navio.app />

يمكنك تغيير جذر التطبيق بواسطة navio.setRoot('drawers', 'AppDrawer') أو عن طريق تغيير initialRouteName <navio.App /> .

الأسئلة الشائعة

تمرير المعاملات إلى وسيط

يتم طرح هذا السؤال في أغلب الأحيان (هنا ، هنا وهنا). أدناه يمكنك العثور على حلين:

النهج القديم باستخدام كائن التنقل

 // استخدم. navitive طريقة كائن التنقل في رد الفعل وتمرير paramsnavio.n.navitation ('mymodal' ، {screen: 'screenname' ، params: {userId: 'sholeid'}}) ؛ () => {
  const {userId} = navio.useparams () ؛} ؛

نهج جديد مع Navio v0.1.+

 // use .modals.show method of navio and pass paramsnavio.modals.show ('mymodal' ، {userid: 'sholeid'}) ؛
  const {userid} = navio.modals.getParams ('mymodal') ؛} ؛

ما هو الفرق بين جهاز التوجيه المعرض ، Navio ، و React Navigation؟

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

Navio ، من ناحية أخرى ، يتبنى نهج التكوين الثابت ، على غرار طريقة بناء التصميم التي شوهدت في التنقل الأصلي React. يستهدف Navio في المقام الأول المنصات الأصلية (iOS و Android) ، مع التركيز بشكل أقل على تحسين توافق الويب. في Navio ، يتم تكوين تخطيط التطبيق داخل ملف واحد.

تم تصميم كلتا المكتبات على أعلى التنقل في رد الفعل ويمكن استخدامها بالتزامن معها. هذا يعني أن جميع السنانير والإجراءات وقدرات الربط العميق والميزات الأخرى من React Navigation تعمل بسلاسة مع كليهما. والجدير بالذكر أن React Savigation تقدم تكوينًا ثابتًا في V7 (والذي لم يتم إصداره بعد).

هل Navio جاهز للإنتاج؟

لقد كان Navio ضروريًا لسوق Buddy (تطبيق iOS) ، مما ساعدنا على إطلاقه في غضون 2-3 أشهر فقط. يتيح لنا استخدامه في التطبيق ، الذي يكسب المستخدمين يوميًا ، ميزات جديدة بسرعة ، التركيز أكثر على إنشاء منطق أعمال قيمة بدلاً من التعامل مع مهام الإعداد الأساسية.

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

إذا كنت تستخدم Navio في تطبيقك ، فأنا أحب أن أسمع منك ، وإذا كانت هناك ميزات إضافية تبحث عنها.

خطط مستقبلية

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

التحسينات

لا تزال هناك بعض الأشياء التي أود إضافتها إلى المكتبة:

• .updateOptions() لعلامة تبويب ودرج محدد.

• يمكن وضع علامات التبويب داخل الدرج والعكس بالعكس.

• تمرير الدعائم إلى الوسائط.

• اجعل الانحراف أسهل من خلال توفير linking الدعامة بالشاشات. مشكلة.

• اجعل Navio Universal بإضافة RNN و RNN-Screens.

• تمديد التبرع Navio وتخطيط التطبيق.

• سهولة تكامل Navio مع React Mavigation (على سبيل المثال. Navio.stack ())

• TypeScript مشكلات @ index.tsx .

لا تتردد في فتح مشكلة لأي اقتراحات.

رخصة

هذا المشروع مرخص معهد ماساتشوستس للتكنولوجيا