Dans les termes du Skill
Ce skill enseigne les modèles de style React Native, React Navigation 6+ et Reanimated 3 pour créer des applications mobiles multiplateformes. Il couvre StyleSheet et styled-components pour le style, les mises en page adaptatives pour différentes tailles d'écran, les designs spécifiques à iOS et Android, les interactions pilotées par gestes avec Gesture Handler, ainsi que les techniques d'optimisation des performances.
Le skill se concentre sur la création d'expériences utilisateur de qualité native avec des animations à 60 fps exécutées sur le thread UI, des définitions de types de navigation appropriées et des pratiques de test sur appareils réels.
Ce qu'il produit
- Composants React Native avec interfaces TypeScript, définitions StyleSheet et animations Reanimated
- Composants animés utilisant Reanimated 3 avec useSharedValue et useAnimatedStyle pour une performance à 60 fps
Fonctionnement
- 01Styliser avec StyleSheet
Définir les styles des composants en utilisant StyleSheet.create plutôt que des styles en ligne pour de meilleures performances.
- 02Construire la navigation avec des routes typées
Implémenter la navigation avec React Navigation 6+ et des définitions de type ParamList en TypeScript pour tous les navigateurs afin d'assurer la sûreté du typage entre les écrans.
- 03Animer sur le thread UI
Créez des animations performantes avec les worklets Reanimated 3 qui s'exécutent sur le thread UI, en utilisant useSharedValue et useAnimatedStyle pour atteindre 60 fps.
- 04Gérer les gestes avec GestureDetector
Implémentez des interactions pilotées par gestes avec Gesture Handler, en enveloppant les gestes avec GestureDetector et en utilisant simultaneousHandlers pour résoudre les conflits.
- 05Optimiser le rendu
Utilisez React.memo et useCallback pour éviter les rerenders inutiles. Pour les listes, utilisez toujours FlatList plutôt que ScrollView avec map.