add cart, login, product search, update navigation

navigation/BottomTabNavigator.tsx

@@ -11,7 +11,10 @@ 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'
+import Cart from '../screens/Cart';
+import Login from '../screens/Login';
+import ProductSearch from '../screens/ProductSearch';
+import { HeaderHome, HeaderCategory, HeaderProductDetail, HeaderAllOtherPage } from '../components/header/HeaderAllPage'
 
 
 const BottomTab = createBottomTabNavigator();
@@ -37,7 +40,7 @@ export default function BottomTabNavigator() {
             />
             <BottomTab.Screen
                 name="Giỏ hàng"
-                component={ProductListNavigator}
+                component={CartNavigation}
                 options={{
                     tabBarIcon: ({ color }) => <TabBarIcon name="cart-outline" color={color} />,
                 }}
@@ -51,7 +54,7 @@ export default function BottomTabNavigator() {
             />
             <BottomTab.Screen
                 name="Tài khoản"
-                component={ProductListNavigator}
+                component={LoginNavigation}
                 options={{
                     tabBarIcon: ({ color }) => <TabBarIcon name="person-outline" color={color} />,
                 }}
@@ -158,6 +161,75 @@ function ProductDetailNavigation() {
     );
 }
 
+const CartStack = createStackNavigator();
+
+function CartNavigation() {
+    return (
+        <CartStack.Navigator>
+            <CartStack.Screen
+                name="Cart"
+                component={Cart}
+                options={{
+                    headerTitle: '',
+                    headerLeft: () => (
+                        <HeaderAllOtherPage headerTitle={'Giỏ hàng'} />
+                    ),
+                    headerStyle: {
+                        backgroundColor: '#fff',
+                        height: 80,
+                    }
+                }}
+            />
+        </CartStack.Navigator>
+    );
+}
+
+const LoginStack = createStackNavigator();
+
+function LoginNavigation() {
+    return (
+        <LoginStack.Navigator>
+            <LoginStack.Screen
+                name="ProductDetail"
+                component={Login}
+                options={{
+                    headerTitle: '',
+                    headerLeft: () => (
+                        <HeaderAllOtherPage headerTitle={'Đăng nhập'} />
+                    ),
+                    headerStyle: {
+                        backgroundColor: '#fff',
+                        height: 80,
+                    }
+                }}
+            />
+        </LoginStack.Navigator>
+    );
+}
+
+const ProductSearchStack = createStackNavigator();
+
+function ProductSearchNavigation() {
+    return (
+        <ProductSearchStack.Navigator>
+            <ProductSearchStack.Screen
+                name="ProductSearch"
+                component={ProductSearch}
+                options={{
+                    headerTitle: '',
+                    headerLeft: () => (
+                        <HeaderAllOtherPage headerTitle={'Tìm kiếm'} />
+                    ),
+                    headerStyle: {
+                        backgroundColor: '#fff',
+                        height: 80,
+                    }
+                }}
+            />
+        </ProductSearchStack.Navigator>
+    );
+}
+
 const AllStack = createStackNavigator();
 function AllStackNavigation() {
     return (
@@ -182,6 +254,21 @@ function AllStackNavigation() {
                 component={ProductDetailNavigation}
                 options={{ headerShown: false }}
             />
+            <AllStack.Screen
+                name="Cart"
+                component={CartNavigation}
+                options={{ headerShown: false }}
+            />
+            <AllStack.Screen
+                name="Login"
+                component={LoginNavigation}
+                options={{ headerShown: false }}
+            />
+            <AllStack.Screen
+                name="ProductSearch"
+                component={ProductSearchNavigation}
+                options={{ headerShown: false }}
+            />
         </AllStack.Navigator>
     );
 }