setup-react-native-storybook
Szybka konfiguracja Storybook dla React Native w Expo, CLI lub Re.Pack
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Umożliwia dodanie Storybook v10 do projektów React Native niezależnie od ich typu. Obsługuje Expo bez routera, Expo Router, React Native CLI oraz Re.Pack z rspack/webpack. Automatycznie konfiguruje metro.config.js, tworzy pliki .rnstorybook, ustawia trasy w Expo Router i dodaje StorybookPlugin do konfiguracji bundlera. Wykrywa menedżer pakietów (npm, yarn, pnpm, bun) i dostosowuje komendy instalacji.
Jak używać
Zidentyfikuj typ swojego projektu: sprawdź czy używasz Expo z Expo Router (plik
_layout.tsxw kataloguapp/), Expo bez routera, React Native CLI, czy Re.Pack (obecnośćrspack.configlubwebpack.config).Sprawdź menedżer pakietów projektu — poszukaj pliku
yarn.lock,pnpm-lock.yamllubbun.lockbi używaj odpowiedniej komendy (yarn,pnpmlubbun) zamiastnpmwe wszystkich instrukcjach.Uruchom inicjalizację Storybook poleceniem
<pmu003e create storybookz odpowiednimi flagami dla Twojego typu projektu (tylko npm wymaga--przed flagami, nie używajnpxanibunx).Dla projektów Expo zainstaluj zależności komendą
npx expo install(lubbunx expo installitp.), aby Expo mogło rozwiązać kompatybilne wersje pakietów.Skonfiguruj
metro.config.jszwithStorybooki utwórz pliki.rnstorybookzgodnie z instrukcjami dla Twojego typu projektu (Expo Router wymaga ustawienia tras, Re.Pack wymaga dodania StorybookPlugin do konfiguracji).Uruchom Storybook komendą
<pmu003e storybook(z użyciem menedżera pakietów z kroku 2) i sprawdź, czy komponenty ładują się prawidłowo.
Podobne skille
senior-architect
autor: alirezarezvani
react-native-design
autor: wshobson
automating-mobile-app-testing
autor: jeremylongshore
app-store-optimization
autor: davila7
build-iphone-apps
autor: glittercowboy
build-macos-apps
autor: glittercowboy