タブナビゲータの使用方法

React Native を利用すると JavaScript を用いて、マルチプラットフォーム向けのモバイルアプリケーションを開発することが可能になります。

ここでは React Native に組み込んで使える React Navigation パッケージを用いて、そのビルトインナビゲーションのひとつである、タブを使ったナビゲーション をもつ UI を作成します。

具体的には次のような画面です。Tab 1 と Tab 2 があり、それぞれ異なる文字を表示します。

Tab 1 は次の内容です。

Tab 2 は次の内容です。

さっそく、プロジェクトを作成して、React Navigation を使えるようにしましょう。

$ react-native init nav2
$ cd nav2
$ npm install react-navigation --save

Android のエミュレータの起動は次のコマンドでしたね。

$ cd $ANDROID_HOME/tools
$ emulator -list-avds
..
foo
...
$ emulator @foo

さらに前回のスタックナビゲータのときと同様に、iOS と Android のコードを区別しないように、 index.android.js と index.ios.js は次のように App.js を取り込むようにします。

import './App';

React Native 0.49.x 以降では index.android.js や index.ios.js が作られずに、ここで記載のとおり App.js のみが作成されるようになりました。

さて、上記を準備した上で App.js は次のコードになります。

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import { TabNavigator } from 'react-navigation';

class Screen1 extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Tab 1',
  };

  render(){
    return (
      <View style={styles.view1}>
        <Text style={styles.text1}>ABC</Text>
      </View>
    )
  }
}

class Screen2 extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Tab 2',
  }

  render(){
    return (
      <View style={styles.view1}>
        <Text style={styles.text1}>XYZ</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  view1: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  text1:{
    fontSize: 36,
  }
})

const MyApp = TabNavigator(
  {
    Tab1: {
      screen: Screen1,
    },
    Tab2: {
      screen: Screen2,
    },
  },
  {
    tabBarPosition: 'top',
    animationEnabled: true,
    showIcon: 'true',
    tabBarOptions: {
      activeTintColor: '#ffffff',
      style: {
        backgroundColor: '#009688',
      }
    }
  },
);

AppRegistry.registerComponent('nav2', () => MyApp);

ここでは簡単な文字を表示するだけの Screen1 と Screen2 という二つの画面を作成して、それらを TabNavigator オブジェクトにて screen に指定しています。

これによって、タブが自動的に表示され、タブをタップすると指定した画面表示に切り替わります。

スタイルに関してはタブの背景色、フォントサイズなど、オプションが多数用意されていますが、あまりいじらずにも上の画面くらいのことはデフォルトでできます。