【React Native】サイドバーメニューを実装できるライブラリ「 react-native-side-menu」

昨日の記事で少しだけ話題に出したサイドバーメニューを実装したので、その手順をまとめ。
使用したライブラリは「react-native-side-menu」です。

GitHub のページはこちらから。

GitHub – alessiocancian/react-native-side-menu: Side menu component for React Native
https://github.com/alessiocancian/react-native-side-menu

実装方法ですが、まず下記のコマンドでライブラリをインストールします。

npm install react-native-side-menu-updated --save

上記の実行が完了したら、プロジェクトを修正していきます。
まず、サイドバーメニューに表示したい内容を記述したファイルを用意します。
私は Menu.js というファイル名で、下記のように記述しました。

import React, { Component } from 'react';
import { withRouter } from "react-router";
import { View, StatusBar } from 'react-native';
import { ListItem } from 'react-native-elements'

class Menu extends React.Component {
  render() {
    return (
      <View style={{paddingTop: StatusBar.currentHeight}}>
        <ListItem>
          <ListItem.Content>
            <ListItem.Title>プロフィール</ListItem.Title>
          </ListItem.Content>
          <ListItem.Chevron />
        </ListItem>
        <ListItem>
          <ListItem.Content>
            <ListItem.Title>アプリ設定</ListItem.Title>
          </ListItem.Content>
          <ListItem.Chevron />
        </ListItem>
        <ListItem bottomDivider>
          <ListItem.Content>
            <ListItem.Title>利用規約</ListItem.Title>
          </ListItem.Content>
          <ListItem.Chevron />
        </ListItem>
        <ListItem>
          <ListItem.Content>
            <ListItem.Title>ログアウト</ListItem.Title>
          </ListItem.Content>
        </ListItem>
      </View>
    );
  }
}
export default withRouter(Menu);

上記のようなファイルを追加したら、次にサイドバーメニューを表示したいページのコードを修正していきます。

import React, { Component } from 'react';
import { View } from 'react-native';
import SideMenu from 'react-native-side-menu-updated';
import Menu from './Menu';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isMenuOpen: false,
    }
    this.updateMenuState = this.updateMenuState.bind(this);
  }
  updateMenuState(isOpen) {
    this.setState({ isMenuOpen: isOpen });
  }
  render() {
    const menu = <Menu />;
    return (
      <SideMenu
        menu={menu}
        isOpen={this.state.isMenuOpen}
        onChange={isOpen => this.updateMenuState(isOpen)}>
        <View>
          ...
        </View>
      </SideMenu>
    );
  }
}
export default App;

まず、3行目でライブラリをインストールします。
で、このインストールした SideMenu でサイドバーメニューを表示したいページをまるっと囲んでしまいます。
コードでいうと、20行目からの記述です。
なお、上記のコードでは省略しましたが <View></View> で囲んである箇所が、サイドバーメニューを表示したいページのコンポーネントです。

サイドバーメニューが表示されているか否かについては、state の isOpenMenu で管理しており、アプリ画面を左端から右へとスワイプし、サイドバーメニューが表示されたタイミングで、この値を書き換えています。
なお、<SideMenu menu={menu}></SideMenu> とするだけでも実は動きます。
ですが私の場合、ヘッダーに設置したハンバーガーメニューアイコンをタップしてサイドバーメニューを表示するという機能を実装したかったため、上記のように記述しました。

追加する記述は以上です。
実際に実行したところ、無事意図した通りのサイドバーメニューを表示することができました！
他にも、表示するサイドバーメニューの幅を設定できたり、右端からサイドバーメニューを表示するようにするなど、かなり色々な設定ができそうでした。
詳しくは、GitHub のページをご参照ください。

以上、React Native でサイドバーメニューを表示するためのライブラリ「react-native-side-menu」のご紹介でした。
ご参考になれば幸いです。