技術記事やフリーランス記事をメインに情報公開をしています。是非見ていってください。

  1. フロントエンド

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

最終更新日:2018/09/12

はじめに

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

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

完成品はこんな感じ

準備

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

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

プロジェクトの作成

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

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

create-react-native-app drawer-sample

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

React Navigation

npm install --save react-navigation

NativeBase

npm install native-base --save

依存リンク

react-native link


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

npm start

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

ドロワーナビゲーションの実装

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

ホーム画面の実装

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

import React from "react";
import { StatusBar } from "react-native";
import {
  Container,
  Header,
  Title,
  Left,
  Icon,
  Right,
  Button,
  Body,
  Content,
  Text,
  Card,
  CardItem,
} from "native-base";

export default class HomeScreen extends React.Component {
  render() {
    return (
      <Container>
        <Header>
          <Left>
            <Button
              transparent
              onPress={() => this.props.navigation.openDrawer()}>
                <Icon name="menu"/>
            </Button>
          </Left>
          <Body>
            <Title>トップ画面</Title>
          </Body>
          <Right/>
        </Header>
        <Content padder>
          <Card>
            <CardItem>
              <Body>

                <Text>
                  ここはホーム画面です。
                  ドロワーナビゲーションをマスターしましょう!!
                </Text>
              </Body>
            </CardItem>
          </Card>
        </Content>
      </Container>
    )
  }
}

特別難しいコードではないと思いますが、ポイントはopenDrawer関数でドロワーを開くことができるところです。navigationが後ほど定義するindex.jsから渡ってきます。

サイドバーの実装

src/SideBar/Sidebar.jsを開いて以下のように実装します。

import React from "react";
import { AppRegistory, Image, StatusBar } from "react-native";
import { Container, Content, Text, List, ListItem } from "native-base";
const routes = ["Home", "PageOne", "PageTwo"];
export default class SideBar extends React.Component {
  render() {
    return (
      <Container>
        <Content>
          <Image
              source={{
                uri: "https://windii.jp/wp-content/uploads/2018/07/react-native.png"
              }}
              style={{
                height: 120,
                alignSelf: "stretch",
                justifyContent: "center",
                alignItems: "center"
              }}
            />
          <List
            dataArray={routes}
            renderRow={data => {
              return (
                <ListItem
                  button
                  onPress={() => this.props.navigation.navigate(data)}
                >
                  <Text>{data}</Text>
                </ListItem>
              )
            }}
          />
        </Content>
      </Container>
    )
  }
}

ポイントはnavigate関数で遷移先を指定しているところです。dataArrayにルート一覧を入れてrenderRowでリンクボタンをレンダーします。

残りのページの実装

src/HomeScreen/PageOne.js

import React from "react";
import { AppRegistry, Alert } from "react-native";
import { Container, Card, CardItem, Body, Content, Header, Left, Right, Icon, Title, Button, Text } from "native-base";
export default class PageOne extends React.Component {
  render() {
    return (
      <Container>
        <Header>
          <Left>
            <Button
              transparent
              onPress={() => this.props.navigation.openDrawer()}>
                <Icon name="menu"/>
            </Button>
          </Left>
          <Body>
            <Title>ページその1</Title>
          </Body>
          <Right/>
        </Header>
        <Content padder>
          <Card>
            <CardItem>
              <Icon active name="paper-plane" />
              <Text>ページその1</Text>
            </CardItem>
          </Card>
        </Content>
      </Container>
    );
  }
}

src/HomeScreen/PageTwo.js
*ページその1とほぼ同じですが一応載せておきます。

import React from "react";
import { AppRegistry, Alert } from "react-native";
import { Container, Card, CardItem, Body, Content, Header, Left, Right, Icon, Title, Button, Text } from "native-base";
export default class PageOne extends React.Component {
  render() {
    return (
      <Container>
        <Header>
          <Left>
            <Button
              transparent
              onPress={() => this.props.navigation.openDrawer()}>
                <Icon name="menu"/>
            </Button>
          </Left>
          <Body>
            <Title>ページその2</Title>
          </Body>
          <Right/>
        </Header>
        <Content padder>
          <Card>
            <CardItem>
              <Icon active name="paper-plane" />
              <Text>ページその2</Text>
            </CardItem>
          </Card>
        </Content>
      </Container>
    );
  }
}

ルートの設定

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

import React, {Component } from "react";
import HomeScreen from "./HomeScreen.js";
import PageOne from "./PageOne";
import PageTwo from "./PageTwo";
import SideBar from "../SideBar/SideBar.js";
import { createDrawerNavigator } from "react-navigation";
const HomeScreenRouter = createDrawerNavigator(
  {
    Home: { screen: HomeScreen },
    PageOne: { screen: PageOne },
    PageTwo: { screen: PageTwo }
  },
  {
    contentComponent: props => <SideBar {...props}/>
  }
);
export default HomeScreenRouter;

createDrawerNavigatorという関数を使ってルートを生成します。

App.js

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

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import HomeScreen from "./src/HomeScreen/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 <HomeScreen />;
  }
}

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

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

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

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

The following two tabs change content below.

riri

25歳。 Twitter:りリー@ryudoi1 フリーランスとして働きながら、WINDII(ウィンディ)ではテックメディア事業や、受託事業を行なっています! フリーランスになるまでの過程は こちら

関連記事

コメント

  1. この記事へのコメントはありません。

  1. 2019年 2月 26日