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

早いもので、あと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は以下のコマンドでインストールできます。

[cc_bash] expo install react-navigation [/cc_bash]

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

[cc_bash] expo install react-navigation-stack react-navigation-tabs react-native-gesture-handler react-native-reanimated [/cc_bash]

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

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

[cc_bash]
├── App.js
├── app.json
├── assets
│   ├── icon.png
│   └── splash.png
├── package-lock.json
├── package.json
├── babel.config.js
└── screens
├── Page1DetailScreen.js
├── Page1Screen.js
└── Page2Screen.js
[/cc_bash]

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

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

App.js

[cc_javascript]
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 (

)
}
}

[/cc_javascript]

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

page1Screen.js

[cc_javascript]
import React, { Component } from ‘react’;
import {
Text,View,Button
} from ‘react-native’;

export default class Page1Screen extends Component {
render() {
return (

Page1
{
this.props.navigation.navigate(‘Page1Detail’)
}}
/>

)
}
}
[/cc_javascript]

 

 

page1DetailScreen.js

[cc_javascript]
import React, { Component } from ‘react’;
import {
Text,View
} from ‘react-native’;

export default class Page1ScreenDetail extends Component {
render() {
return (

Page1Detail

)
}
}
[/cc_javascript]

 

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

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

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

タブを使ったページ遷移

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

Page2Screen.js

[cc_javascript]
import React, { Component } from ‘react’;
import {
Text, View
} from ‘react-native’;

export default class Page2Screen extends Component {
render() {
return (

Page2

)
}
}
[/cc_javascript]

 

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

App.js

[cc_javascript]
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 (

)
}
}
[/cc_javascript]

 

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

 

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

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

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

App.js

[cc_javascript]

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 (

)
}
}

[/cc_javascript]

 

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

まとめ

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

 

それでは、また！