GT2/Ejectable/navigation/BottomTabNavigator.tsx

100 lines
2.9 KiB
TypeScript

/**
* Learn more about createBottomTabNavigator:
* https://reactnavigation.org/docs/bottom-tab-navigator
*/
import { Ionicons } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import * as React from 'react';
import Colors from '../constants/Colors';
import useColorScheme from '../hooks/useColorScheme';
import SplashScreen from '../screens/SplashScreen';
import SettingsScreen from '../screens/SettingsScreen';
import TripScreen from '../screens/TripScreen';
import { SplashParamList, BottomTabParamList, TripParamList, SettingsParamList } from '../types';
export const BottomTab = createBottomTabNavigator<BottomTabParamList>();
export default function BottomTabNavigator() {
const colorScheme = useColorScheme();
return (
<BottomTab.Navigator
initialRouteName="Splash"
tabBarOptions={{ activeTintColor: Colors[colorScheme].tint }}>
<BottomTab.Screen
name="Splash"
component={SplashNavigator}
options={{
tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
}}
/>
<BottomTab.Screen
name="Settings"
component={SettingsNavigator}
options={{
tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
}}
/>
<BottomTab.Screen
name="Trip"
component={TripNavigator}
options={{
tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
}}
/>
</BottomTab.Navigator>
);
}
// You can explore the built-in icon families and icons on the web at:
// https://icons.expo.fyi/
function TabBarIcon(props: { name: React.ComponentProps<typeof Ionicons>['name']; color: string }) {
return <Ionicons size={30} style={{ marginBottom: -3 }} {...props} />;
}
// Each tab has its own navigation stack, you can read more about this pattern here:
// https://reactnavigation.org/docs/tab-based-navigation#a-stack-navigator-for-each-tab
const SplashStack = createStackNavigator<SplashParamList>();
function SplashNavigator() {
return (
<SplashStack.Navigator>
<SplashStack.Screen
name="SplashScreen"
component={SplashScreen}
options={{ headerTitle: 'Green Travel' }}
/>
</SplashStack.Navigator>
);
}
export const TripStack = createStackNavigator<TripParamList>();
function TripNavigator() {
return (
<TripStack.Navigator>
<TripStack.Screen
name="TripScreen"
component={TripScreen}
options={{ headerTitle: 'Trip' }}
/>
</TripStack.Navigator>
);
}
const SettingsStack = createStackNavigator<SettingsParamList>();
function SettingsNavigator() {
return (
<SettingsStack.Navigator>
<SettingsStack.Screen
name="SettingsScreen"
component={SettingsScreen}
options={{ headerTitle: 'Settings' }}
/>
</SettingsStack.Navigator>
);
}