「ロナえる」の夫です。
今回はReactNativeのStorybookでModalを扱う上でのTipsを共有します
前提
- エミュレータでしかStorybookを表示できない
- previewで表示したい
単純にStorybookでModalを表示しようとすると
まずは、Modalを表示するために、Modal.stories.jsを次のように作成してみます。
通常だと、「NAVIGATOR」で、Storyを選択すると、「PREVIE」に対象のUIが表示されます。
しかし、Modalの場合、選択と同時に、全面にModalが表示されます。
しかも、Modalが全面に表示されているため、他の操作を受け付けなくなります。
1. Modalを表示する「test」を選択すると
2. Modalが全面に表示されます
Modalを確認できるようにするにはどうしたら良いか
今回のTipsは、完璧な方法ではなく、「PREVIEW」で表示する方法になります。
具体的には、
- PREVIEWでボタンを設置
- ボタンを押すとModalを表示
- Modalは一定期間で非表示
のように対応します。
では、Modal.stories.tsxを書き換えてみましょう。
Modalの表示非表示を切り替えるには、useStateで状態を切り替えてあげる必要があります。
そのため、レンダリングするコンポーネントだけでなく、いくつか制御するコードも記述できる書き方が必要です。
上の要件を満たすためには、
を利用します。
これにより、useStateを利用することができます。
実際に、Buttonを制御してあげるとこんな感じになります。
1. PREVIEWではボタンが表示
2. ボタンをクリックすると、Modalが表示
3. ２秒後にModalが非表示
最後に
今回は、時間制御でModalを非表示にしました。
Modal自身にボタン等が付いていれば、それで非表示でもOKだと思います。