目次
はじめに
本記事では、React NavigationがサポートしているDrawer Navigation(ドロワーナビゲーション）と呼ばれる画面遷移の実装方法をご紹介します。
実際のプロダクトでも使われることの多いNativeBaseと連携します。
完成品はこんな感じ
準備
本記事は、Expoを用いたReactNative開発を前提にしております。まだ設定ができてない方は下記の記事で設定してください！（５分くらいでできます！）
プロジェクトの作成
create-react-native-appを用いてプロジェクトを新規作成します。
create-react-native-appの設定がお済みでない方はこちら
create-react-native-app drawer-sample
ライブラリのインストール
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://tech.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>ページその１</Title>
</Body>
<Right/>
</Header>
<Content padder>
<Card>
<CardItem>
<Icon active name="paper-plane" />
<Text>ページその１</Text>
</CardItem>
</Card>
</Content>
</Container>
);
}
}
src/HomeScreen/PageTwo.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>ページその２</Title>
</Body>
<Right/>
</Header>
<Content padder>
<Card>
<CardItem>
<Icon active name="paper-plane" />
<Text>ページその２</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.
WINDII
WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。
日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！
また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。
Slackコミュニティはこちらから
最新記事 by WINDII (全て見る)
- Canvaが最高すぎる。使い方を完全ガイド【チュートリアルあり】 - 2019年5月14日
- 人気急上昇中のLaravelをはじめよう！【徹底解説】 - 2019年4月23日
- Laravelの認可を理解して実装してみよう！ - 2019年3月29日
この記事へのコメントはありません。