RenJuan
/
GT2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

*

This commit is contained in:
Ren Juan 2021-08-22 04:33:44 +00:00
parent 9bbfaf7cfe
commit fc00582125
1 changed files with 0 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
Ejectable/navigation/BottomTabNavigator.tsx
View File

@ -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>
);
}