React Nativeを使って、キュレーションアプリやメディアアプリによくあるタブ切り替えの実装方法を紹介します。
通常ならば、複雑な実装が必要なRoutingとタブ切り替え機能ですが、【react-native-router-flux】というライブラリを使えば数十分で実装が可能です。
react-native-router-fluxによるタブ遷移
今回はこのような形で、
- 記事一覧
- お知らせ
- プロフィール
- マイページ
という４つのページ(タブ)を持ったブログのようなデモアプリを作成します。
※ルーティングのデモアプリなんで、4ページ適当に作れば大丈夫です。
React Nativeの雛形をCLIでインストールしたら、react-native-router-fluxをインストールしてください
|
1 |
npm i -S react-native-router-flux |
そして、アプリの構築ファイルを配置するsrc配下は以下のようなファイル構成になります。
|
1 2 3 4 5 6 7 |
├── App.js ├── Router.js └── screens ├── Article.js ├── MyPage.js ├── News.js └── Profile.js |
- App.js
- Router.js(ここにルーティングをコーディングしていく)
- screens(各ページのコンポーネント)
という構成になっています。
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
import React, { Component } from 'react'; import { View, Text } from 'react-native'; import { Scene, Router, Tabs } from 'react-native-router-flux'; import Article from './screens/Article'; import News from './screens/News'; import Profile from './screens/Profile'; import MyPage from './screens/MyPage'; import Icon from 'react-native-vector-icons/MaterialIcons'; const styles = { tabIconContainerStyle: { justifyContent: 'center', alignItems: 'center', }, tabIconStyle: { width: 24, height: 24, fontSize: 24, }, } const TabBarIcon = props => ( <View style={styles.tabIconContainerStyle}> <Icon name={props.iconName} color={props.focused ? 'blue' : 'grey'} style={styles.tabIconStyle} /> </View> ); const RouterComponent = () => { return ( <Router> <Tabs key='root' swipeEnabled={ true } animationEnabled={ true } > <Scene key='article' component={Article} title='記事一覧' iconName='collections' initial iconColor='red' icon={TabBarIcon} /> <Scene key='news' component={News} title='お知らせ' iconName='textsms' iconColor='red' icon={TabBarIcon} /> <Scene key='profile' component={Profile} title='プロフィール' iconName='accessibility' iconColor='red' icon={TabBarIcon} /> <Scene key='mypage' component={MyPage} title='マイページ' iconName='settings' iconColor='red' icon={TabBarIcon} /> </Tabs> </Router> ) } export default RouterComponent; |
- 1〜8行目：必要なライブラリや表示するComponentをimport
- 10〜20行目：style(タブの装飾)
- 22〜30行目：tab用のComponent
- 32〜76行目：Router表示用のコンポーネント
という構成になっています。
32〜76行目がタブによるページ遷移の重要なポイントで、タブ遷移させたいページ(Scene)を【Tabs】タグでくくります。
そして、そのSceneのパラメーターに
- key：各ページ固有のkey
- component：各ページのComponent
- title：各ページのタイトル(ヘッダー部分やタブのラベルに表示されます)
- iconColor:アイコンの色
- icon：タブのアイコン表示用のコンポーネント(TabBarIcon)
を設定します。
Tabsに指定されている【swipeEnabled】と【animationEnabled】は、スワイプでタブ遷移できるか・遷移する際にアニメーションするかの指定ですので、お好きなように設定してください。
たったの、これだけで、タブでページ切り替えのできるiphoneアプリとandroidアプリが作成できました！
App.js
念のため、App.jsもご紹介しておくと、
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import React, { Component } from 'react'; import Router from './Router'; class App extends Component { render() { return ( <Router /> ); } } export default App; |
めちゃくちゃシンプル！笑
ただ、先程作成したRouter.jsを呼び出して描写しているだけです。
React Nativeを使えば、アプリ開発も手軽にできる
今まで、アプリ開発を行うためにはswiftやjavaなどのネイティブ言語を覚える必要がありました。しかし、React Nativeが登場したおかげで、javascriptしか触ったことがないフロントエンドエンジニアでもiOSアプリやAndroidアプリを手軽に開発する環境が整いつつあります。
また、今回紹介したような便利なライブラリの登場や、Facebook・Instagramといった何億人のユーザーがいるアプリがReact Nativeで作られているという実績が、更にReact Nativeでのアプリ開発の波を押し上げるでしょう。
是非、React Nativeでアプリ開発に挑戦してみてください！ここだけの話、アプリ開発者は母数が少ないので、高単価の案件も多いですよ笑
※今回作成したアプリのソース一式です。(https://github.com/rara-tan/react-native-router-demo-tab)
