react-native-dev
بناء تطبيقات React Native و Expo
يتطلب بناء تطبيقات الهاتف المحمول باستخدام React Native التنقل بين خيارات معقدة في المكونات وإدارة الحالة والرسوم المتحركة والنشر. توفر هذه المهارة دليل تطوير منظم مع أنماط مثبتة ومكتبات موصى بها وأمثلة جاهزة للإنتاج لمشاريع Expo و React Native.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "react-native-dev". إنشاء تخطيط تنقل بعلامات التبويب مع علامات Home و Search و Profile باستخدام Expo Router.
النتيجة المتوقعة:
- ملف تخطيط علامات التبويب (app/(tabs)/_layout.tsx) مع مكون Tabs من expo-router
- ثلاث تعريفات شاشة للعلامات التبويب مع أيقونات Ionicons
- تكوين Header مع دعم large title و header منسق
- ملفات المسار الفردية: app/(tabs)/home.tsx و app/(tabs)/search.tsx و app/(tabs)/profile.tsx
استخدام "react-native-dev". إظهار كيفية استخدام Zustand مع persist middleware لتفضيلات المستخدم.
النتيجة المتوقعة:
- تعريف متجر Zustand مع create و persist middleware
- واجهة حالة مكتوبة بأمان مع إعدادات السمة واللغة والإشعارات
- نمط المستحدم (selector) في المكونات لمنع إعادة العرض غير الضرورية
- تكوين خلفية التخزين باستخدام MMKV أو AsyncStorage
التدقيق الأمني
آمنThis skill is a documentation-only reference guide for React Native and Expo development. It contains 12 markdown files (SKILL.md plus 11 reference files) with code examples. All 740 static analysis findings are false positives: the scanner misidentified markdown code blocks (triple-backtick fenced examples) as executable code. Patterns flagged include shell commands in installation instructions, relative imports shown as code examples, environment variable usage in documentation, and documentation references to .env files. No executable code exists in this skill.
عوامل الخطر
⚙️ الأوامر الخارجية (4)
درجة الجودة
ماذا يمكنك بناءه
بدء مشروع Expo جديد من الصفر
يحتاج المطور إلى إنشاء سقالة لتطبيق React Native جاهز للإنتاج مع بنية مشروع مناسبة وتوجيه وإدارة حالة وخط أنابيب CI/CD.
تنفيذ رسوم متحركة وإيماءات معقدة
يحتاج المطور إلى إضافة رسوم متحركة سلسة ومعالجة إيماءات وتأثيرات driven by scroll باستخدام Reanimated 3 و Gesture Handler.
تحسين أداء التطبيق والتحضير للإصدار
تحتاج الفريق إلى profiling للتطبيق الخاص بهم وإصلاح scroll jank وتقليل حجم الحزمة وتكوين EAS builds وإعداد CI/CD لنشر App Store و Play Store.
جرّب هذه الموجهات
إعداد مشروع Expo جديد مع TypeScript. تضمين Expo Router للتنقل مع تخطيط علامات التبويب و FlashList للقوائم و expo-image للصور و Zustand لإدارة الحالة. إظهار هيكل المشروع الموصى به.
إنشاء نموذج تسجيل الدخول باستخدام React Hook Form و Zod validation. تضمين حقول البريد الإلكتروني وكلمة المرور مع رسائل الخطأ وزر إرسال مع حالة التحميل ودمج API مع fetch wrapper.
تنفيذ انتقالة عنصر مشترك بين شاشة القائمة وشاشة التفاصيل باستخدام Reanimated 3. تستخدم القائمة FlashList مع عناصر memoized. عند النقر على عنصر، تحريكه إلى شاشة التفاصيل مع انتقالة fade و scale.
إعداد خط أنابيب EAS Build و Submit مع GitHub Actions. تضمين ملفات بناء منفصلة للتطوير والإنتاج وإرسال متجر التطبيقات التلقائي عند دمج فرع main وإدارة متغيرات البيئة للمراحل المختلفة.
أفضل الممارسات
- استخدم دائمًا FlashList بدلاً من FlatList للقوائم و expo-image بدلاً من RN Image لأداء أفضل والتخزين المؤقت
- قم بتحريك خصائص transform و opacity فقط مع Reanimated للحفاظ على رسوم متحركة composed على GPU وتجنب إعادة حساب التخطيط
- استخدم بادئة EXPO_PUBLIC_ لمتغيرات البيئة من جانب العميل واحتفظ بالأسرار الخاصة بالخادم فقط بدون بادئة في API routes
تجنب
- استخدام FlatList بدون عناصر memoized أو RN Image بدون تخزين مؤقت لقوائمصالات الإنتاج ومعارض الصور
- الاستيراد من ملفات barrel (index.ts) التي تزيد حجم الحزمة - استورد دائمًا مباشرة من وحدات المصدر
- استخدام Platform.OS لفحوصات النظام الأساسي بدلاً من process.env.EXPO_OS واستخدام useContext بدلاً من React.use لـ React 18