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 HomeScreen from '../screens/HomeScreen';
|
|
import SettingsScreen from '../screens/SettingsScreen';
|
|
import TripScreen from '../screens/TripScreen';
|
|
import { HomeParamList, BottomTabParamList, TripParamList, SettingsParamList } from '../types';
|
|
|
|
export const BottomTab = createBottomTabNavigator<BottomTabParamList>();
|
|
|
|
export default function BottomTabNavigator() {
|
|
const colorScheme = useColorScheme();
|
|
|
|
return (
|
|
<BottomTab.Navigator
|
|
initialRouteName="Home"
|
|
tabBarOptions={{ activeTintColor: Colors[colorScheme].tint }}>
|
|
<BottomTab.Screen
|
|
name="Home"
|
|
component={HomeNavigator}
|
|
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 HomeStack = createStackNavigator<HomeParamList>();
|
|
|
|
function HomeNavigator() {
|
|
return (
|
|
<HomeStack.Navigator>
|
|
<HomeStack.Screen
|
|
name="HomeScreen"
|
|
component={HomeScreen}
|
|
options={{ headerTitle: 'Green Travel' }}
|
|
/>
|
|
</HomeStack.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>
|
|
);
|
|
}
|