This commit is contained in:
parent
9bbfaf7cfe
commit
fc00582125
|
@ -1,99 +0,0 @@
|
|||
/**
|
||||
* 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>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue