up 1st all file app naga

navigation/BottomTabNavigator.tsx

@@ -2,72 +2,186 @@ 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 { BottomTabParamList, TabOneParamList, TabTwoParamList } from '../types';
+import { Text, View } from '../components/Themed';
 
 import Colors from '../constants/Colors';
 import useColorScheme from '../hooks/useColorScheme';
-import TabOneScreen from '../screens/TabOneScreen';
-import TabTwoScreen from '../screens/TabTwoScreen';
-import { BottomTabParamList, TabOneParamList, TabTwoParamList } from '../types';
+import HomePage from '../screens/HomePage';
+import ProductList from '../screens/ProductList';
+import MenuCategory from '../screens/MenuCategory';
+import ProductDetail from '../screens/ProductDetail';
+import { HeaderHome, HeaderCategory, HeaderProductDetail } from '../components/header/HeaderAllPage'
 
-const BottomTab = createBottomTabNavigator<BottomTabParamList>();
 
+const BottomTab = createBottomTabNavigator();
 export default function BottomTabNavigator() {
-  const colorScheme = useColorScheme();
-
-  return (
-    <BottomTab.Navigator
-      initialRouteName="TabOne"
-      tabBarOptions={{ activeTintColor: Colors[colorScheme].tint }}>
-      <BottomTab.Screen
-        name="TabOne"
-        component={TabOneNavigator}
-        options={{
-          tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
-        }}
-      />
-      <BottomTab.Screen
-        name="TabTwo"
-        component={TabTwoNavigator}
-        options={{
-          tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
-        }}
-      />
-    </BottomTab.Navigator>
-  );
+    const colorScheme = useColorScheme();
+    return (
+        <BottomTab.Navigator
+            initialRouteName="Trang chủ"
+            tabBarOptions={{ activeTintColor: '#D8262F' }}>
+            <BottomTab.Screen
+                name="Trang chủ"
+                component={AllStackNavigation}
+                options={{
+                    tabBarIcon: ({ color }) => <TabBarIcon name="home-outline" color={color} />,
+                }}
+            />
+            <BottomTab.Screen
+                name="Danh mục"
+                component={MenuNavigation}
+                options={{
+                    tabBarIcon: ({ color }) => <TabBarIcon name="apps-outline" color={color} />,
+                }}
+            />
+            <BottomTab.Screen
+                name="Giỏ hàng"
+                component={ProductListNavigator}
+                options={{
+                    tabBarIcon: ({ color }) => <TabBarIcon name="cart-outline" color={color} />,
+                }}
+            />
+            <BottomTab.Screen
+                name="Chat"
+                component={ProductListNavigator}
+                options={{
+                    tabBarIcon: ({ color }) => <TabBarIcon name="chatbubble-ellipses-outline" color={color} />,
+                }}
+            />
+            <BottomTab.Screen
+                name="Tài khoản"
+                component={ProductListNavigator}
+                options={{
+                    tabBarIcon: ({ color }) => <TabBarIcon name="person-outline" 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} />;
+    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 TabOneStack = createStackNavigator<TabOneParamList>();
+const HomepageStack = createStackNavigator<TabOneParamList>();
 
-function TabOneNavigator() {
-  return (
-    <TabOneStack.Navigator>
-      <TabOneStack.Screen
-        name="TabOneScreen"
-        component={TabOneScreen}
-        options={{ headerTitle: 'Tab One Title' }}
-      />
-    </TabOneStack.Navigator>
-  );
+function HomePageNavigator({ navigation }: { navigation: any }) {
+    return (
+        <HomepageStack.Navigator>
+            <HomepageStack.Screen
+                name="HomePage"
+                component={HomePage}
+                options={{
+                    headerTitle: '',
+                    headerLeft: () => (
+                        <HeaderHome />
+                    ),
+                    headerStyle: {
+                        backgroundColor: '#fff',
+                        height: 100,
+                    }
+                }}
+            />
+        </HomepageStack.Navigator>
+    );
 }
 
-const TabTwoStack = createStackNavigator<TabTwoParamList>();
+const MenuStack = createStackNavigator();
 
-function TabTwoNavigator() {
-  return (
-    <TabTwoStack.Navigator>
-      <TabTwoStack.Screen
-        name="TabTwoScreen"
-        component={TabTwoScreen}
-        options={{ headerTitle: 'Tab Two Title' }}
-      />
-    </TabTwoStack.Navigator>
-  );
+function MenuNavigation() {
+    return (
+        <MenuStack.Navigator>
+            <MenuStack.Screen
+                name="Menu"
+                component={MenuCategory}
+                options={{
+                    headerTitle: 'Tất cả danh mục',
+                    headerTintColor: '#fff',
+                    headerStyle: {
+                        backgroundColor: '#D8262F',
+                        height: 80,
+                    }
+                }}
+            />
+        </MenuStack.Navigator>
+    );
+}
+
+const ProductListStack = createStackNavigator<TabTwoParamList>();
+
+function ProductListNavigator() {
+    return (
+        <ProductListStack.Navigator>
+            <ProductListStack.Screen
+                name="ProductList"
+                component={ProductList}
+                options={{
+                    headerTitle: '',
+                    headerLeft: () => (
+                        <HeaderCategory />
+                    ),
+                    headerStyle: {
+                        backgroundColor: '#fff',
+                        height: 100,
+                    }
+                }}
+            />
+        </ProductListStack.Navigator>
+    );
+}
+
+const ProductDetailStack = createStackNavigator();
+
+function ProductDetailNavigation() {
+    return (
+        <ProductDetailStack.Navigator>
+            <ProductDetailStack.Screen
+                name="ProductDetail"
+                component={ProductDetail}
+                options={{
+                    headerTitle: '',
+                    headerLeft: () => (
+                        <HeaderProductDetail />
+                    ),
+                    headerStyle: {
+                        backgroundColor: '#fff',
+                        height: 80,
+                    }
+                }}
+            />
+        </ProductDetailStack.Navigator>
+    );
+}
+
+const AllStack = createStackNavigator();
+function AllStackNavigation() {
+    return (
+        <AllStack.Navigator initialRouteName="Home">
+            <AllStack.Screen
+                name="Home"
+                component={HomePageNavigator}
+                options={{ headerShown: false }}
+            />
+            <AllStack.Screen
+                name="Menu"
+                component={MenuNavigation}
+                options={{ headerShown: false }}
+            />
+            <AllStack.Screen
+                name="ProductCategory"
+                component={ProductListNavigator}
+                options={{ headerShown: false }}
+            />
+            <AllStack.Screen
+                name="ProductDetail"
+                component={ProductDetailNavigation}
+                options={{ headerShown: false }}
+            />
+        </AllStack.Navigator>
+    );
 }