【React】OnsenUIのNavigatorでネイティブアプリのようなページ遷移を実現する

今回は、React Native ではなく、Cordova + React のアプリ開発についてです。
今まで、ページ遷移に react-router を使用していたのですが、ページの切り替えがアプリっぽくないということで、react-router ではなく Onsenu UI の <Navigation /> を使用して、ページ遷移を行うように変更することにしました。

公式のページはこちら。

Navigator React Component – Onsen UI Framework – Onsen UI
https://ja.onsen.io/v2/api/react/Navigator.html

…が、私は公式サイトのサンプルコードだけではどのようにコードを書けばいいのか分からなかったので、下記のサイトを主に参考にさせていただきました。

Onsen UI React拡張を使ったナビゲーションとタブの使い方 | モナカプレス
https://press.monaca.io/atsushi/267

Onsenu UI のインストールについては割愛させていただきますので、フレームワークのインストールがまだの方は、こちらをご参考にしてください。

まず、ルーティング処理を記述しているページを下記のように変更します。

import React, { Component } from 'react';
import { HashRouter as Router } from 'react-router-dom';
import { Navigator } from 'react-onsenui';

import TopPage from './containers/TopPage';
let props;

class AppNavigator extends Component {
  renderPage(route, navigator) {
    props = route.props || {};
    props.navigator = navigator;
 
    return React.createElement(route.component, props);
  }
  render() {
    return (
      <Router>
        <Navigator
          initialRoute={{component: TopPage}}
          renderPage={this.renderPage.bind(this)}
          swipeable
          onDeviceBackButton={() => props.navigator.popPage()} />
      </Router>
    );
  }
}
export default AppNavigator;

TopPage コンポーネントは、アプリ起動時の初期ページです。
initialRoute に指定することで、アプリ起動時に開くページを指定できます。
ページ遷移の際は、this.props.navigator.pushPage({ component: [遷移先のコンポーネント] }); とすることで、次のページに移動できます。
前のページに戻る際は this.props.navigator.popPage(); です。
他にも、resetPage() や resetPageStack() というメソッドもありますが、こちらはまだ使っていないので、いまいちよく分かっていません…。

また、onDeviceBackButton で Android の端末の戻るボタンが押されたときの挙動を指定しています。
…と言っても、現在開いているページから前のページに戻るだけなんですけどね。
更に swipeable を追加しているので、iOS ではスワイプして戻るという動作が有効になっています。

なお、私の環境でだけなのかもしれませんが… <Navigator /> を react-router-dom の <HashRouter /> で囲わないとページ遷移ができなかったのでそれを追加しています。
理由は分からないのですが…とりあえず動いたから良し！
時間があったら調査したいと思います！

以上、Onsenu UI の <Navigation /> を使って、ネイティブアプリのようなページ遷移を実現する方法についてでした。
ご参考になれば幸いです。