環境構築
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」を使用して画面を定義しています。
- 通常の画面遷移を行う２つのグループをタブで切り替えて使用する場合を想定しています。。（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
Android
リポジトリ
本記事で作成したものは以下で公開していますので、参考にしてください。
https://github.com/k-neo/ReactNativeCourseReactNavigationTabbar