كيفية إعداد رد فعل الملاحة واستعادة مع رد الفعل الأصلي

https://medium.com/@rocksinghajay

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

تهيئة رد فعل المشروع الأصلي

قم بتشغيل الأوامر التالية في الجهاز:

رد فعل التهيئة الأصلية
مؤتمر نزع السلاح الأصلي
الغزل تثبيت

الآن ، سنقوم بإضافة مكتبات رئيسية مسترجعة ، رد فعل ملاحة ، رد فعل مسترجع ، مسترجع مسجّل.

قم بتشغيل الأوامر التالية في الجهاز:

yarn add redux && yarn add react-redux && yarn add redux-logger && yarn add react-navigation && yarn add react-native-gesture-handler@~1.0.14 &&

بعد تثبيت جميع المكتبات المطلوبة ، انتقل الآن إلى التنقل رد فعل الإعداد ، افتح المشروع في IDE مثل Visual studio ، سامية. قم بتشغيل المشروع عن طريق تشغيل الأمر التالي في المحطة الطرفية والتأكد من أن لديك Xcode لتطوير ios ، تم تثبيته وإعداده بالفعل. كما قام Android studio لتطوير android أيضًا بتثبيت وإعداد وتوصيل جهازك بالفعل بكبل USB بالكمبيوتر وتمكين وضع مطور جهازك.

قم بتشغيل الأمر التالي لبدء المشروع في المحطة الطرفية:

رد فعل الأصلي تشغيل دائرة الرقابة الداخلية // لدائرة الرقابة الداخلية
رد فعل المدى المدى الروبوت / / لالروبوت

إعداد رد فعل الملاحة أولا

في ملف App.js أضف الكود التالي:

ثم قم بإنشاء ملف Router.js في المجلد الجذر للمشروع الخاص بك:

الآن ، قمنا بإعداد التنقل التفاعلي بمشروعنا الذي يمكنك رؤيته في فيديو الشاشة أدناه:

الآن إعداد مسترجع في الماضي

  1. متجر

إنشاء ملف store.js انظر في التطبيق ورؤية الكود أدناه:

في الكود أعلاه ، أنشأنا متجرنا فقط ، داخل متجرنا لدينا dummyReducer في مجلد مخفضات التطبيق ، ولم ننشئ أي مجلد مخفضات وملف dummyReducer حتى الآن.

2. قم بتوصيل المتجر من خلال ملف App.js الذي نقوم بتحديث ملف App.js مثل هذا يشاهد الكود أعلاه:

3. الآن دعونا ننشئ ملف نوع الإجراء في مجلد الأنواع

4. لنقم بإنشاء ملف إجراء في مجلد الإجراء المسمى dummyAction

5. لنقم بإنشاء dummyReducer في مجلد المخفضات الذي تذكرته عندما أنشأنا متجراً داخل المتجر قمنا باستيراد ملف dummyReducer من مجلد المخفضات ، فلنقم الآن بإنشائه.

هذا كل ما قمنا به هو تهيئة إعداد redux الأساسي من خلال التنقل التفاعلي والتفاعل التفاعلي. الآن ، يمكننا استخدام الإعادة مع المكون الأصلي للرد ، انظر الكود أعلاه.

الآن ، لنقم بإنشاء مجلد مكونات وإضافة مكونين نستخدمهما في ملف جهاز التوجيه وتحديث ملف جهاز التوجيه أيضًا.

هذا هو ملف التوجيه المحدث لدينا ، انظر الكود أدناه:

الآن ، فلننشئ كلا المكونين في مكون مجلد ، راجع رمز المكونين أدناه:

في مكون HomeScreen المحدّث هذا ، نقوم بتوصيل رد الفعل المسترد بمكون HomeScreen الخاص بنا لإرسال الإجراء في وقت نقره فوق الزر "انتقال إلى التفاصيل" كما ترى في الرمز أعلاه. وبعد توصيل رد فعل رد الفعل مع المكون ، يمكننا الآن الوصول إلى إرسال الإجراء. ولإرسال الوظيفة ، نحتاج إلى وظيفة الإرسال في الدعائم المكونة. يمكنك الآن التحقق من مواساتك لـ "this.props" في المكون لفهم أفضل.

وفي مكون DetailsScreen ، حصلنا على بيانات dummyAction من dummyReducer كما ترى. وفي التعليمة البرمجية أعلاه ، أنشأنا أنواعًا من الإجراءات بحيث يكون لكل من dummyReducer و dummyAction نفس النوع. لذلك عندما يتم إرسال dummyAction في ذلك الوقت ، فإن البيانات التي أرسلناها في المعلمة dummyAction ، سيتم حفظها في الحالة الأولية dummyReducer ، على سبيل المثال ، "text". ويمكنك أن ترى في مكون DetailsScreen المذكور أعلاه أننا نحصل على بيانات نصية من dummyReducer من الدعائم المكونية بعد توصيل رد فعل رد الفعل مع المكون.

هذا كل ما قمنا به هو إكمال جميع خطوات الإعداد لتفاعل التنقل والإعادة مع رد الفعل الأصلي. انظر المثال أعلاه:

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

التصفيق this لهذه المقالة إذا وجدت أنها مفيدة

لا تتردد في التعليق ومثل هذه المقالة حتى يتمكن الآخرون من العثور عليها بسهولة على "متوسط"!

مرحبا ، اسمي اجاي سينغ راجبوت. أنا مطور Frontend في ZestGeek. أنا أكتب عن جافا سكريبت و reactjs. وتبادل وجهة نظري للعالم مع الجميع انضم إلى سعيي من خلال متابعتي على Twitter أو Medium.

هل تريد معرفة المزيد حول JavaScript ، Reactjs ، React-native؟ تحقق من مقالاتي الأخرى:

وشكراً لك على قراءة هذا المقال إذا كنت ترغب في ذلك ، شاركه مع أصدقائك وأعدائك. وسوف أكتب المزيد عن JavaScript ، react.js ، ابق على اتصال معي.