質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

0回答

379閲覧

ReactNativeを用いてStorybookをうまく読み込めない

退会済みユーザー

退会済みユーザー

総合スコア0

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2018/06/01 07:28

やりたいこと

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の設定などをまだしていませんが、もしかしたらそれが原因なのかもしれません。

どなたかご存知の方がいらっしゃればご教示願えませんでしょうか。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問