react-native-design
Opanuj React Native: stylowanie, nawigacja i animacje dla aplikacji mobilnych
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do budowania responsywnych aplikacji mobilnych w React Native z natywnym doświadczeniem użytkownika. Nauczy Cię stylowania komponentów za pomocą StyleSheet, implementacji nawigacji z React Navigation 6+, tworzenia płynnych animacji w Reanimated 3 oraz obsługi gestów. Idealne do projektowania interfejsów dla iOS i Android, optymalizacji wydajności oraz tworzenia interakcji sterowanych gesturami.
Jak używać
Zainstaluj skill w swoim projekcie agenta, upewniając się że masz dostęp do repozytorium wshobson/agents.
Zaimportuj StyleSheet z biblioteki React Native i zdefiniuj style dla swoich komponentów, grupując je w obiekcie utworzonym za pomocą StyleSheet.create() — to zapewnia optymalizację wydajności.
Gdy budujesz komponenty, łącz style dynamicznie używając tablicy stylów, aby obsługiwać warianty (primary, secondary) i stany (disabled, active) — skill pokaże Ci jak stosować warunkowe style.
Dla nawigacji między ekranami użyj React Navigation 6+, definiując stosy nawigacyjne (stack navigators) i konfigurując przejścia między ekranami zgodnie z wytycznymi platformy.
Gdy potrzebujesz animacji, zastosuj Reanimated 3 do tworzenia płynnych przejść i transformacji — skill obejmuje wzorce dla animacji opartych na gestach i wartościach współdzielonych.
Testuj layout na różnych rozmiarach ekranu i platformach, używając flex-boxa i responsywnych jednostek, aby zapewnić spójny wygląd na iOS i Android.