【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
 ├── App.js ├── app.json ├── assets │ ├── icon.png │ └── splash.png ├── babel.config.js ├── package-lock.json ├── package.json └── screens ├── Page1DetailScreen.js ├── Page1Screen.js └── Page2Screen.js

 

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

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

App.js

1
 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'; 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
 import React, { Component } from 'react'; import { Text, View, Button } from 'react-native'; export default class Page1Screen extends Component { render() { return ( <text>Page1</text> { this.props.navigation.navigate('Page1Detail') }} /&gt; ) } }

 

 

page1DetailScreen.js

1
 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
 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


Top