ReactNativeにStorybookを導入する

前回のTypeScript導入に引き続き今回はStorybookを導入して使ってみるところまでをやっていきます。

 

少し話がそれますが、ReactNativeのベースになるリポジトリを作成しています。
【参考】mrsekut/react-native-base-templates – GitHub

 

導入などに関しての目次となるようなインデックスページを用意しました。
【参考】ReactNative index

 

Storybookってなに?

 

Storybookというのは、ReactやVueといったコンポーネント志向のフロントエンド開発をするときに重宝するコンポーネントごとのカタログのようなものを作成できるツールです。

 

エンジニアとデザイナーの意思疎通をしやすくなったり、いろいろ便利らしいです。

 

【参考】Storybook – GitHub

 

Storybookを導入する

 

【参考】ReactNativeにStorybookを導入するまで – 個性は次々死んでいく

 

インストールとする

 

まずは、グローバルにインストールします。
$ npm i -g @storybook/cli

 

次に、プロジェクトに移動して以下を実行して、Storybookを体験してみます。
$ getstorybook

 

実行する

 

シミュレータなどをすべて停止している状態で
$ yarn run storybook
を実行し、http://localhost:7007/にアクセスします。

 

その後、シミュレータを起動すると以下のようになるかと思います。

 

ブラウザ側で選択し、コンソールの確認ができ、シミュレータ側で動作の確認をします。
ボタンもポチポチ押せます。

 

任意の場所のストーリーファイルを読み込む

 

今回はAtomicDesingというデザイン設計を採用しているのですが、
これを使うと、以下のようなディレクトリ構成になります。

 

ストーリーのファイルは、index.stories.tsxという名前のもの全てなのですが、
見ておわかりの通り、いろいろな場所に分散して置かれています。
これを全部良い感じに読み込んでもらう必要があります。

 

react-native-storybook-loaderを導入する

 

そこで、react-native-storybook-loaderをいれます。
$ yarn add react-native-storybook-loader -D

 

package.jsonを編集する

 

その後、package.jsonに追記をします。

ポイントは、searchDirsrcではなくコンパイル後のlibディレクトリを指定する点です。
srcを指定するとうまくいきませんでした。

 

script欄にも1行追記します。

 

storybook.jsを編集する

 

ReactやVueのプロジェクトでは.storybookフォルダが作成されるのですが、
ReactNativeのプロジェクトでは変わりにstorybookフォルダが作成されます。
この中の、storybook/storybook.jsを編集します。

 

コンポーネントを作る

 

こんな感じのButtonコンポーネントを作成します。
src/components/atoms/Button/index.tsx

 

これに対するストーリーファイルを作成します。
src/components/atoms/Heading/index/stories.tsx

 

実行する

 

以上の設定を終えたらシミュレータとstorybookを両方一度停止し、
storybook→シミュレータの順で立ち上げると見事できています!!!

いやぁ、長かった・・。

 

scriptの追記した1行のおかげで、storybookディレクトリ内にstoryLoader.jsというファイルができているかと思います。
これが良い感じに読み込んでくれます。

 

ここでは、こんなふうに拡張子が表示されていませんが、うまく読み込めていました。
ここがミスってるんじゃないかと思ったりしていろいろ時間を食いました。

コメントを残す