Toolverse
Wszystkie skille

setup-react-native-storybook

autor: storybookjs

Szybka konfiguracja Storybook dla React Native w Expo, CLI lub Re.Pack

Instalacja

Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.

Instalacja

Szybkie info

Kategoria
Mobile

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ć

  1. Zidentyfikuj typ swojego projektu: sprawdź czy używasz Expo z Expo Router (plik _layout.tsx w katalogu app/), Expo bez routera, React Native CLI, czy Re.Pack (obecność rspack.config lub webpack.config).

  2. Sprawdź menedżer pakietów projektu — poszukaj pliku yarn.lock, pnpm-lock.yaml lub bun.lockb i używaj odpowiedniej komendy (yarn, pnpm lub bun) zamiast npm we wszystkich instrukcjach.

  3. Uruchom inicjalizację Storybook poleceniem <pmu003e create storybook z odpowiednimi flagami dla Twojego typu projektu (tylko npm wymaga -- przed flagami, nie używaj npx ani bunx).

  4. Dla projektów Expo zainstaluj zależności komendą npx expo install (lub bunx expo install itp.), aby Expo mogło rozwiązać kompatybilne wersje pakietów.

  5. Skonfiguruj metro.config.js z withStorybook i utwórz pliki .rnstorybook zgodnie z instrukcjami dla Twojego typu projektu (Expo Router wymaga ustawienia tras, Re.Pack wymaga dodania StorybookPlugin do konfiguracji).

  6. 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