Menu

【ReactNative】+【Expo】+【ReactNavigation】でページ遷移を実装する

2019.12.20

ページ遷移を実装してみる

 

 

こんにちは、せんだです。

 

早いもので、あと1週間とちょっとで2019年も終わってしまいますね。2019年みなさんどうでしたか？

せんだにとっての大きな出来事はやはりスワローに入社したことかなと思います。毎日のチャリ通のおかげで少しはダイエットできたり、県内の色んな情報も会社のみんなから教えてもらったりと良い1年だったなーと思います。（もちろん、スキルアップもしてるはず…)

 

さて、そんなこんなのせんだの2019年最後のブログはReactNativeでのスマホアプリ開発における、ページ遷移の実装方法について書こうと思います。

 

目次

  • ReactNavigationとは
  • ReactNavigationのインストール
  • ページ遷移を実装してみる
  • タブを使ったページ遷移

 

環境

端末：Mac Book Pro

OS：macOS Mojave

ReactNativeバージョン：0.61.4

Expoバージョン：3.8.0

Node.jsバージョン：12.13.1

 

では早速書いていきます。

 

ReactNavigationとは

ReactNavigationはReactNativeで利用できる画面遷移用のライブラリです。（そのまんまですね…）

他にも同様のライブラリはありますが、expoが公式サイトで推奨しているのがReactNavigationなので、今回はそれを使います。

 

ReactNavigationのインストール

ReactNavigationは以下のコマンドでインストールできます。

1
 expo install react-navigation

 

ついでに関連パッケージもインストールします。

1
 expo install react-navigation-stack react-navigation-tabs react-native-gesture-handler react-native-reanimated

 

ページ遷移を実装してみる

ディレクトリ構成はこちら。（ベースはexpo initコマンドで作成）

 

1
2
3
4
5
6
7
8
9
10
11
12
├── App.js
├── app.json
├── assets
│   ├── icon.png
│   └── splash.png
├── package-lock.json
├── package.json
├── babel.config.js
└── screens
 ├── Page1DetailScreen.js
 ├── Page1Screen.js
 └── Page2Screen.js

 

最初はWebアプリで言うところのaタグで記述するリンクです。これにはreact-navigation-stackを利用します。

それでは実装してみます。

App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React, { Component } from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Page1Screen from './screens/Page1Screen';
import Page1DetailScreen from './screens/Page1DetailScreen';

// setting main nav
const MainStack = createStackNavigator(
  {
    Page1: Page1Screen,
    Page1Detail: Page1DetailScreen,
  }
)

const AppContainer = createAppContainer(MainStack)

export default class App extends Component {

  render() {
    return (
      <AppContainer />
    )
  }
}

上記のように最初に読み込まれるApp.jsには主にルーティングに関するコードを記述しています。

 

page1Screen.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React, { Component } from 'react';
import {
  Text,View,Button
} from 'react-native';

export default class Page1Screen extends Component {
  render() {
    return (
      <View>
        <Text>Page1</Text>
        <Button
          title="go to Detail"
          onPress={() => {
            this.props.navigation.navigate('Page1Detail')
          }}
        />
      </View>
    )
  }
}

 

 

page1DetailScreen.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React, { Component } from 'react';
import {
  Text,View
} from 'react-native';

export default class Page1ScreenDetail extends Component {
  render() {
    return (
      <View>
        <Text>Page1Detail</Text>
      </View>
    )
  }
}

 

page1Screenの「go to Detail」をクリックするとpage1DetailScreenのページに遷移します。

page1DetailScreenの画面上部の戻るボタンをクリックするとpage1Screenのページに遷移します。

簡単ですが、これでreact-navigation-stackを使ったページ遷移の実装ができました。

タブを使ったページ遷移

次はタブを使ったページ遷移です。これにはreact-navigation-tabsを利用します。

Page2Screen.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React, { Component } from 'react';
import {
  Text, View
} from 'react-native';

export default class Page2Screen extends Component {
  render() {
    return (
      <View>
        <Text>Page2</Text>
      </View>
    )
  }
}

 

App.jsも少し書き換えます。

App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React, { Component } from 'react';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import Page1Screen from './screens/Page1Screen';
import Page2Screen from './screens/Page2Screen';

// tab nav setting
const TabNavigator = createBottomTabNavigator(
  {
    Page1: Page1Screen,
    Page2: Page2Screen
  },
  {
    initialRouteName: 'Page1'
  }
);

const AppContainer = createAppContainer(TabNavigator)

export default class App extends Component {

  render() {
    return (
      <AppContainer />
    )
  }
}

 

はい、これだけです。簡単ですね。

 

タブを使ったページ遷移（応用編）

次は応用編です。react-navigation-stackとreact-navigation-tabsの両方を使って、Page1のタブの場合だけreact-navigation-stackを使って「戻る」ボタンを表示してみます。

App.jsを少し書き換えます。

App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import React, { Component } from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import Page1Screen from './screens/Page1Screen';
import Page1DetailScreen from './screens/Page1DetailScreen';
import Page2Screen from './screens/Page2Screen';

// setting main nav
const MainStack = createStackNavigator(
  {
    Page1: Page1Screen,
    Page1Detail: Page1DetailScreen,
  }
)

// tab nav setting
const TabNavigator = createBottomTabNavigator(
  {
    Page1: {
      screen: MainStack
    },
    Page2: Page2Screen
  },
  {
    initialRouteName: 'Page1'
  }
);

const AppContainer = createAppContainer(TabNavigator)

export default class App extends Component {

  render() {
    return (
      <AppContainer />
    )
  }
}

 

上記のようにタブごとにstack-navigatorを指定してあげると機能単位での制御もできそうですね。

まとめ

いかがでしたか？今回はReactNavigationの使い方について書いてみました。入門書籍なんかだと以外とページ遷移には触れられてなかったりするので、そんな時に参考にしてもらえればと思います。

 

それでは、また！

↓↓↓ぜひチェックしてください

～提供中のヒューマンセンシング技術～

◆人物検出技術
歩行者・来店者数計測やロボット搭載も
https://humandetect.pas-ta.io

◆視線検出技術
アイトラッキングや次世代UIに
https://eyetrack.pas-ta.io

◆生体判定技術
eKYC・顔認証のなりすまし対策を！
https://bio-check.pas-ta.io

◆目検出技術
あらゆる目周りデータを高精度に取得
https://pupil.pas-ta.io

◆音声感情認識技術
会話から怒りや喜びの感情を判定
https://feeling.pas-ta.io

◆虹彩認証技術
目の虹彩を利用した生体認証技術
https://iris.pas-ta.io

< Back

Top