現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

  1. フロントエンド
  2. 2685 view

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

最終更新日:2018/09/12

はじめに

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

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

完成品はこんな感じ

準備

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

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>ホーム画面（タブその１）</Label>

          </Item>
          <Image
              source={{
                uri: "https://tech.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>タブ２</Title>
          </Body>
          <Right/>
        </Header>
        <Content padder>
          <Item floatingLabel style={{ marginTop: 20 }}>
            <Label>タブ２（タブその２）</Label>

          </Item>
          <Image
              source={{
                uri: "https://tech.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>タブその１</Text>
            </Button>
            <Button vertical onPress={() => props.navigation.navigate("TabTwo")}>
              <Icon name="camera" />
              <Text>タブその２</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.
WINDII

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！ また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

フロントエンドの最近記事

  1. Nuxt.js + Contentful。HeadlessCMSでポータルサイトを作る

  2. IOSアプリをAppStoreに公開する手順書（Ionic）

  3. IonicAcademyでIonic＆Angularでのアプリ開発を学ぶ

  4. Ionic4＋firebaseで認証をする方法【ログイン、ログアウト機能の実装】

  5. ハイブリッドアプリ開発チュートリアル【Ionic4＋OnsenUI】

関連記事

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

  2. React Navigation入門〜Stack Navig…

  3. ReactNative+Node.js+Pusherでリアル…

  4. React NativeでError: Missing ap…

  5. react-native linkでCannot read …

  6. React Navigation入門〜Drawer Navi…

コメント

  1. アバター
    • 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