100 lines
2.9 KiB
TypeScript
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>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
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>
|
||
|
|
);
|
||
|
|
}
|