react-native-mobile-development
Créer des applications mobiles React Native avec Expo
Le développement d’applications mobiles nécessite des connaissances spécifiques aux plateformes et des outils en ligne de commande. Cette compétence fournit des modèles prêts à l’emploi, des bonnes pratiques et des conseils de dépannage pour le développement React Native et Expo.
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-mobile-development". Create a button component with a title and press handler
Résultat attendu:
- • Use TouchableOpacity for the interactive button element
- • Style with padding: 16, background color: #007AFF, border radius: 8
- • Display title text in white, font size 16, font weight: 600
- • Export as functional component accepting title and onPress props
- • Add accessibilityLabel for screen reader support
Utilisation de "react-native-mobile-development". Set up a new Expo project for iOS and Android
Résultat attendu:
- • Use npx create-expo-app to scaffold the project
- • Install dependencies with npx expo install for compatibility
- • Configure app.json with name, slug, and platform settings
- • Run npx expo start to launch the development server
- • Use npx expo run:ios or npx expo run:android for native builds
Utilisation de "react-native-mobile-development". Fix Metro bundler not starting
Résultat attendu:
- • Clear cache with npx expo start --clear
- • Check that port 8081 is not in use by another process
- • Reset the simulator or emulator if device connection fails
- • Verify Metro is not already running in another terminal
- • Review console logs for module resolution errors
Audit de sécurité
SûrDocumentation-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.
Facteurs de risque
🌐 Accès réseau (3)
📁 Accès au système de fichiers (1)
Score de qualité
Ce que vous pouvez construire
Modèles de composants
Obtenez des modèles de code pour des boutons, des listes, des formulaires et d’autres composants React Native avec des schémas de style appropriés.
Adaptation aux plateformes
Apprenez à écrire du code conditionnel qui adapte le comportement et les styles entre les plateformes iOS et Android.
Dépannage des builds
Résolvez les erreurs courantes de Metro bundler, de modules natifs et de build avec des solutions éprouvées.
Essayez ces prompts
Create a React Native component with TouchableOpacity that shows a text label. Use StyleSheet.create for styling with padding, background color, and border radius.
Write platform-specific styles using Platform.select for iOS shadow and Android elevation. Also show conditional rendering based on Platform.OS.
Create a FlatList component that renders items from an array. Include keyExtractor and proper spacing between items.
Create a TextInput component with useState for value management. Include placeholder, onChangeText handler, and input styling.
Bonnes pratiques
- Utiliser StyleSheet.create() pour tous les styles plutôt que des objets inline afin d’améliorer les performances
- Ajouter accessibilityLabel et accessibilityRole aux éléments interactifs pour les lecteurs d’écran
- Tester les composants sur plusieurs tailles d’écran et sur les plateformes iOS et Android
Éviter
- Éviter les objets de style inline - ils créent de nouveaux objets de style à chaque rendu
- Ne pas omettre les labels d’accessibilité sur les éléments interactifs
- Éviter les vérifications Platform.OS === 'ios' dans la logique métier - extraire dans des hooks personnalisés