【React Native】react-native-modalboxでネイティブアプリ上のモーダルを利用する
react-native-modalbox
react-native-modalbox
はアニメーション付きモーダル表示を手軽に実装できるUIコンポーネントです。
モーダルは使えるシーンが多いので、表示の仕方でユーザー体験を向上させたいときに使うと良いかもしれません。
(細かいカスタマイズが必要なときは、結局自作になりそうですが。。。)
Usage
create-react-native-app
でプロジェクトを作成し、作成したプロジェクト配下にreact-native-modalbox
をインストールしていきます。
$ create-react-native-app react-native-modalbox-app $ cd react-native-modalbox-app $ npm install react-native-modalbox@latest --save
create-react-native-app
のインストールはこちら。
Source
公式に一通りのモーダルが使用できるデモがあったので、早速いじっていきます
デモではボタンとスライダーコンポーネントを使用しているため、
react-native-button
とreact-native-slider
もインストールします。
$ npm install --save react-native-button $ npm install --save react-native-slider
Demo
Basic Modal
Position top
Position bottom + backdrop + disable
Position bottom + backdrop + slider
Backdrop + backdropContent
Position bottom + ScrollView
Modal with keyboard support