الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

رد فعل القالب الأصلي

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

لقطات الشاشة

تم إنشاؤها باستخدام المكونات الافتراضية المقدمة في المشروع.

ترحيب الشاشة

ترحيب الشاشة

شاشة تسجيل الدخول

شاشة تسجيل الدخول

تسجيل الشاشة

تسجيل الشاشة

شاشة الملف الشخصي

شاشة الملف الشخصي

سمات

  • ؟ التدويل (I18N)

    • دعم متعدد اللغات باستخدام react-i18next للتوطين السلس.

  • إدارة الدولة مع Redux

    • إدارة الدولة المركزية للوصول والتحديثات العالمية الفعالة للدولة.

  • ؟ البيانات الجلب مع استعلام رد الفعل

    • البيانات المحسنة جلب وتخزين المؤقت والتزامن.

  • ؟ ملاحة

    • التنقل السلس والبديه باستخدام react-navigation مع مكونات قاعدة مثل VStack و HStack .

  • ⚛ العمارة القائمة على المكون

    • تصميم وحدات مع مكونات واجهة المستخدم القابلة لإعادة الاستخدام وتصميم ثابت.

  • ؟ المرافق المشتركة

    • وظائف المساعد والمرافق للتنمية المبسطة.

  • ؟ إدارة أكسيوس

    • طلبات API القابلة للتكوين باستخدام AxiOS مع معالجة الأخطاء المدمجة وإدارة الاستجابة.

  • إدارة WebSocket

    • دعم الاتصال في الوقت الحقيقي باستخدام WebSockets.

  • ؟ إدارة ملفات تعريف الارتباط

    • الإدارة المبسطة لملفات تعريف الارتباط للمصادقة وجلسات المستخدم.

  • المصادقة

    • مصادقة المستخدم والتسجيل مع إدارة الرمز المميز الآمن.

عناصر

يتضمن المشروع مجموعة من المكونات القابلة لإعادة الاستخدام لبناء واجهات المستخدم:

  • مكونات زر

    • button.tsx : مكون زر قياسي مع تصميم قابل للتخصيص.

  • مكونات الطباعة

    • h1.tsx ، h2.tsx : مكونات العنوان للطباعة المتسقة.
    • text.tsx : مكون نص قابل للتخصيص لعرض المحتوى.

  • مكونات الإدخال

    • input.tsx : مكون حقل الإدخال الأساسي.
    • input-with-icon.tsx : حقل الإدخال مع رمز لتفاعل المستخدم المحسن.

  • مكونات التصميم

    • vstack.tsx : تخطيط المكدس الرأسي لترتيب العناصر رأسياً.
    • hstack.tsx : تصميم المكدس الأفقي لترتيب العناصر أفقياً.
    • spacer.tsx : مكون فاصل لإضافة مساحة مرنة بين العناصر.

  • مكونات التنقل

    • navbar.tsx : شريط التنقل القابل للتخصيص لرأس التطبيق.

  • مكونات الصورة

    • image.tsx : مكون الصور لعرض الصور مع دعم التخزين المؤقت.

  • مكونات الأداة المساعدة

    • separator.tsx : مكون مقسم لفصل المحتوى.
    • separator-with-text.tsx : مقسم مع نص لوزارة واجهة المستخدم المحسّنة.
    • switch.tsx : مكون تبديل التبديل للمدخلات المنطقية.

  • ملف الفهرس

    • index.ts : ملف التصدير المركزي للمكونات.

ابدء

المتطلبات الأساسية

تأكد من تثبيت ما يلي:

  • node.js (v14 أو أعلى)
  • غزل
  • Android Studio / Xcode لتطوير Android / iOS

تثبيت

  1. استنساخ المستودع: 

    git clone [email protected]:ToniDarodda/react-native-template.git
cd ReactNativeTemplate

  2. تثبيت التبعيات: 

    yarn install

  3. تكوين متغيرات البيئة:

    قم بتحديث ملف .env في دليل الجذر مع إعدادات التكوين الخاصة بك: 

    API_URL= ' https://your-api-url.com '
SOCKET_URL= ' https://your-socket-url.com '

تشغيل التطبيق

  1. ابدأ مجموعة المترو: 

    yarn start

  2. قم بتشغيل التطبيق على Android: 

    yarn android

  3. قم بتشغيل التطبيق على iOS: 

    yarn ios

  4. الوصول إلى التطبيق:

    سيكون التطبيق متاحًا على المحاكي أو الجهاز.

؟ الاختبار

لتشغيل الاختبارات ، استخدم الأمر التالي: 

yarn test

البرامج النصية

  • ؟ رمز التنسيق باستخدام أجمل: yarn format
  • ؟ ‍ ‍ بدء التطبيق: yarn start
  • ؟ ‍ ابدأ في وضع التطوير: yarn android أو yarn ios
  • ؟ الوبر الكود باستخدام ESLINT: yarn lint
  • ؟ قم بتشغيل الاختبارات: yarn test
  • قم بتشغيل الاختبارات الشاملة: yarn test:e2e

رخصة

لا يوجد ترخيص. أنت حر في استخدامه.

؟ مؤلف

توني دا روددا

أيقونات

  • النشر
  • إعدادات
  • ؟ الوثائق
  • ؟ صيانة
  • حماية
  • ؟ تكامل البريد الإلكتروني
  • ؟ تحسين الأداء
  • ⚡ كسب الوقت

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

لأي أسئلة أو دعم ، يرجى الاتصال بـ Toni da Rodda.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل