アプリの画面上に、別のウィンドウを表示させるモーダル機能をReact Nativeで実装する方法を紹介する。

コンポーネントをインポートする

React Nativeではモーダルを簡単に実装するためのModalというコンポーネントがあるので、まずはこれをインポートする。

import { Modal } from 'react-native';

Modalコンポーネントの基本的な使い方

モーダル表示のON・OFFの切り替えは、bool値によって切り替える。
このbool値は通常、state変数を使って管理する。

また、モーダルに表示する要素は、以下のようにModalコンポーネントの子要素として配置する。

<Modal visible={this.state.isVisible}>
  <View>
    <Text>{"Hello Modal"}</Text>
  </View>
</Modal>

デモアプリ

シンプルにモーダルを表示するボタンのみを配置したデモアプリを用意した。

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

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      isVisible: false
    }
  }

  showModal() {
    this.setState({isVisible: true});
  }

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

  render() {
    return (
      <View style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
      }}>
        <Modal
          visible={this.state.isVisible}
          transparent={false}
          animationType={"slide" || "fade"}
          presentationStyle={"fullScreen" || "pageSheet" || "formSheet" || "overFullScreen"}
        >
          <View style={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#E5ECEE'
          }}>
            <Button onPress={() => this.closeModal()} title="close modal" />
          </View>
        </Modal>
        <Button onPress={() => this.showModal()} title="show modal" />
      </View>
    );
  }
}

expo startでアプリを実行すると「show modal」のボタンが表示される。

ボタンをタップするとモーダルが立ち上がり、子要素として配置した「close modal」ボタンが表示されるはずだ。

モーダル上のボタンをタップすると元の画面に戻る。