目次
はじめに
本記事では、React NavigationがサポートしているStack Navigation(スタックナビゲーション）と呼ばれる画面遷移の実装方法をご紹介します。
実際のプロダクトでも使われることの多いNativeBaseと連携します。
完成品はこんな感じ
準備
本記事は、Expoを用いたReactNative開発を前提にしております。まだ設定ができてない方は下記の記事で設定してください！（５分くらいでできます！）
プロジェクトの作成
create-react-native-appを用いてプロジェクトを新規作成します。
create-react-native-appの設定がお済みでない方はこちら
create-react-native-app stack-sample
ライブラリのインストール
npm install --save react-navigation
NativeBase
npm install native-base --save
依存リンク
react-native link
*うまくいかない場合はこちらが参考になるかもしれません。
スタックナビゲーションの実装
プロジェクト配下にsrcというディレクトリを作って以下のようにします。
index.js
import React, { Component } from "react";
import StackOne from "./StackOne.js";
import StackTwo from "./StackTwo.js";
import { createStackNavigator } from "react-navigation";
export const Stack = createStackNavigator({
StackOne: StackOne,
StackTwo: StackTwo
});
index.jsではStackOneとStackTwoをreact-navigationのcreateStackNavigator関数を使って画面遷移をします。以下にStackOne.js、StackTwo.jsも乗せておきますが、どちらも似たような構成になっているので一つだけ確実に理解しましょう！
StackOne.js
import React from "react";
import { Container, Body, Content, Header, Left, Right, Icon, Title, Button, Text } from "native-base";
export default class StackOne extends React.Component {
static navigationOptions = ({ navigation }) => ({
header: (
<Header>
<Left>
<Button transparent onPress={() => navigation.goBack()}>
<Icon name="arrow-back" />
</Button>
</Left>
<Body>
<Title>スタックその１</Title>
</Body>
<Right />
</Header>
)
});
render() {
return (
<Container>
<Content padder>
<Button full rounded primary
style={{ marginTop: 10 }}
onPress={() => this.props.navigation.navigate("StackTwo")}>
<Text>スタック２へ</Text>
</Button>
</Content>
</Container>
);
}
}
StackTwo.js
import React from "react";
import { Container,Body, Content, Header, Left, Right, Icon, Title, Button, Text } from "native-base";
export default class StackTwo extends React.Component {
static navigationOptions = ({ navigation }) => ({
header: (
<Header>
<Left>
<Button transparent onPress={() => navigation.goBack()}>
<Icon name="arrow-back" />
</Button>
</Left>
<Body>
<Title>スタックその２</Title>
</Body>
<Right />
</Header>
)
});
render() {
return (
<Container>
<Content padder>
<Button full rounded dark
style={{ marginTop: 10 }}
onPress={() => this.props.navigation.navigate("StackOne")}>
<Text>スタック１へ</Text>
</Button>
</Content>
</Container>
);
}
}
最後にApp.jsを以下のように書き換えます。
import React from 'react';
import { Stack } from "./src/StackScreen";
import Expo from "expo";
export default class App extends React.Component {
constructor() {
super();
this.state = {
isReady: false
};
}
async componentWillMount() {
await Expo.Font.loadAsync({
Ionicons: require("native-base/Fonts/Ionicons.ttf")
});
this.setState({ isReady: true });
}
render() {
if (!this.state.isReady) {
return <Expo.AppLoading />;
}
return <Stack />;
}
}
iconの読み込みのため少し複雑になってはいますが、index.jsで生成したstackの定義をそのまま読み込んでいるだけです。
Stack Navigation(スタックナビゲーション)はReact Navigationの中でも一番よく使うと言ってもいいくらいの機能なのでぜひマスターしましょう！
React Navigation入門〜Drawer Navigation(ドロワーナビゲーション)編
React Navigation入門〜Stack Navigation(スタックナビゲーション)編
React Navigation入門〜TabNavigation(タブナビゲーション）編
WINDII
最新記事 by WINDII (全て見る)
- Canvaが最高すぎる。使い方を完全ガイド【チュートリアルあり】 - 2019年5月14日
- 人気急上昇中のLaravelをはじめよう！【徹底解説】 - 2019年4月23日
- Laravelの認可を理解して実装してみよう！ - 2019年3月29日
この記事へのコメントはありません。