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

  1. フロントエンド

React Navigation入門〜Stack Navigation(スタックナビゲーション)編

最終更新日:2018/09/12

はじめに

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

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

完成品はこんな感じ

準備

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

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

プロジェクトの作成

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

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

create-react-native-app stack-sample

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

React Navigation

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>スタックその1</Title>
        </Body>
        <Right />
      </Header>
    )
  });
  render() {
    return (
      <Container>
        <Content padder>
          <Button full rounded primary
            style={{ marginTop: 10 }}
            onPress={() => this.props.navigation.navigate("StackTwo")}>
            <Text>スタック2へ</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>スタックその2</Title>
        </Body>
        <Right />
      </Header>
    )
  });
  render() {
    return (
      <Container>
        <Content padder>
        <Button full rounded dark
          style={{ marginTop: 10 }}
          onPress={() => this.props.navigation.navigate("StackOne")}>
          <Text>スタック1へ</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入門シリーズ(こちらも合わせてどうぞ!!)

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. この記事へのトラックバックはありません。