GT2/Ejectable/navigation/BottomTabNavigator.tsx

100 lines
2.9 KiB
TypeScript
Raw Normal View History

2021-08-16 07:50:50 +00:00
/**
* 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';
2021-08-21 13:05:22 +00:00
import HomeScreen from '../screens/HomeScreen';
2021-08-16 07:50:50 +00:00
import SettingsScreen from '../screens/SettingsScreen';
2021-08-18 18:21:15 +00:00
import TripScreen from '../screens/TripScreen';
2021-08-21 13:05:22 +00:00
import { HomeParamList, BottomTabParamList, TripParamList, SettingsParamList } from '../types';
2021-08-16 07:50:50 +00:00
2021-08-18 18:21:15 +00:00
export const BottomTab = createBottomTabNavigator<BottomTabParamList>();
2021-08-16 07:50:50 +00:00
export default function BottomTabNavigator() {
const colorScheme = useColorScheme();
return (
<BottomTab.Navigator
2021-08-21 13:05:22 +00:00
initialRouteName="Home"
2021-08-16 07:50:50 +00:00
tabBarOptions={{ activeTintColor: Colors[colorScheme].tint }}>
<BottomTab.Screen
2021-08-21 13:05:22 +00:00
name="Home"
component={HomeNavigator}
2021-08-16 07:50:50 +00:00
options={{
tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
}}
/>
<BottomTab.Screen
name="Settings"
component={SettingsNavigator}
options={{
tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
}}
/>
2021-08-17 22:00:09 +00:00
<BottomTab.Screen
name="Trip"
component={TripNavigator}
options={{
tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
}}
/>
2021-08-16 07:50:50 +00:00
</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
2021-08-21 13:05:22 +00:00
const HomeStack = createStackNavigator<HomeParamList>();
2021-08-16 07:50:50 +00:00
2021-08-21 13:05:22 +00:00
function HomeNavigator() {
2021-08-17 22:00:09 +00:00
return (
2021-08-21 13:05:22 +00:00
<HomeStack.Navigator>
<HomeStack.Screen
name="HomeScreen"
component={HomeScreen}
2021-08-17 22:00:09 +00:00
options={{ headerTitle: 'Green Travel' }}
/>
2021-08-21 13:05:22 +00:00
</HomeStack.Navigator>
2021-08-17 22:00:09 +00:00
);
}
2021-08-20 08:41:16 +00:00
export const TripStack = createStackNavigator<TripParamList>();
2021-08-18 18:21:15 +00:00
2021-08-16 07:50:50 +00:00
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>
);
}