● مجتمع
zaferayan
⚡ فوري
skills
بواسطة zaferayan · zaferayan/skills
مهارة Expo + React Native لـ Claude Code — توليد الشاشات وربط الملاحة واحترام طريقة Expo بدلاً من إعادة اختراعها.
مهارة موجهة نحو Expo لـ Claude Code. تعلم Claude بناء تطبيقات الهاتف بطريقة Expo: استخدام expo-router للملاحة، تكوين EAS السليم، وحدات Expo SDK بدلاً من حزم npm عشوائية. تتجنب الفخ الشائع حيث يقترح الذكاء الاصطناعي أنماط RN-CLI القديمة.
لماذا تستخدمه
الميزات الأساسية
- توليد هيكل يدرك Expo SDK
- أنماط الملاحة القائمة على الملفات في expo-router
- إرشادات تكوين EAS Build + Submit
- قيم افتراضية TypeScript + Zustand
- تجنب نصائح حقبة RN-CLI
عرض مباشر
كيف يبدو في الممارسة
skills-skill-7.replay
▶ جاهز
حالات الاستخدام
استخدامات عملية: skills
متى تستخدمه: اليوم الأول من مشروع جديد — تريد علامات تبويب وجدول وتدفق تسجيل دخول دون قراءة ثلاثة مقالات مدونة.
الخطوات
-
إنشاء التطبيق
استخدم مهارة Expo. ابدأ تطبيق جديد 'TaskFlow' مع expo-router و TypeScript وقالب علامات التبويب. أضف شاشة تسجيل دخول بالبريد الإلكتروني وكلمة المرور.✓ تم النسخ
→ npx create-expo-app run, then file structure with app/(tabs)/ and app/(auth)/
-
إضافة الحالة
قم بربط Zustand لمتجر المصادقة والاحفظ في SecureStore.✓ تم النسخ
→ stores/auth.ts with zustand + persist middleware using expo-secure-store
-
اختبار على الجهاز
ابدأ خادم التطوير وأعطني رمز QR للمسح الضوئي.✓ تم النسخ
→ npx expo start output
النتيجة: تطبيق يعمل على هاتفك مع علامات تبويب ومصادقة وحفظ البيانات في أقل من ساعة.
المزالق
- Claude يقترح أنماط react-native-cli — قل صراحة 'Expo SDK و expo-router فقط' في الأوامر
متى تستخدمه: أول مرة تقدم لـ TestFlight/Play.
الخطوات
-
إنشاء eas.json
استخدم مهارة Expo. أنشئ eas.json مع ملفات تعريف المعاينة (الداخلية) والإنتاج، وأنماط معرّفات الحزمة الصحيحة، وحقن متغيرات البيئة.✓ تم النسخ
→ ملف eas.json صحيح مع كلا الملفات التعريفية
-
ربط الأسرار
أضف Sentry DSN وعنوان URL الأساسي للـ API كأسرار EAS للمعاينة والإنتاج بشكل منفصل.✓ تم النسخ
→ eas secret:create commands listed
-
بدء البناء
الآن ابدأ بناء معاينة لـ iOS.✓ تم النسخ
→ eas build --profile preview --platform ios command
النتيجة: EAS ينشئ الإصدارات، والأسرار مُدارة.
المزالق
- التزام app.json مع الأسرار المضمنة — الأسرار تذهب إلى بيئة EAS، وليس app.json؛ اترك Claude يستخدم expo-constants لقراءتها
متى تستخدمه: تحتاج إلى وظائف خارج JS، لكنك لا تريد الخروج.
الخطوات
-
تحديد الحزمة الصحيحة
استخدم مهارة Expo. أحتاج إلى مصادقة بيومترية. ما هي وحدة Expo SDK الصحيحة وكيف أقوم بتكوينها؟✓ تم النسخ
→ expo-local-authentication مع إدخالات مكون التكوين
-
ربط مكون التكوين
أضف إدخالات مكون التكوين وسلاسل الاستخدام المطلوبة لـ iOS.✓ تم النسخ
→ اختلاف app.json مع مصفوفة مكونات و NSFaceIDUsageDescription
النتيجة: وحدة أصلية مدمجة عبر سير العمل المُدار.
المزالق
- إضافة رمز أصلي خام وكسر سير العمل المُدار — فضل وحدات Expo SDK ومكونات التكوين؛ اخرج فقط إذا كان ذلك ضرورياً حقاً
التركيبات
اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10
تطبيق أسلوب Expo بشكل جماعي على مشروع RN موجود
أنقل تطبيقي RN-CLI إلى سير عمل Expo المُدار؛ أشر إلى شجرة المصدر.✓ تم النسخ
التزم بكل خطوة بشكل منفصل حتى تكون تغييرات إعداد EAS قابلة للتدقيق
التزم بتغييرات تكوين EAS كالتزام منفصل قبل إضافة الأسرار.✓ تم النسخ
التكلفة والحدود
تكلفة التشغيل
- حصة API
- لا يوجد مدمج
- الرموز لكل استدعاء
- معتدل
- التكلفة المالية
- Expo مجاني؛ EAS Build لديه مستوى مجاني مع تحجيم مدفوع
- نصيحة
- استخدم EAS محلي أثناء التطوير؛ البناء السحابي فقط للمعاينة/الإنتاج.
الأمان
الصلاحيات والأسرار ونطاق الأثر
تخزين بيانات الاعتماد: لا توجد بيانات اعتماد مباشرة؛ إدارة أسرار EAS بواسطة Expo
نقل البيانات الخارجي: لا يوجد من المهارة نفسها
- لا تلتزم أبداً بـ eas.json مع أسرار مضمنة؛ استخدم eas secret:create.
- تعامل مع بيانات expo-secure-store كبيانات حساسة؛ إنها مشفرة لكن ليست لا تُقهر.
استكشاف الأخطاء
الأخطاء الشائعة وحلولها
لا يمكن لـ Metro العثور على الوحدة بعد التثبيت
قم بتشغيل npx expo install بدلاً من npm install بحيث يتم اختيار الإصدارات المتوافقة مع SDK
تحقق: npx expo-doctor
فشل البناء مع 'معرّف الحزمة غير المعترف به'
عدم تطابق معرّف الحزمة بين app.json وبوابة مطوّر Apple؛ محاذاتها
لم يتم العثور على الوحدة الأصلية في وقت التشغيل
لم يتم تشغيل مكون التكوين؛ أعد البناء باستخدام eas build أو npx expo prebuild --clean
البدائل
skills مقابل البدائل
| البديل | متى تستخدمها | المقايضة |
|---|
| React Native CLI | تحتاج إلى التحكم الأقصى الأصلي ولا تمانع إدارة Xcode/Gradle | عبء إعداد أكثر بكثير |
| Flutter | متعدد المنصات مع Dart | لغة مختلفة، نظام بيئي مختلف |