やりたいこと
ReactNativeからstorybookを読み込んで利用したいのですが、うまくいきません。
環境
- "react": "16.3.1",
- "react-native": "0.55.4"
- "styled-components": "^3.2.6",
- "typescript": "^2.8.3",
- "@storybook/react-native": "^3.4.5",
ためしたこと
storybookのインストールと実行
$ npm i -g @storybook/cli
$ getstorybook
$ npm startu storybook
として、実行するとデフォルトで入っているstorybookが実行されて、デフォルトのボタン(絵文字のやつ)などはちゃんと表示されました。
ここまでは良いのですが、自作したコンポーネントをうまく読み込むことができません。
srcディレクトリの中身を以下のようにしているのですが、ディレクトリの中のstory(index.stories.tsx)が読み込まれません。
├── app.tsx └── components ├── atoms │ ├── Button │ │ ├── index.stories.tsx ←これとか │ │ └── index.tsx │ ├── Heading │ │ ├── index.stories.tsx ←これとか │ │ └── index.tsx
ReactNative以外のプロジェクトをgithubで探してみると.storybook
というディレクトリが作成されるようですが、
ReactNativeの場合srcと並列の場所にstorybook
というディレクトリが作られ、こっちが読み込まれているようです。
├── storybook │ ├── addons.js │ ├── index.android.js │ ├── index.ios.js │ ├── index.js │ ├── stories │ │ ├── Button │ │ │ ├── index.android.js │ │ │ └── index.ios.js │ │ ├── CenterView │ │ │ ├── index.js │ │ │ └── style.js │ │ ├── Welcome │ │ │ └── index.js │ │ └── index.js │ └── storybook.js
試したこと1
storybook/storybook.js
の
configure(() => { require('./stories'); }, module);
の部分のpathを変更して
module.exports = require.context('../components/', true, /.*.stories.tsx$/)
などとしてみましたが、
TypeError: require.context is not a function
というエラーが表示されました。
試したこと2
このページを参考にして、
react-native-storybook-loaderをインストールして実行してみると、
作成されたstorybook/storyLoader.js
の中身が
function loadStories() { require('../src/components/atoms/Button/index.stories'); require('../src/components/atoms/Heading/index.stories'); require('../src/components/atoms/ListItem/index.stories'); }
こんな感じで生成され、拡張子がうまく表示されず、storybookに何も表示されない状態になります。
ききたいこと
ReactNativeを用いて、ある特定のルールに則った(上述したディレクトリ構成のような)場所にあるstoriesを読み込むにはどうすればよいのでしょうか。
ReactNativeもstorybookもTypescriptも始めて間もない状態で、どれに原因があるのかよくわかっておりません。
今回はTypescriptはあまり考慮に入れずtypescript用のstorybookの設定などをまだしていませんが、もしかしたらそれが原因なのかもしれません。
どなたかご存知の方がいらっしゃればご教示願えませんでしょうか。
よろしくお願いします。
あなたの回答
tips
プレビュー