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

هذا عبارة عن مجموعة من الغلاية في تطبيق Create-React-Deact مع Redux & Local Auth & React Mavigation مدمجة.

create-react-native-app-redux-auth يولد جميع الملفات التأسيسية لتطبيق React Native جديد مع توصيل Redux (لإدارة الدولة) بالإضافة إلى التنقل التفاعلي والمصادقة المحلية تمامًا!

يمكنك العمل مع جميع المكونات وواجهة برمجة التطبيقات في React Native ، وكذلك معظم واجهات برمجة تطبيقات JavaScript التي يوفرها تطبيق Expo.

مرحبًا بكم في create-react-native-app-redux-auth !

يمكن العثور على برنامج تعليمي مكتوب كامل هنا.

تم تمهيد هذا المشروع مع إنشاء تطبيق React Native و FSG.

لقطات الشاشة

ابدء

تأكد من أن لديك Node V6 أو مثبت لاحقًا ، بالإضافة إلى الإصدار الحالي من Expo Client 2.5.0 على جهازك المحمول لدعم React Native 0.55. لا يلزم تثبيت Xcode أو Android Studio.

الخطوة 1: التثبيت 

$ npm install -g create-react-native-app-redux-auth

الخطوة 2: السقالات

يمكن استخدام أداة create-react-native-app-redux-auth في خطوط مختلفة.

الخيار أ: لا حجج 

$ create-react-native-app-redux-auth

ببساطة تشغيل create-react-native-app-redux-auth في دليل ينشئ جهازًا فرعيًا generated يحتوي على ملفات التطبيق الجديدة.

الخيار ب: وسيطة المسار

بدلاً من ذلك ، يمكن create-react-native-app-redux-auth مسار ملف (نسبيًا أو مطلقًا ، وحتى غير موجود بعد) ، وسيستخدم/إنشاء مجلد الوجهة وملء ملفات التطبيق الجديدة. 

$ create-react-native-app-redux-auth path/to/any/directory/you/prefer

إذا كنت قد صنعت بالفعل و cd 'D في دليل ، وترغب في ملء ملفات التطبيق الجديدة ، ما عليك سوى استخدام . طريق. 

$ create-react-native-app-redux-auth . # caution, this will put the new files in your current folder!

الخطوة 3: بناء

بعد إنشاء الملفات ، تأكد من تشغيل الأوامر التالية في جذر المشروع ( generated/ ما لم تستخدم وسيطة المسار كما هو موضح أعلاه): 

$ npm install

الخطوة 4: بداية سريعة

للبدء السريع ، فقط قم بتغيير شيئين :

  • في package.json ، قم بتغيير "الاسم" إلى اسم تطبيقك.
  • في IP.js ، قم بتغيير عنوان IP إلى عنوان IP الكامل للواجهة الخلفية ، سواء كان ذلك على localhost:PORT أو في مكان ما تم نشره ، مثل Heroku.

لتمكين المصادقة المحلية المدمجة ، يفترض المشروع الذي تم إنشاؤه قاعدة بيانات قيد التشغيل. يجب عليك تكوين الخادم الخاص بك لمكالمات Axios Redux:

  • ستقوم تسجيل الدخول بتقديم طلب put إلى ${IP}/auth/login مع الحمولة النافعة {البريد الإلكتروني: البريد الإلكتروني ، كلمة المرور: كلمة المرور}.
  • سيقوم الاشتراك بتقديم طلب نشر إلى ${IP}/auth/signup مع Payload {البريد الإلكتروني: البريد الإلكتروني ، كلمة المرور: كلمة المرور}.
  • سيقوم DELETE بتقديم طلب حذف إلى ${IP}/auth/logout بدون حمولة. 
$ npm start

شكرا للعب! Hadoken. ؟

إنشاء توثيق محدد للتفاعل بين الذكاء

ستجد أدناه معلومات حول تنفيذ المهام الشائعة. أحدث إصدار من هذا الدليل متاح هنا.

جدول المحتويات

  • التحديث للإصدارات الجديدة
  • البرامج النصية المتاحة
    • بدء NPM
    • اختبار NPM
    • NPM Run iOS
    • NPM Run Android
    • NPM تشغيل الإخراج
  • اختبارات الكتابة والجري
  • متغيرات البيئة
    • تكوين عنوان IP Packager
  • تخصيص اسم عرض التطبيق وأيقونة
  • المشاركة والنشر
    • النشر لمجتمع React الأصلي لـ Expo
    • بناء تطبيق معرض "مستقل"
    • الخروج من إنشاء تطبيق React Native
      • بناء تبعيات (Xcode & Android Studio)
      • هل يجب علي استخدام expokit؟
  • استكشاف الأخطاء وإصلاحها
    • الشبكات
    • لن يفتح محاكي iOS
    • رمز الاستجابة السريعة لا يفحص

التحديث للإصدارات الجديدة

يجب أن تحتاج فقط إلى تحديث التثبيت العالمي لتشغيل create-react-native-app نادرًا للغاية ، من الناحية المثالية أبدًا.

يجب أن يكون تحديث تبعية react-native-scripts للتطبيق أمرًا بسيطًا مثل تصفيف رقم الإصدار في package.json وإعادة تثبيت تبعيات مشروعك.

يتطلب الترقية إلى إصدار جديد من React Native تحديث إصدارات حزمة react-native و react و expo ، وتعيين sdkVersion الصحيح في app.json . راجع دليل الإصدار للحصول على معلومات محدثة حول توافق إصدار الحزمة.

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

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

npm start

يدير تطبيقك في وضع التطوير.

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

في بعض الأحيان قد تحتاج إلى إعادة تعيين أو مسح ذاكرة التخزين المؤقت لـ React Native Packager. للقيام بذلك ، يمكنك تمرير علامة- --reset-cache إلى البرنامج النصي START: 

 npm start --reset-cache
# or
yarn start --reset-cache

npm test

يدير عداء اختبار Jest على اختباراتك.

npm run ios

مثل npm start ، ولكن يحاول أيضًا فتح تطبيقك في محاكاة iOS إذا كنت على جهاز Mac وتم تثبيته.

npm run android

مثل npm start ، ولكن يحاول أيضًا فتح تطبيقك على جهاز Android أو المحاكي المتصل. يتطلب تثبيت أدوات بناء Android (انظر React Docs الأصلي لإعداد مفصل). نوصي أيضًا بتثبيت Genymotion كمحاكي Android الخاص بك. بمجرد الانتهاء من إعداد بيئة البناء الأصلية ، هناك خياران لإتاحة النسخة الصحيحة من adb لإنشاء تطبيق React الأصلي:

باستخدام adb من Android Studio
  1. تأكد من أنه يمكنك تشغيل ADB من المحطة الخاصة بك.
  2. افتح genymotion وانتقل إلى Settings -> ADB . حدد "استخدام أدوات SDK المخصصة Android" وتحديثها باستخدام دليل Android SDK.
باستخدام adb Genymotion
  1. العثور على نسخة Genymotion من ADB. على macOS على سبيل المثال ، هذا عادة /Applications/Genymotion.app/Contents/MacOS/tools/ genymotion.app/contents/macos/tools/.
  2. أضف دليل أدوات Genymotion إلى مسارك (تعليمات لـ Mac و Linux و Windows).
  3. تأكد من أنه يمكنك تشغيل ADB من المحطة الخاصة بك.

npm run eject

سيؤدي ذلك إلى بدء عملية "القذف" من إنشاء البرامج النصية لإنشاء APP الخاصة بـ React Native. ستُطرح بعض الأسئلة حول كيفية بناء مشروعك.

تحذير: تشغيل الإخراج هو إجراء دائم (بصرف النظر عن أي نظام التحكم في الإصدار الذي تستخدمه). سيتطلب منك تطبيق مخرج إعداد بيئة استوديو Xcode و/أو Android.

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

يمكنك تحرير app.json لتضمين مفاتيح التكوين ضمن مفتاح expo .

لتغيير اسم عرض التطبيق الخاص بك ، قم بتعيين مفتاح expo.name في app.json إلى سلسلة مناسبة.

لتعيين أيقونة التطبيق ، قم بتعيين مفتاح expo.icon في app.json ليكون إما مسارًا محليًا أو عنوان URL. يوصى باستخدام ملف PNG 512x512 مع شفافية.

اختبارات الكتابة والجري

تم إعداد هذا المشروع لاستخدام Jest للاختبارات. يمكنك تكوين أي استراتيجية اختبار تريدها ، ولكن Jest يعمل خارج المربع. قم بإنشاء ملفات اختبار في الدلائل التي تسمى __tests__ أو مع امتداد .test لتحميل الملفات بواسطة Jest. انظر مشروع القالب لاختبار مثال. تعتبر وثائق Jest أيضًا موردًا رائعًا ، وكذلك برنامج React Native Testing Tutorial.

متغيرات البيئة

يمكنك تكوين بعض من Create React Native App باستخدام متغيرات البيئة.

تكوين عنوان IP Packager

عند بدء مشروعك ، سترى شيئًا كهذا لعنوان URL لمشروعك: 

 exp://192.168.0.2:19000

يخبر "البيان" في عنوان URL تطبيق Expo كيفية استرداد وتحميل حزمة JavaScript الخاصة بالتطبيق الخاص بك ، لذلك حتى إذا قمت بتحميله في التطبيق عبر عنوان URL مثل exp://localhost:19000 ، سيظل تطبيق عميل Expo يحاول استرداد تطبيقك على عنوان IP الذي يوفره البرنامج النصي Start.

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

Mac و Linux: 

 REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname' npm start

Windows: 

 set REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname'
npm start

المثال أعلاه من شأنه أن يتسبب في الاستماع إلى خادم التطوير على exp://my-custom-ip-address-or-hostname:19000 .

المشاركة والنشر

يقوم Create React Native App بعمل الكثير من العمل لجعل إعداد التطبيق بسيطًا ومباشرًا ، ولكن من الصعب جدًا القيام بنفس الشيء للنشر في متجر تطبيقات Apple أو متجر Play من Google دون الاعتماد على خدمة مستضافة.

النشر لمجتمع React الأصلي لـ Expo

يوفر Expo استضافة مجانية لتطبيقات JS فقط التي أنشأتها CRNA ، مما يتيح لك مشاركة تطبيقك من خلال تطبيق عميل Expo. هذا يتطلب التسجيل لحساب المعرض.

قم بتثبيت أداة سطر الأوامر exp ، وقم بتشغيل أمر النشر: 

 $ npm i -g exp
$ exp publish

بناء تطبيق معرض "مستقل"

يمكنك أيضًا استخدام خدمة مثل بنيات Expo المستقلة إذا كنت ترغب في الحصول على IPA/APK للتوزيع دون الحاجة إلى بناء الكود الأصلي بنفسك.

الخروج من إنشاء تطبيق React Native

إذا كنت ترغب في إنشاء تطبيقك ونشره بنفسك ، فستحتاج إلى الإخراج من CRNA واستخدام Xcode و Android Studio.

عادة ما يكون هذا بسيطًا مثل تشغيل npm run eject في مشروعك ، والذي سيمشي بك خلال العملية. تأكد من تثبيت react-native-cli واتبع دليل البدء في الرمز الأصلي لـ React Native.

هل يجب علي استخدام expokit؟

إذا كنت قد استخدمت واجهات برمجة تطبيقات Expo أثناء العمل في مشروعك ، فستتوقف مكالمات API هذه عن العمل إذا تم إخراجها من مشروع React Native. إذا كنت ترغب في متابعة استخدام واجهات برمجة التطبيقات هذه ، فيمكنك إخراج "React Native + Expokit" والتي ستتيح لك إنشاء الكود الأصلي الخاص بك ومتابعة استخدام واجهات برمجة التطبيقات المعرض. راجع دليل الإخراج لمزيد من التفاصيل حول هذا الخيار.

استكشاف الأخطاء وإصلاحها

الشبكات

إذا كنت غير قادر على تحميل التطبيق الخاص بك على هاتفك بسبب مهلة الشبكة أو اتصال رفض ، فإن الخطوة الأولى الجيدة هي التحقق من أن هاتفك وجهاز الكمبيوتر الخاص بك على نفس الشبكة ويمكنهما الوصول إلى بعضهما البعض. يحتاج إنشاء التطبيق الأصلي React إلى الوصول إلى المنافذ 19000 و 19001 ، لذا تأكد من أن إعدادات شبكتك وجدار الحماية تسمح بالوصول من جهازك إلى جهاز الكمبيوتر الخاص بك على كلا المنافذ.

حاول فتح متصفح ويب على هاتفك وفتح عنوان URL الذي يطبع البرنامج النصي Packager ، لاستبدال exp:// باستخدام http:// . لذلك ، على سبيل المثال ، إذا كان تحت رمز الاستجابة السريعة في المحطة الخاصة بك ، ترى: 

 exp://192.168.0.1:19000

حاول فتح Safari أو Chrome على هاتفك وتحميلها 

 http://192.168.0.1:19000

و 

 http://192.168.0.1:19001

إذا نجح هذا ، لكنك لا تزال غير قادر على تحميل التطبيق الخاص بك عن طريق مسح رمز الاستجابة السريعة ، فيرجى فتح مشكلة على مستودع Create React Native App مع تفاصيل حول هذه الخطوات وأي رسائل خطأ أخرى قد تتلقاها.

إذا لم تكن قادرًا على تحميل عنوان URL http في متصفح الويب الخاص بهاتفك ، فحاول استخدام ميزة نقطة الاتصال/الجوال على هاتفك (احذر من استخدام البيانات ، على الرغم من ذلك) ، وتوصيل جهاز الكمبيوتر الخاص بك بشبكة WiFi هذه ، وإعادة تشغيل الحزمة. إذا كنت تستخدم VPN ، فقد تحتاج إلى تعطيله.

لن يفتح محاكي iOS

إذا كنت على جهاز Mac ، فهناك بعض الأخطاء التي يرى المستخدمون أحيانًا عند محاولة npm run ios :

  • "رمز الخروج غير الصفر: 107"
  • "قد تحتاج إلى تثبيت Xcode" ولكن تم تثبيته بالفعل
  • وغيرهم

هناك بعض الخطوات التي قد ترغب في اتخاذها لاستكشاف هذه الأنواع من الأخطاء:

  1. تأكد من تثبيت Xcode وفتحه لقبول اتفاقية الترخيص إذا كان يطالبك. يمكنك تثبيته من متجر تطبيقات Mac.
  2. افتح تفضيلات Xcode ، علامة تبويب المواقع ، وتأكد من تعيين خيار قائمة Command Line Tools على شيء ما. في بعض الأحيان عندما يتم تثبيت أدوات CLI لأول مرة عن طريق homebrew ، يتم ترك هذا الخيار فارغًا ، مما قد يمنع أدوات Apple من العثور على المحاكاة. تأكد من إعادة تشغيل npm/yarn run ios بعد القيام بذلك.
  3. إذا لم ينجح ذلك ، فافتح محاكاة ، وتحت قائمة التطبيق ، حدد Reset Contents and Settings... بعد الانتهاء من ذلك ، استقال من المحاكاة ، وإعادة تشغيل npm/yarn run ios .

رمز الاستجابة السريعة لا يفحص

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

إذا تسبب هذا في مشاكل لك ، فقد ترغب في محاولة تغيير موضوع لون المحطة الخاصة بك لمزيد من التباين ، أو تشغيل إنشاء تطبيق React الأصلي من محطة مختلفة. يمكنك أيضًا إدخال عنوان URL المطبوع يدويًا بواسطة البرنامج النصي Packager في شريط البحث في تطبيق Expo لتحميله يدويًا.

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