ReactNativeにStorybookを導入するまで

storybookはコンポーネント単位でサンドボックス開発できる開発環境

どんなコンポーネントが存在するか、どんな種類があるか、使い方は?など

ドキュメントとしても機能するのであると便利

最近Webの方でよく使われてるようで、ReactNativeでも使える

導入

まずはstorybookをグローバルにインストールする

$ npm i -g @storybook/cli

RNのプロジェクトに移動してgetstorybookを実行

$ getstorybook

あとは勝手に設定されて

storybookというフォルダが作成される

最初からいくつかサンプルコードが入っているので実行して確認してみる

実行

ReactNativeの場合、コンポーネントの動作はシュミレーター上で確認するので

既にアプリが起動してる場合は、いつも動かしてる8081のサーバーは落としておく必要がある

まずはstorybookのサーバーを起動

$ yarn run storybook

localhost:7007にアクセスすると専用のページが表示される

この時点では、リストに何も表示されてなくてサンプルを確認出来ない

RNのアプリを立ち上げると、さっき起動したstorybookのサーバーに繋がって

アプリ側にも専用の画面が表示される

するとWebの画面にも用意したコンポーネントのリストが表示されるようになり

見たい項目をクリックすると、連動してシュミレーター上でも画面が切り替わる

これでやっと確認出来るようになった

※ 左の画面がiOSシュミレーター

f:id:rskull:20171126020353g:plain

最初からあるサンプルを参考に自分のアプリのコンポーネントも追加していけば

これでチーム開発も捗るのではないだろうか

今回動かしたのサンプル:GitHub - rskull/rn_storybook

でもシュミレーター上で確認しないといけないのはちょっと面倒くさいかも…

以上です