react nativeでのstorybookの使い方
storybookってなんぞや?
storybook(公式サイト)とはコンポーネント毎のスタイルガイドを作ることができるツールの一つです。
コンポーネントのカタログ集みたいなイメージです。
デザイナーと開発者の認識のズレをなくすためのツールとして使うことが多いようです。
今回は初期設定を紹介します。
開発環境
react native cli ... 2.0.1
react native ... 0.59.4
@storybook/react-native ... 4.1.18
react-native-storybook-leader ... 1.8.0
早速実装してみる
まずはnpm install
$ npm install --save-dev @storybook/react-native
通常通りコンポーネントを作成する。
/src/compoennts/atoms/button.js
import React from 'react' import PropTypes from 'prop-types' import { TouchableHighlight } from 'react-native' export default function Button({ onPress, children }) { return <TouchableHighlight onPress={onPress}>{children}</TouchableHighlight> } Button.defaultProps = { children: null, onPress: () => {} } Button.propTypes = { children: PropTypes.node, onPress: PropTypes.func }
作成したコンポーネントがあるディレクトリにindex.stories.js
があることを確認する。
index.stories.js
を用意し作成したコンポーネントをimportする。
/src/components/atoms/index.stories.js
import React from 'react' import { Text } from 'react-native' import { storiesOf } from '@storybook/react-native' import Button from './Button' storiesOf('Button', module) .add('with text', () => ( <Button onPress={() => {}}> <Text>Hello Button</Text> </Button> ))
今後は複数のディレクトリを参照していきたいのでreact-native-storybook-loaderを導入する。
$ npm install --save-dev react-native-storybook-loader
react-native-storybook-loader
は複数のディレクトリをstorybookにしたい時に便利なパッケージです。
設定をpackage.json
のconfigに書きます。
package.json
{ ... "scripts": { ... "prestorybook": "rnstl", "storybook": "storybook start" }, "config": { "react-native-storybook-loader": { "searchDir": [ // 検索対象のディレクトリ "./src" // 今回はsrcの中を検索する ], "pattern": "**/*.stories.js", // どういう形のファイルが対象なのか "outputFile": "./storybook/storyLoader.js" // アウトプット先のファイル } }, ... }
storybookを起動する。
$ npm run storybook
にアクセス
別ターミナル (storybookを終了しない)でreact nativeを起動する
$ react-native run-ios
↑simulator画面
↑ブラウザ(localhost:7007)画面
まとめ
これでstorybookが開発を妨げることが少なくなりました。 今後もどんどん開発しやすくしていきたいです!