React Nativeでナビゲーションバーやアプリ内でページ遷移を実現したい場合、【react-native-router-flux】というモジュールを使って実装することができます。
今回は、React Nativeとreact-native-router-fluxを使って、iphoneアプリにナビゲーション(ルーティング)機能を実装する方法を紹介します。
react-native-router-fluxの準備
まずは、お決まり、NPMでモジュールをインポートします。(react-native init でプロジェクトを作成した前提で解説を進めます。)
react-native init プロジェクト名で作成したプロジェクトディレクトリに移動して、以下のコマンドでreact-native-router-fluxをインポートしてください。
|
1 |
npm i -S react-native-router-flux |
これで、React Nativeにおけるルーティング機能を実装する準備が整いました。
Router経由でページを表示させてみる
以下のファイル構成でプロダクトを作っていきます。
|
1 2 3 4 5 6 |
├── App.js ├── Router.js └── pages ├── pageA.js ├── pageB.js └── pageC.js |
- App.js：大元になる親コンポーネント
- Router.js：ルーティング情報を記載するファイル
- pagesディレクトリ：この中に表示するページをいれていきます。(今回は3ページ分用意しました)
まずは、大元になる親コンポーネントApp.jsにreact-native-router-fluxを用いてRouter機能を使えるように設定を記載していきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import React, { Component } from 'react'; import { View, Text } from 'react-native'; import Router from './Router'; class App extends Component { render() { return ( <View> <Router /> </View> ) } } export default App; |
超簡単ですね笑
Routerを読み込んで、Appコンポーネント内でレンダーしているだけです。
次にRouter.jsをみていきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import React from 'react'; import { Scene, Router } from 'react-native-router-flux'; import pageA from './pages/pageA'; const RouterComponent = () => { return ( <Router> <Scene> <Scene key="pageA" component={pageA} title="Page A" /> </Scene> </Router> ) } export default RouterComponent; |
これが、Router.js(ルーティング)の書き方です。まずはpageAだけ表示するRouter.jsを書いてみました。非常にシンプルじゃないですか？
- 1〜3行目：必要なモジュールをインポート
- 5〜13行目：Router内に「<Scene>」区切りで表示したいページを書いていく
そして、pages/pageA.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 |
import React, { Component } from 'react'; import { View, Text } from 'react-native'; class pageA extends Component { render() { return ( <View style={pageStyle}> <Text style={fontStyle}>A</Text> </View> ) } } const pageStyle = { justifyContent: 'center', alignItems: 'center', height: 200, paddingTop: 100 } const fontStyle = { fontSize: 36, fontWeight: '600' } export default pageA; |
適当にダミー表示用のコンポーネントを用意します。
この状態でsimulatorを立ち上げると
このように、Routerに記載したpageAコンポーネントが表示されます！
簡単に<Scene>内のオプションの説明をすると
- key：各ページの名前（他のページからこのページにリンクしたいときに指定します）
- component： 表示したいコンポーネント
- title：ページの上に表示されるタイトル
となっています。
他のページへのルーティング
単一のページを表示することはできましたので、今度は、他のページへ遷移するソースを記述しましょう。
Router.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 |
import React from 'react'; import { Scene, Router, Actions } from 'react-native-router-flux'; import pageA from './pages/pageA'; import pageB from './pages/pageB'; import pageC from './pages/pageC'; const RouterComponent = () => { return ( <Router> <Scene> <Scene key="pageA" component={pageA} title="Page A" rightTitle="Bへ" onRight={() => { Actions.pageB(); }} /> <Scene key="pageB" component={pageB} title="Page B" rightTitle="Cへ" onRight={() => { Actions.pageC(); }} /> <Scene key="pageC" component={pageC} title="Page C" /> </Scene> </Router> ) } export default RouterComponent; |
このように変更して、リロードしてください。そうすると
アプリ等でよく見る、右上からのリンクや戻るボタンが出来ましたね？
これで、React Nativeのルーティング(ナビゲーション)が実装できるようになりました!
ここでは、
- rightTitle：右上に表示する文字
- onRight：rightTitleがクリックされたときの挙動
というオプションをSceneに追加しています。
ルーティングができるようになれば、アプリの幅が広がる
今回、紹介した、react-native-router-fluxを使って、ナビゲーション機能をアプリ内に導入できれば、アプリ制作の幅とても広がります。
是非、良いアプリを作ってください！
今回作ったアプリのファイル一式は以下にアップしておきましたので、よかったら、参考にしてください。
https://github.com/rara-tan/react-native-router-demo
