react-native-dev
Créer des applications React Native et Expo
La création d'applications mobiles avec React Native nécessite de naviguer parmi des choix complexes en matière de composants, de gestion d'état, d'animations et de déploiement. Cette compétence fournit un guide de développement structuré avec des modèles éprouvés, des bibliothèques recommandées et des exemples prêts pour la production pour les projets Expo et React Native.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "react-native-dev". Create a tab navigation layout with Home, Search, and Profile tabs using Expo Router.
Résultat attendu:
- Un fichier de disposition d'onglets (app/(tabs)/_layout.tsx) avec le composant Tabs de expo-router
- Trois définitions d'écrans d'onglets avec des icônes Ionicons
- Configuration de l'en-tête avec support du grand titre et en-tête stylisé
- Fichiers de route individuels : app/(tabs)/home.tsx, app/(tabs)/search.tsx, app/(tabs)/profile.tsx
Utilisation de "react-native-dev". Show how to use Zustand with persist middleware for user preferences.
Résultat attendu:
- Une définition de store Zustand avec les middleware create et persist
- Interface de type pour l'état avec les paramètres de thème, de langue et de notifications
- Utilisation du modèle de sélecteur dans les composants pour éviter les re-rendus inutiles
- Configuration du backend de stockage utilisant MMKV ou AsyncStorage
Audit de sécurité
SûrThis 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.
Facteurs de risque
⚙️ Commandes externes (4)
Score de qualité
Ce que vous pouvez construire
Démarrer un nouveau projet Expo from scratch
Un développeur a besoin d'échafauder une application React Native prête pour la production avec une structure de projet appropriée, un système de routage, une gestion d'état et un pipeline CI/CD.
Implémenter des animations complexes et des gestes
Un développeur a besoin d'ajouter des animations fluides, un gestionnaire de gestes et des effets basés sur le défilement en utilisant Reanimated 3 et Gesture Handler.
Optimiser les performances de l'application et préparer la publication
Une équipe a besoin de profiler son application, corriger les hoquets de défilement, réduire la taille du bundle, configurer les builds EAS et mettre en place un pipeline CI/CD pour le déploiement sur l'App Store et le Play Store.
Essayez ces prompts
Configurer un nouveau projet Expo avec TypeScript. Inclure Expo Router pour la navigation avec une disposition par onglets, FlashList pour les listes, expo-image pour les images et Zustand pour la gestion d'état. Montrer la structure de projet recommandée.
Créer un formulaire de connexion utilisant React Hook Form et la validation Zod. Inclure des champs email et mot de passe avec des messages d'erreur, un bouton de soumission avec un état de chargement et une intégration API avec un wrapper fetch.
Implémenter une transition d'élément partagé entre un écran de liste et un écran de détail utilisant Reanimated 3. La liste utilise FlashList avec des éléments mémoïsés. En tapant sur un élément, l'animer vers l'écran de détail avec une transition en fondu et en échelle.
Configurer un pipeline EAS Build et Submit avec GitHub Actions. Inclure des profils de build séparés pour le développement et la production, une soumission automatique à l'App Store lors des fusions sur la branche principale et une gestion des variables d'environnement pour différentes étapes.
Bonnes pratiques
- Toujours utiliser FlashList au lieu de FlatList pour les listes, et expo-image au lieu de RN Image pour de meilleures performances et mise en cache
- Animer uniquement les propriétés transform et opacity avec Reanimated pour garder les animations composées par le GPU et éviter le recalcul de la mise en page
- Utiliser le préfixe EXPO_PUBLIC_ pour les variables d'environnement côté client et garder les secrets côté serveur sans le préfixe dans les routes API
Éviter
- Utiliser FlatList sans éléments mémoïsés ou RN Image sans mise en cache pour les listes de production et les galeries d'images
- Importer depuis des fichiers barrel (index.ts) qui augmente la taille du bundle - toujours importer directement depuis les modules source
- Utiliser Platform.OS pour les vérifications de plateforme au lieu de process.env.EXPO_OS, et utiliser useContext au lieu de React.use pour React 18