react-native-mobile-development
بناء تطبيقات الجوال باستخدام React Native و Expo
تطوير تطبيقات الجوال يتطلب معرفة خاصة بالمنصة وأدوات سطر الأوامر. توفر هذه المهارة قوالب جاهزة للاستخدام، وأفضل الممارسات، وإرشادات استكشاف الأخطاء لمطويرين React Native و Expo.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "react-native-mobile-development". إنشاء مكون زر مع عنوان ومعالج ضغط
النتيجة المتوقعة:
- • استخدم TouchableOpacity لعنصر التفاعل
- • نظف مع padding: 16، لون الخلفية: #007AFF، نصف قطر الحدود: 8
- • اعرض نص العنوان بالأبيض، حجم الخط: 16، وزن الخط: 600
- • صدّر كدالة تستقبل title و onPress
- • أضف accessibilityLabel لدعم قارئة الشاشة
استخدام "react-native-mobile-development". إعداد مشروع Expo جديد لـ iOS و Android
النتيجة المتوقعة:
- • استخدم npx create-expo-app لإنشاء المشروع
- • ثبّت الحزم مع npx expo install للتوافق
- •.configure app.json مع name و slug وإعدادات المنصة
- • شغّل npx expo start لبدء خادم التطوير
- • استخدم npx expo run:ios أو npx expo run:.native للبناء الأصلي
استخدام "react-native-mobile-development". إصلاح عدم بدء Metro bundler
النتيجة المتوقعة:
- • امسح الكاش مع npx expo start --clear
- • تأكد من أن المنفذ 8081 ليس مستخدمًا من عملية أخرى
- • أعد تعيين المحاكي أو المحاكي إذا فشل اتصال الجهاز
- • تحقق من أن Metro لا يعمل بالفعل في طرفية أخرى
- • راجع سجلات وحدة التحكم لأخطاء حل الوحدة
التدقيق الأمني
آمنDocumentation-only skill for React Native development. Contains no executable code, scripts, or file system operations. Static findings are false positives from markdown documentation elements (color codes, bash examples, external links) that the scanner misidentified as security risks.
عوامل الخطر
🌐 الوصول إلى الشبكة (3)
📁 الوصول إلى نظام الملفات (1)
درجة الجودة
ماذا يمكنك بناءه
قوالب المكونات
احصل على قوالب أكواد للأزرار والقوائم والنماذج ومكونات React Native الأخرى مع أنماط التصميم المناسبة.
تكييف المنصة
تعلم كتابة كود مشروط يكيف السلوك والأنماط بين منصتي iOS و Android.
استكشاف أخطاء البناء
حل المشاكل الشائعة في Metro bundler والوحدات الأصلية وأخطاء البناء بحلول مثبتة.
جرّب هذه الموجهات
أنشئ مكون React Native مع TouchableOpacity الذي يعرض نصًا. استخدم StyleSheet.create للتنسيق مع المساحة الداخلية ولون الخلفية ونصف قطر الحدود.
اكتب أنماط خاصة بالمنصة باستخدام Platform.select لظل iOS وelevation Android. أيضًا أظهر العرض الشرطي بناءً على Platform.OS.
أنشئ مكون FlatList يعرض العناصر من مصفوفة. Include key والمسافة المناسبة بين العناصر.
أنشئ مكون TextInput مع useState لإدارة القيمة. Include placeholder ومعالج onChangeText وتنسيق الإدخال.
أفضل الممارسات
- استخدم StyleSheet.create() لجميع الأنماط بدلاً من الكائنات المضمنة لتحسين الأداء
- أضف accessibilityLabel و accessibilityRole للعناصر التفاعلية لقارئات الشاشة
- اختبر المكونات على أحجام شاشات متعددة ومنصتي iOS و Android
تجنب
- تجنب كائنات الأنماط المضمنة - فهي تنشئ كائنات أنماط جديدة مع كل عرض
- لا تتخطى تسميات إمكانية الوصول على العناصر التفاعلية
- تجنب التحقق من Platform.OS === 'ios' في منطق العمل - استخرجها إلى hooks مخصصة