【React Native】ルーティングとナビゲーションを実装できるライブラリ「React Navigation」

ようやく React Native の書き方に慣れてきました…。
今回は、ルーティングやナビゲーションを実装するためのライブラリ「React Navigation」についてです。

公式サイトはこちらから。

React Navigation | React Navigation
https://reactnavigation.org/

ライブラリのインストールは下記のコマンドで行います。

npm install @react-navigation/native

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

上記のコマンドの実行が完了したら、公式サイトのドキュメントを参考にしながらサンプルコードを動かしてみます。

下記は基本的なルーティングの処理です。

import React, { Component } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import 'react-native-gesture-handler';

import TopPage from './TopPage';
import LoginPage from './LoginPage';
import ProfilePage from './ProfilePage';
const Stack = createStackNavigator();

class App extends Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="top">
          <Stack.Screen name="top" component={TopPage} options={{ title: 'トップ' }} />
          <Stack.Screen name="login" component={LoginPage} options={{ title: 'ログイン' }} />
          <Stack.Screen name="profile" component={ProfilePage} options={{ title: 'プロフィール' }} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}
export default App;

なお、ページ遷移は navigation.push('[遷移先]') で行います。

上記を実行すると、ナビゲーションバーありのページが表示されます。
また、ページ遷移をしたら、戻るボタンがナビゲーションバーに自動的に追加されます。
戻るボタンが自動で追加されるのは嬉しいですね…！
更に、Android で実行した場合、端末の戻るボタンにも対応しており、遷移した先のページで戻るボタンを押すと、直前のページまで戻ります。

基本的な使い方は上記のとおりです。
また、ルーティング以外にも、フッタータブや、サイドバーメニューも実装できます。
…が、ルーティングとフッタータブとサイドバーメニューを全部使うように記述するのに若干苦戦しています。
特にサイドバーメニューが思うように設定できないので、これだけ別のライブラリを使用しようか検討中です。
使うなら、「react-native-side-menu」でしょうか…。
また試してみたいと思います。

以上、React Native でルーティングとナビゲーションを実装できるライブラリ「React Navigation」のご紹介でした。
ご参考になれば幸いです。