Nelle parole della skill
Questo skill insegna i pattern di stile React Native, React Navigation 6+ e Reanimated 3 per costruire applicazioni mobili multipiattaforma. Copre StyleSheet e styled-components per lo styling, layout responsivi per diverse dimensioni di schermo, design specifici per piattaforma iOS e Android, interazioni gesture-driven con Gesture Handler e tecniche di ottimizzazione delle prestazioni.
Lo skill si concentra sulla creazione di esperienze utente di qualità nativa con animazioni a 60fps eseguite sul thread UI, definizioni di tipo di navigazione corrette e pratiche di test su dispositivi reali.
Che cosa produce
- Componenti React Native con interfacce TypeScript, definizioni StyleSheet e animazioni Reanimated
- Componenti animati che usano Reanimated 3 con useSharedValue e useAnimatedStyle per prestazioni a 60fps
Come funziona
- 01Stile con StyleSheet
Definisci gli stili dei componenti usando StyleSheet.create invece di stili inline per migliori prestazioni.
- 02Costruisci la Navigazione con Route Tipizzate
Implementa la navigazione usando React Navigation 6+ con definizioni di tipo ParamList in TypeScript per tutti i navigator, per garantire la sicurezza dei tipi tra le schermate.
- 03Animare sul thread UI
Crea animazioni performanti con i worklet di Reanimated 3 che vengono eseguiti sul thread UI, utilizzando useSharedValue e useAnimatedStyle per ottenere una performance a 60fps.
- 04Gestire i gesti con GestureDetector
Implementa interazioni basate su gesti utilizzando Gesture Handler, avvolgendo i gesti con GestureDetector e usando simultaneousHandlers per risolvere i conflitti.
- 05Ottimizzare il rendering
Usa React.memo e useCallback per evitare rerender non necessari. Per le liste, usa sempre FlatList invece di ScrollView con map.