GT2/Ejectable/navigation/BottomTabNavigator.tsx

79 lines
2.3 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 TripScreen from '../screens/TripScreen';
import SettingsScreen from '../screens/SettingsScreen';
import { BottomTabParamList, TripParamList, SettingsParamList } from '../types';
const BottomTab = createBottomTabNavigator<BottomTabParamList>();
export default function BottomTabNavigator() {
const colorScheme = useColorScheme();
return (
<BottomTab.Navigator
initialRouteName="Trip"
tabBarOptions={{ activeTintColor: Colors[colorScheme].tint }}>
<BottomTab.Screen
name="Trip"
component={TripNavigator}
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.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 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>
);
}