JavaScript
Android
iOS
reactnative

【React Native】React Navigation を使ってみる(タブバー編)


環境構築

React Navigation を使ってみる(画面遷移編) と同様のライブラリを使用します。


アプリ作成


App.js


App.js

import React, {Component} from 'react';

import { createStackNavigator, createBottomTabNavigator } from 'react-navigation'
import { Icon, MaterialIcons } from 'native-base';

import Main from './screens/Main'
import Push from './screens/Push'
import Modal from './screens/Modal'
import List from './screens/List'

const MainNavigation = createStackNavigator(
{
Main: { screen: Main },
Push: { screen: Push },
},
{initialRouteName: 'Main', headerMode: 'none'}
)
const HomeNavigation = createStackNavigator(
{
MainNavigation: { screen: MainNavigation },
Modal: { screen: Modal },
},
{initialRouteName: 'MainNavigation', mode: 'modal', headerMode: 'none'},
)

const ListNavigation = createStackNavigator(
{
List: { screen: List },
},
{initialRouteName: 'List', headerMode: 'none'}
)

const TabNavigation = createBottomTabNavigator(
{
Home: { screen: HomeNavigation,
navigationOptions: () => ({
tabBarIcon: ({tintColor}) => (
<Icon type="FontAwesome" name="home" style={{color:tintColor}} />
)
}),
},
List: { screen: ListNavigation,
navigationOptions: () => ({
tabBarIcon: ({tintColor}) => (
<Icon type="FontAwesome" name="th-list" style={{color:tintColor}} />
)
}),
},
},
{
tabBarOptions: {
activeTintColor: '#444444',
inactiveTintColor: '#cccccc',
},
},
{initialRouteName: 'Home'}
)

type Props = {};
export default class App extends Component<Props> {
render() {
return (
<TabNavigation />
);
}
}



  • 全体のルーティングを定義します。具体的には「BottomTabNavigator」、「StackNavigator」を使用して画面を定義しています。

  • 通常の画面遷移を行う2つのグループをタブで切り替えて使用する場合を想定しています。。(BottomTabNavigator と、StackNavigator をネストさせています)

  • 画面構成は以下の通りです。


    • メイン画面 (Main.js)

    • プッシュ表示される画面 (Push.js)

    • モーダル表示される画面 (Modal.js)

    • タブ切り替えで表示される画面 (List.js)




Main.js

「React Navigation を使って見る(画面遷移編)」と同じものを使用します。


Push.js

「React Navigation を使って見る(画面遷移編)」と同じものを使用します。


Modal.js

「React Navigation を使って見る(画面遷移編)」と同じものを使用します。


List.js


List.js

import React, {Component} from 'react';

import { Container, Header, Left, Body, Right, Title } from 'native-base';

type Props = {};
export default class List extends Component<Props> {
render() {
return (
<Container>
<Header>
<Left />
<Body>
<Title>リスト</Title>
</Body>
<Right />
</Header>
</Container>
);
}
}


*タブ切り替えで表示される画面を定義しています。


動作の様子


iOS

ios.gif


Android

android.gif


リポジトリ

本記事で作成したものは以下で公開していますので、参考にしてください。

https://github.com/k-neo/ReactNativeCourseReactNavigationTabbar