93 lines
No EOL
3.7 KiB
TypeScript
93 lines
No EOL
3.7 KiB
TypeScript
import React from 'react';
|
|
import {StyleSheet} from "react-native";
|
|
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
|
|
import {Entypo, MaterialCommunityIcons, Fontisto, MaterialIcons, Ionicons} from '@expo/vector-icons';
|
|
import Home from '../screen/Home';
|
|
import Menu from '../screen/Menu';
|
|
import Cart from '../screen/Cart';
|
|
import Favorite from '../screen/Favorite';
|
|
import OrderReceipt from '../screen/OrderReceipt';
|
|
|
|
|
|
const Tab = createBottomTabNavigator();
|
|
|
|
const HomeNavigator = () => {
|
|
return (
|
|
<Tab.Navigator screenOptions={{headerShown: false, tabBarHideOnKeyboard: true, tabBarStyle: styles.tabBarStyle}}>
|
|
|
|
<Tab.Screen name='home' component={Home}
|
|
options={{
|
|
tabBarLabel: "Home",
|
|
tabBarActiveTintColor: '#DA7297',
|
|
tabBarInactiveTintColor: 'gray',
|
|
tabBarIcon:({focused}) =>
|
|
focused? (
|
|
<Entypo name="home" size={26} color="#DA7297" style={{marginTop: 5, marginBottom: 5}}/>
|
|
) : (
|
|
<Entypo name="home" size={26} color="gray" style={{marginTop: 5, marginBottom: 5}}/>
|
|
)
|
|
}}
|
|
/>
|
|
<Tab.Screen name='menu' component={Menu}
|
|
options={{
|
|
tabBarLabel: "Menu",
|
|
tabBarActiveTintColor: '#DA7297',
|
|
tabBarInactiveTintColor: 'gray',
|
|
tabBarIcon:({focused}) =>
|
|
focused? (
|
|
<Ionicons name="fast-food-sharp" size={26} color="#DA7297" style={{marginTop: 5, marginBottom: 5}}/>
|
|
) : (
|
|
<Ionicons name="fast-food-sharp" size={26} color="gray" style={{marginTop: 5, marginBottom: 5}}/>
|
|
)
|
|
}}
|
|
/>
|
|
<Tab.Screen name='favorit' component={Favorite}
|
|
options={{
|
|
tabBarLabel: "Favorite",
|
|
tabBarActiveTintColor: '#DA7297',
|
|
tabBarInactiveTintColor: 'gray',
|
|
tabBarIcon:({focused}) =>
|
|
focused? (
|
|
<MaterialIcons name="favorite" size={26} color="#DA7297" style={{marginTop: 5, marginBottom: 5}}/>
|
|
) : (
|
|
<MaterialIcons name="favorite" size={26} color="gray" style={{marginTop: 5, marginBottom: 5}}/>
|
|
)
|
|
}}
|
|
/>
|
|
<Tab.Screen name='cart' component={Cart}
|
|
options={{
|
|
tabBarLabel: "Your order",
|
|
tabBarActiveTintColor: '#DA7297',
|
|
tabBarInactiveTintColor: 'gray',
|
|
tabBarIcon:({focused}) =>
|
|
focused? (
|
|
<Fontisto name="shopping-bag" size={22} color="#DA7297" style={{marginTop: 5, marginBottom: 5}}/>
|
|
) : (
|
|
<Fontisto name="shopping-bag" size={22} color="gray" style={{marginTop: 5, marginBottom: 5}}/>
|
|
)
|
|
}}
|
|
/>
|
|
<Tab.Screen name='receipt' component={OrderReceipt}
|
|
options={{
|
|
tabBarLabel: "Receipt",
|
|
tabBarActiveTintColor: '#DA7297',
|
|
tabBarInactiveTintColor: 'gray',
|
|
tabBarIcon:({focused}) =>
|
|
focused? (
|
|
<Ionicons name="receipt" size={24} color="#DA7297" style={{marginTop: 5, marginBottom: 5}}/>
|
|
) : (
|
|
<Ionicons name="receipt" size={24} color="gray" style={{marginTop: 5, marginBottom: 5}}/>
|
|
)
|
|
}}
|
|
/>
|
|
</Tab.Navigator>
|
|
)
|
|
}
|
|
|
|
export default HomeNavigator
|
|
|
|
const styles = StyleSheet.create({
|
|
tabBarStyle: {
|
|
height: 80,
|
|
}
|
|
}) |