プログラミング学習やフリーランスエンジニア情報を発信していきます。現役フリーランスエンジニア2人で運営してます!

  1. フロントエンド

React Navigation入門〜TabNavigation(タブナビゲーション)編

最終更新日:2018/09/12

はじめに

本記事では、React NavigationがサポートしているTab Navigation(タブナビゲーション)と呼ばれる画面遷移の実装方法をご紹介します。

実際のプロダクトでも使われることの多いNativeBaseと連携します。

完成品はこんな感じ

準備

本記事は、Expoを用いたReactNative開発を前提にしております。まだ設定ができてない方は下記の記事で設定してください!(5分くらいでできます!)

React Native入門〜Expoを使ってお手軽開発

プロジェクトの作成

create-react-native-appを用いてプロジェクトを新規作成します。

create-react-native-appの設定がお済みでない方はこちら

create-react-native-app tab-sample

ライブラリのインストール

React Navigation

npm install --save react-navigation

NativeBase

npm install native-base --save

依存リンク

react-native link


*上のように表示されてうまくいかない場合はこちらが参考になるかもしれません。

npm start

この状態で立ち上げてみると下の画像のように初期状態が表示されます。

タブナビゲーションの実装

プロジェクト配下にsrcというディレクトリを作って以下のようにします。

タブ画面の実装

src/TabScreen/TabOne.jsを以下のように実装しましょう。

import React from "react";
import { AppRegistry, View, StatusBar, Image } from "react-native";
import {
  Container,
  Body,
  Content,
  Header,
  Left,
  Right,
  Icon,
  Title,
  Input,
  Item,
  Label,
  Button,
  Text
} from "native-base";

export default class TabOne extends React.Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Container>
        <Header>
          <Left/>
          <Body>
            <Title>ホーム</Title>
          </Body>
          <Right/>
        </Header>
        <Content padder>
          <Item floatingLabel style={{ marginTop: 20 }}>
            <Label>ホーム画面(タブその1)</Label>

          </Item>
          <Image
              source={{
                uri: "https://windii.jp/wp-content/uploads/2018/07/react-native.png"
              }}
              style={{
                height: 240,
                alignSelf: "stretch",
                justifyContent: "center",
                alignItems: "center"
              }}
            />
        </Content>
      </Container>
    );
  }
}

src/TabScreen/TabTwo.jsを以下のように実装しましょう。

import React from "react";
import { AppRegistry, View, StatusBar, Image } from "react-native";
import {
  Container,
  Body,
  Content,
  Header,
  Left,
  Right,
  Icon,
  Title,
  Item,
  Label,
  Button,
  Text
} from "native-base";

export default class TabTwo extends React.Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Container>
        <Header>
          <Left/>
          <Body>
            <Title>タブ2</Title>
          </Body>
          <Right/>
        </Header>
        <Content padder>
          <Item floatingLabel style={{ marginTop: 20 }}>
            <Label>タブ2(タブその2)</Label>

          </Item>
          <Image
              source={{
                uri: "https://windii.jp/wp-content/uploads/2018/09/react-native-black.jpg"
              }}
              style={{
                height: 240,
                alignSelf: "stretch",
                justifyContent: "center",
                alignItems: "center"
              }}
            />
        </Content>
      </Container>
    );
  }
}


ルートの設定

src/TabScreen/index.jsにてルートの設定を行います。

import React, { Component } from "react";
import TabOne from "./TabOne";
import TabTwo from "./TabTwo";
import { createBottomTabNavigator } from "react-navigation";
import { Button, Text, Icon, Footer, FooterTab } from "native-base";

export default (MainScreenNavigator = createBottomTabNavigator(
  {
    TabOne: { screen: TabOne },
    TabTwo : { screen: TabTwo },
  },
  {
    tabBarPosition: "bottom",
    tabBarComponent : props => {
      return (
        <Footer>
          <FooterTab>
            <Button vertical onPress={() => props.navigation.navigate("TabOne")}>
              <Icon name="home" />
              <Text>タブその1</Text>
            </Button>
            <Button vertical onPress={() => props.navigation.navigate("TabTwo")}>
              <Icon name="camera" />
              <Text>タブその2</Text>
            </Button>
          </FooterTab>
        </Footer>
      )
    }
  },
));

App.js

最後にApp.jsを以下のように書き換えます。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import TabScreen from "./src/TabScreen/index.js";
export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      isReady: false
    };
  }

  async componentWillMount() {
    await Expo.Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
      Ionicons: require("native-base/Fonts/Ionicons.ttf")
    });
    this.setState({isReady: true});
  }
  render() {
      if (!this.state.isReady) {
      return <Expo.AppLoading />;
      }
      return <TabScreen />;
  }
}

下の画像のようにできましたでしょうか?

それでは以上で完了です!ありがとうございました!

React Navigation入門シリーズ(こちらも合わせてどうぞ!!)

React Navigation入門〜Drawer Navigation(ドロワーナビゲーション)編
React Navigation入門〜TabNavigation(タブナビゲーション)編
React Navigation入門〜TabNavigation(タブナビゲーション)編

The following two tabs change content below.

riri

25歳。 Twitter:りりー@ryudoi1 // windii socialというslackチャンネルで質問や雑談等受け付けてるので気軽に参加してください!(もちろん無料です) フリーランスになるまでの過程は こちら

関連記事

コメント

    • Paritosh
    • 2018年 10月 26日

    Great article riri!

    I got a question. How can we handle active state? or How can we show which tab is selected?

  1. この記事へのトラックバックはありません。

PAGE TOP