46 lines
1.9 KiB
JavaScript
46 lines
1.9 KiB
JavaScript
import React from 'react'
|
|
import { Image } from 'react-native'
|
|
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
|
import Theme from '../../components/theme.style.js';
|
|
|
|
import Stations from './stations';
|
|
import MapContainer from './map/Map';
|
|
import Guide from './guide';
|
|
|
|
const Tab = createBottomTabNavigator();
|
|
|
|
const screenOptions = ({ route }) => ({
|
|
tabBarShowLabel: false,
|
|
tabBarItemStyle: {
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 1 },
|
|
shadowOpacity: 0.8,
|
|
shadowRadius: 1,
|
|
elevation: 3
|
|
},
|
|
tabBarIcon: ({ focused, color, size }) => {
|
|
let iconName;
|
|
if(route.name === 'Stations') {
|
|
iconName = focused ? require("../../assets/iqair-station-filled.png") : require("../../assets/iqair-station-outline.png");
|
|
return <Image style={{height: 30, resizeMode: 'contain', width: 40}} source={iconName} />
|
|
} else if (route.name === 'Map') {
|
|
iconName = focused ? require("../../assets/iqair-map-filled.png") : require("../../assets/iqair-map-outline.png");
|
|
return <Image style={{height: 30, resizeMode: 'contain', width: 40}} source={iconName} />
|
|
} else if(route.name === 'Guide') {
|
|
iconName = require("../../assets/iqair-guide.png");
|
|
return <Image style={{height: 30, resizeMode: 'contain', width: 40}} source={iconName} />
|
|
}
|
|
},
|
|
});
|
|
|
|
const Navigation = () => {
|
|
return (
|
|
<Tab.Navigator initialRouteName="Stations" backBehavior="initialRoute" screenOptions={screenOptions}>
|
|
<Tab.Screen component={Stations} name="Stations" options={{headerShown: false}} />
|
|
<Tab.Screen component={MapContainer} name="Map" options={{headerShown: false}} />
|
|
<Tab.Screen component={Guide} name="Guide" options={{headerShown: false}} />
|
|
</Tab.Navigator>
|
|
)
|
|
}
|
|
|
|
export default Navigation |