【React Native】タブナビゲーションを実装するライブラリ「react-native-tab-view」

先日の記事で、React Navigation でページのルーティングと、タブナビゲーションを実装できると紹介しました。
が、タブナビゲーションの実装に若干手こずり、別のライブラリを使用することに。
個人的に、「react-native-tab-view」というライブラリが分かりやすかったので、その実装方法についてまとめ。

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

GitHub – satya164/react-native-tab-view: A cross-platform Tab View component for React Native
https://github.com/satya164/react-native-tab-view

まず、ライブラリのインストールは下記のコマンドで行います。
また、react-native-gesture-handler と react-native-reanimated も必要なので、こちらも併せてインストールします。

npm install react-native-tab-view --save

expo install react-native-gesture-handler react-native-reanimated

上記のコマンドの実行が完了したら、実際にコードを書いていきます。
サンプルコードは下記の通りです。

import React, { Component } from 'react';
import { TabView, SceneMap, TabBar } from 'react-native-tab-view';

import TabPage1 from './TabPage1';
import TabPage2 from './TabPage2';
import TabPage3 from './TabPage3';

const routes = [
  { key: 'tab1', title: 'タブ1' },
  { key: 'tab2', title: 'タブ2' },
  { key: 'tab3', title: 'タブ3' }
];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
    }
    this.changeTab = this.changeTab.bind(this);
  }
  changeTab(index) {
    this.setState({ index: index });
  }
  render() {
    const renderScene = SceneMap({
      tab1: TabPage1,
      tab2: TabPage2,
      tab3: TabPage3,
    });
    const index = this.state.index;
    return (
      <TabView
        navigationState={{ index, routes }}
        renderScene={renderScene}
        onIndexChange={this.changeTab}
        tabBarPosition='bottom' />
    );
  }
}
export default App;

なお、上記のサンプルではナビゲーションタブは下に表示されるようにしています。

また、このサンプルではタブに表示されるのはタイトルの文字のみです。
タブにアイコンを表示する方法については、こちらのサイトが参考になりました。

タブ（TabNavigator）をコンポーネント化してスクリーン内に組み込む – Qiita
https://qiita.com/mildsummer/items/0da92ed6785db0d03e8f

個人的に、タブが切り替わった時に行いたい処理があったため、こちらのライブラリの方が使いやすいように感じました。
また、スワイプでタブ切り替えをする/しないの設定ができたり、選択中のタブの下に下線が入っているのも良かったですね。
React Navigation も良かったのですが、私はこちらの方が好きでした。

以上、React Native でタブナビゲーションを実装できるライブラリ「react-native-tab-view」のご紹介でした。
ご参考になれば幸いです。