كيفية بناء تطبيقات الجوال مع React-Native

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

تثبيت React Native:

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

ل React Native نحتاج إلى عقدة و Watchman و React Native CLI و Xcode. Watchman هي خدمة لمشاهدة التغييرات وتحريك الإجراءات عند حدوث ذلك. رد الفعل CLI هو واجهة الأوامر لـ React Native. Xcode هو Apple IDE.

  1. تثبيت العقدة والحارس:

تثبيت العقدة والحارس مع البيرة

الشراب تثبيت العقدة
الشراب تثبيت الحارس

2. تثبيت رد فعل الأصلي CLI

هذا سيساعدك على تثبيت React Native. إذا كان لديك React Native مثبتًا بالفعل ، فيمكنك التخطي للأمام إلى البرنامج التعليمي.

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

npm تثبيت -g رد فعل الأصلي- CLI

3. تثبيت Xcode وأدوات Xcode الأوامر

قم بتثبيت Xcode من متجر تطبيقات Mac.

لقد انتهيت الآن. لنبدأ أول تطبيق لدينا:

إنشاء المشروع التفاعلي الأصلي:

قم بتشغيل هذه الأوامر في محطة طرفية:

رد فعل الأصلي الحرف الأول AwesomeProject

الآن افتح المشروع باستخدام محررك المفضل ، وسأستخدم VSCode.

ملفات المشروع

اضغط على ˆ control + `لتبديل الجهاز في VScode.

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

هيكل المجلد

بعد الانتهاء من التثبيت ، يجب أن يكون لديك الملفات التالية:

للبدء ، أوصي بعمل القليل من التدبير المنزلي:

  • إضافة مجلد في الجذر يسمى التطبيق
  • انقل ملف App.js إلى جذر التطبيق
  • قم بتحديث عبارة import index.js لاستيراد التطبيق من ./app/App.js
  • إنشاء مجلدات داخل التطبيق

الأصول - لدينا مجلدين في هذا الدليل ، الصور والرسوم المتحركة.

المكونات - هذا هو المكان الذي ستضع فيه جميع مكوناتك المشتركة.

config - قمنا بإعداد نظام ألوان تطبيقنا في ملف colours.js للحفاظ على هذا ثابتًا.

شاشات - هذه هي وجهات نظرنا الرئيسية.

شاشات

في تطبيقنا ، لدينا خمس شاشات رئيسية

  • خزانة الكتب
  • يكتشف
  • أضف كتاب
  • قوائم
  • الملف الشخصي

للبدء ، سنعتقل نصوص العنصر النائب:

التنقل

بمجرد إعداد هذه الشاشات الخمس ، يمكننا إنشاء الجزء الأول من التنقل الخاص بنا ، وهو التنقل بين علامات التبويب في أسفل الشاشة. سنستخدم مكتبة React Navigation. سنقوم بإضافة ملف router.js إلى جذر مجلد التطبيق الخاص بنا ، ثم نقوم بتثبيت عدد من المكتبات:

تثبيت React-Navigation

npm تثبيت رد فعل الملاحة - حفظ

1. تثبيت رد فعل العناصر الأصلية

غزل إضافة عناصر رد فعل الأم أو npm i - حفظ عناصر رد فعل الأم

2. تثبيت رد فعل الرموز ناقلات الأصلي

إضافة الغزل رموز رد الفعل الأصلي أو npm i - حفظ رموز ناقلات رد الفعل الأصلي

رد فعل أصلي رابط رد فعل أيقونات متجه

شيء واحد أكثر للقيام به هو تغيير App.js

يجب أن يكون لديك شيء يشبه هذا:

إضافة كتب

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

لهذا الغرض ، سنستخدم مكوّن React Native's FlatList. هذا هو مكون أنيق حقًا يعمل خارج المربع لإجراء عرض للبيانات وعرضها. يرجع السبب في كونه أنيقًا إلى أنه يحتوي على الكثير من الوظائف المدمجة ، أشياء مثل السحب للتحديث ، التمرير ، الخ

في ملف Bookcase.js سنعمل على إضافة بعض التعليمات البرمجية لتبدو كما يلي:

Bookcase.JS

في هذا ، يمكنك ملاحظة أننا نحتاج إلى إضافة ملف آخر: BookcaseItem.js وهو ما تقوم به وظيفة _renderItem الخاصة بنا. هذا ما يبدو عليه الملف:

BookcaseItem.JS

EditBook.JS

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

في ملف router.js سوف تجد اثنين من إنشاء createStackNavigator ، قد تتساءل ماذا تفعل StackNavigator! يمكنك أن تتخيل createBottomTabNavigator مثل خمس بطاقات بوكر توضع على طاولة أفقياً بجوار بعضها البعض. عندما تضيف createStackNavigator ، فأنت تضع بطاقاتًا في مقدمة واحدة من تلك البطاقات الخمس ، وتضيف عمقًا.

export const BookcaseStack = createStackNavigator ({
خزانة الكتب: {
الشاشة: خزانة الكتب ،
navigationOptions: ({navigation}) => ({
tabBarLabel: 'Bookcase' ،
العنوان: لاغ
})،
EditBook: {
الشاشة:
navigationOptions: ({navigation}) => ({
tabBarLabel: "تحرير كتاب" ،
العنوان: لاغ
})،
})؛

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

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

يمكنك العثور على الرمز الكامل هنا.