2018年3月14日

プログラミング

Modalを使ってみる【これからはじめるReact Native】

目次

  1. はじめに
  2. Modalを使ってみる
  3. まとめ

はじめに

前回はPickerを使った選択肢の出し方について解説しました。
選択肢を出し、そこから選択された後の値の表示の仕方をご紹介しました。
今回はModalの使い方について解説していきます。

Modalはポップアップという呼び方をされることもあり、ウィンドウが開いてその中で登録などの操作を行うことができるものです。
説明よりご覧いただくほうが早いと思うので、Webページですがこちらのイメージをご覧ください。
bootstrap modal
Bootstrap 公式サイトより

今回はReact NativeでこのModal操作をしていきます。

Modalを使ってみる

例によってサンプルをExpoで作っていきます。

こんなイメージです。

コードの解説

では、ポイントを見ていきましょう。

import { View, StyleSheet, Button, Modal  } from 'react-native';

今回はModalコンポーネント、そしてModalを立ち上げ、閉じる為のButtonコンポーネントも使用していきます。

  state = {
    modalVisible: false,
  };

いつものように、state に初期値を設定していきます。
modalVisible にまず false を設定します。
後ほど解説しますが、modalVisible はModalの表示状態を表しています。まずVisiblefalseにすることで非表示状態にしています。

  openModal() {
    this.setState({modalVisible:true});
  }

次にopenModal メソッドです。
このメソッドが呼ばれると、modalVisibletrueを設定します。
名前から想像がつくと思いますが、このメソッドはモーダルを表示状態にするものです。

  closeModal() {
    this.setState({modalVisible:false});
  }

そしてcloseModal メソッドです。
このメソッドが呼ばれると、modalVisibleに今度はfalseを設定します。
このメソッドはモーダルを非表示状態にするものです。

<Button
  onPress={() => this.openModal()}
  title="Open modal"
/>

こちらはモーダル表示用のボタンです。
onPress、つまり押されたタイミングで先程のopenModalメソッドが呼ばれます。
すると先程説明したように、modalVisibletrueが設定されます。

<Modal
  visible={this.state.modalVisible}
  animationType={'slide'}
>

そしてModalコンポーネントです。
visible={this.state.modalVisible}
visible はモーダルの表示非表示を制御するPropsです。
this.state.modalVisibleは初期値ではfalseopenModalメソッドが呼ばれるボタンが押されたらtrueになりましたね。
このstateの変更によってモーダルの表示、非表示を制御しているのです。

animationType={'slide'} は名前の通りアニメーションのタイプを設定します。
slideは下から上にスライドされるアニメーションです。
他にもfadenoneがあります。
fadeは少しずつ浮き上がってくるフェードインのアニメーション、noneはアニメーションをしないものです。

<Button
  onPress={() => this.closeModal()}
  title="Close modal"
>

こちらはモーダル内にある、モーダルを閉じる為のボタンです。
onPressされたらthis.closeModal()メソッドを実行します。

流れの振返り

今まで解説してきた処理の流れを振返りましょう。

  1. statemodalVisiblefalseにする
  2. Modalをレンダリングする。visiblemodalVisible、つまりfalseとなりモーダルは非表示となる
  3. “Open Modal”と表示されたボタンをタップする。するとopenModal が実行されstatemodalVisibletrueとなる。
  4. Modalが再レンダリングされる。visiblemodalVisible、つまりtrueになっているのでモーダルは表示される。
  5. “Close modal”と表示されたボタンをタップする。するとcloseModal が実行されstatemodalVisiblefalseとなる。
  6. 4. Modalが再レンダリングされる。visiblemodalVisible、つまりfalseになっているのでモーダルは非表示となる。

まとめ

今回はModalコンポーネントの使い方をご紹介しました。
使い所としては、Modal内にWebViewを入れ込み外部リンクを表示させる、また登録に当たって詳細情報を入力してもらう、など幅広い使い方が可能です。
Modalコンポーネントを上手く利用し、アプリの演出の幅を広げてみてください。

2

0

AUTHOR

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP