本記事では、モーダル機能をReactNativeで実装する方法について紹介します。
ReactNativeでは、モーダル機能を実装することができるコンポーネントは2つあります。
1. ReactNativeライブラリ
2. react-native-modalライブラリ
の2種類です。
今回紹介するのは、
react-native-modalライブラリを使ったモーダルについて紹介します。
本記事を読むことで、以下のようなアプリを実装することができます。
1. react-native-modalライブラリとは？
react-native-modalライブラリは、
ReactNativeライブラリのModalコンポーネントを元に作られているModalコンポーネントです。
その為、元のModalコンポーネントの機能に加えて、
「アニメーションや色などのカスタマイズが可能であったり、スワイプでモーダルを閉じる機能などが追加されたライブラリ」
となっています。
2. ライブラリのインストール
以下のコマンドを実行して”react-native-modal”ライブラリをインストールします。
|
1 |
npm install --save react-native-modal |
3. コンポーネントをインポート
“react-native-modal”ライブラリのModalコンポーネントをインポートします。
|
1 |
import Modal from 'react-native-modal'; |
4. Moadalコンポーネントの使い方
基本的な使い方は、Modalコンポーネントの
isVisible
プロパティの値を切り替えることで、モーダルを表示/非表示にすることができます。
isVisible
プロパティの値はbool値で設定し、
「trueの時はモーダルを表示」、
「falseの時はモーダルを非表示」
になります。
この値は、stateで値を管理すると切り替えやすいです。
＜Modal＞＜/Modal＞で囲われた箇所がモーダル(別ウィンドウ)として、画面上に表示されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
・・・ import { Modal } from 'react-native-modal'; ・・・ export default class App extends React.Component { constructor(props) { super(props); this.state = { modalTrigger: false, }; } render() { return ( <View> <Modal isVisible={this.state.modalTrigger} > {/* ここの処理がモーダルとして表示させる */} </Modal> </View> ); } } |
4.1 サンプルコード
動画のサンプルコードです
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
import React from 'react'; import { StyleSheet, Text, View, TouchableOpacity, } from 'react-native'; import Modal from 'react-native-modal'; export default class App extends React.Component { constructor(props) { super(props); this.state = { modalTrigger: false, }; } render() { return ( <View style={styles.container}> {/* ボタン */} <TouchableOpacity onPress={() => this.setState({ modalTrigger: true })}> <Text style={{ fontSize: 32 }}>Modalを表示</Text> </TouchableOpacity> {/* モーダル */} <Modal isVisible={this.state.modalTrigger} swipeDirection={['up', 'down', 'left', 'right']} onSwipeComplete={() => this.setState({ modalTrigger: false })} backdropOpacity={0.8} animationInTiming={700} animationOutTiming={200} > <View style={styles.modalView}> {/* バー */} <View style={styles.bar}></View> {/* 閉じるボタン */} <TouchableOpacity style={styles.modalButton} onPress={() => this.setState({ modalTrigger: false })} > <Text style={styles.font}>閉じる</Text> </TouchableOpacity> </View> </Modal> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, modalView: { backgroundColor: "hsl(0, 0%, 97%)", width: "80%", height: 200, alignSelf: "center", justifyContent: "center", borderRadius: 20, }, modalButton: { alignItems: "center", }, font: { fontSize: 24, }, bar: { height: 7, borderRadius: 20, alignSelf: "center", backgroundColor: "lightgray", width: 50, marginTop: 5, position: "absolute", top: 10 } }); |
4.2 Modalコンポーネントのプロパティ
Moadalコンポーネントに設定することができるプロパティについて一部紹介します。
| 名前 | デフォルト値 | 説明 |
| isVisible | – | モーダルの表示の有無。このプロパティをON,OFFすることで モーダルの表示の切り替えができる |
| backdropOpacity | 0.7 | モーダルが表示されているときの背景の不透明度。 0(透明)〜1(黒)の値を設定。 |
| swipeDirection | null | モーダルをスワイプできる方向を定義する。 「up」、「down」、「left」、「right」、複数定義したい時は、 配列で定義する[‘up’,’down’] |
| onSwipeComplete | null | swipeThresholdで設定した閾値を超えた時に発生する処理。 本プログラムでは、モーダルを閉じる処理を設定。 |
| swipeThreshold | 100 | スワイプ有効判定の閾値。onSwipeCompleteと組み合わせて使う |
| animationIn | slideInUp | モーダルが表示される時のアニメーション |
| animationOut | slideOutDown | モーダルが非表示になる時のアニメーション |
| animationInTiming | 300 | 非表示→表示時のアニメーションの速度（ms） |
| animationOutTiming | 300 | 表示→非表示時のアニメーションの速度(ms) |
もっと詳しく知りたいと言う方は、以下のGitHubのサイトを参考にしてください。
react-native-modalライブラリ
5. まとめ
今回は、react-native-modalライブラリのModalコンポーネントについて紹介しました。
本ライブラリは、「スワイプでモーダルを閉じることができたり」、「アニメーションのカスタマイズできる」ので、モーダルを実装するならオススメのライブラリです。
