sua menu

App.tsx

@@ -25,6 +25,8 @@ import AboutUs from './screens/AboutUs';
 import ContactUs from './screens/ContactUs';
 import BuildPc from './screens/BuildPc';
 import AccountHome from './screens/AccountHome';
+import SearchProduct from './screens/SearchProduct';
+import { FontAwesome } from '@expo/vector-icons';
 
 
 
@@ -38,9 +40,8 @@ export default function App() {
     } else {
         return (
             <NavigationContainer>
-                <MainContentRouter />
+                <AllPage />
             </NavigationContainer>
-
         );
     }
 }
@@ -68,7 +69,7 @@ const HeaderAllPageOpion = ({ navigation }: { navigation: any }) => {
 }
 
 /* redirect về trang chủ */
-const HomePage = ({ navigation }: { navigation: any }) => {
+const HomePage = () => {
     return (
         <Stack.Navigator>
             <Stack.Screen
@@ -80,12 +81,14 @@ const HomePage = ({ navigation }: { navigation: any }) => {
     );
 }
 
+
+
 /* redirect về danh mục */
 const ProductList = ({ navigation }: { navigation: any }) => {
     return (
         <Stack.Navigator>
             <Stack.Screen
-                name="homepage"
+                name="productlist"
                 component={TabTwoScreen}
                 options={HeaderAllPageOpion}
             />
@@ -95,11 +98,19 @@ const ProductList = ({ navigation }: { navigation: any }) => {
 
 const ProductDetailRec = ({ navigation }: { navigation: any }) => {
     return (
-        <Stack.Navigator>
+        <Stack.Navigator initialRouteName="ProductDetail">
             <Stack.Screen
-                name="homepage"
+                name="ProductDetail"
                 component={ProductDetail}
-                options={HeaderAllPageOpion}
+                options={({ navigation }) => ({
+                    headerTitle: 'Danh sách sản phẩm',
+                    headerLeft: () => (
+                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
+                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
+                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
+                        </TouchableOpacity>
+                    ),
+                })}
             />
         </Stack.Navigator>
     );
@@ -109,7 +120,7 @@ const CartPage = ({ navigation }: { navigation: any }) => {
     return (
         <Stack.Navigator>
             <Stack.Screen
-                name="homepage"
+                name="cart"
                 component={CartDetail}
                 options={HeaderAllPageOpion}
             />
@@ -121,7 +132,7 @@ const ArticleHomePage = ({ navigation }: { navigation: any }) => {
     return (
         <Stack.Navigator>
             <Stack.Screen
-                name="homepage"
+                name="articlehome"
                 component={ArticleHome}
                 options={HeaderAllPageOpion}
             />
@@ -133,9 +144,17 @@ const ArticleListPage = ({ navigation }: { navigation: any }) => {
     return (
         <Stack.Navigator>
             <Stack.Screen
-                name="homepage"
+                name="articlelist"
                 component={ArticleList}
-                options={HeaderAllPageOpion}
+                options={({ navigation }) => ({
+                    headerTitle: 'Danh mục Tin tức',
+                    headerLeft: () => (
+                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
+                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
+                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
+                        </TouchableOpacity>
+                    ),
+                })}
             />
         </Stack.Navigator>
     );
@@ -145,9 +164,17 @@ const ArticleDetailPage = ({ navigation }: { navigation: any }) => {
     return (
         <Stack.Navigator>
             <Stack.Screen
-                name="homepage"
+                name="articledetail"
                 component={ArticleDetail}
-                options={HeaderAllPageOpion}
+                options={({ navigation }) => ({
+                    headerTitle: 'Chi tiết tin tức',
+                    headerLeft: () => (
+                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
+                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
+                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
+                        </TouchableOpacity>
+                    ),
+                })}
             />
         </Stack.Navigator>
     );
@@ -157,9 +184,17 @@ const LoginPage = ({ navigation }: { navigation: any }) => {
     return (
         <Stack.Navigator>
             <Stack.Screen
-                name="homepage"
+                name="login"
                 component={Login}
-                options={HeaderAllPageOpion}
+                options={({ navigation }) => ({
+                    headerTitle: 'Đăng nhập',
+                    headerLeft: () => (
+                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
+                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
+                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
+                        </TouchableOpacity>
+                    ),
+                })}
             />
         </Stack.Navigator>
     );
@@ -169,9 +204,17 @@ const RegisterPage = ({ navigation }: { navigation: any }) => {
     return (
         <Stack.Navigator>
             <Stack.Screen
-                name="homepage"
+                name="register"
                 component={Register}
-                options={HeaderAllPageOpion}
+                options={({ navigation }) => ({
+                    headerTitle: 'Đăng ký',
+                    headerLeft: () => (
+                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
+                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
+                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
+                        </TouchableOpacity>
+                    ),
+                })}
             />
         </Stack.Navigator>
     );
@@ -181,9 +224,17 @@ const ForgetPasswordPage = ({ navigation }: { navigation: any }) => {
     return (
         <Stack.Navigator>
             <Stack.Screen
-                name="homepage"
+                name="forgetpassword"
                 component={ForgetPassword}
-                options={HeaderAllPageOpion}
+                options={({ navigation }) => ({
+                    headerTitle: 'Quên mật khẩu',
+                    headerLeft: () => (
+                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
+                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
+                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
+                        </TouchableOpacity>
+                    ),
+                })}
             />
         </Stack.Navigator>
     );
@@ -193,9 +244,17 @@ const AboutUsPage = ({ navigation }: { navigation: any }) => {
     return (
         <Stack.Navigator>
             <Stack.Screen
-                name="homepage"
+                name="aboutus"
                 component={AboutUs}
-                options={HeaderAllPageOpion}
+                options={({ navigation }) => ({
+                    headerTitle: 'Giới thiệu',
+                    headerLeft: () => (
+                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
+                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
+                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
+                        </TouchableOpacity>
+                    ),
+                })}
             />
         </Stack.Navigator>
     );
@@ -205,9 +264,17 @@ const ContactUsPage = ({ navigation }: { navigation: any }) => {
     return (
         <Stack.Navigator>
             <Stack.Screen
-                name="homepage"
+                name="contactus"
                 component={ContactUs}
-                options={HeaderAllPageOpion}
+                options={({ navigation }) => ({
+                    headerTitle: 'Liên hệ',
+                    headerLeft: () => (
+                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
+                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
+                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
+                        </TouchableOpacity>
+                    ),
+                })}
             />
         </Stack.Navigator>
     );
@@ -217,9 +284,17 @@ const BuildPcPage = ({ navigation }: { navigation: any }) => {
     return (
         <Stack.Navigator>
             <Stack.Screen
-                name="homepage"
+                name="buildpc"
                 component={BuildPc}
-                options={HeaderAllPageOpion}
+                options={({ navigation }) => ({
+                    headerTitle: 'Xây dựng cấu hình',
+                    headerLeft: () => (
+                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
+                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
+                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
+                        </TouchableOpacity>
+                    ),
+                })}
             />
         </Stack.Navigator>
     );
@@ -229,32 +304,246 @@ const AccountHomePage = ({ navigation }: { navigation: any }) => {
     return (
         <Stack.Navigator>
             <Stack.Screen
-                name="homepage"
+                name="accounthome"
                 component={AccountHome}
-                options={HeaderAllPageOpion}
+                options={({ navigation }) => ({
+                    headerTitle: 'Tài khoản',
+                    headerLeft: () => (
+                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
+                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
+                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
+                        </TouchableOpacity>
+                    ),
+                })}
             />
         </Stack.Navigator>
     );
 }
 
+const AllPage = () => {
+    return (
+        <Stack.Navigator initialRouteName="homepage">
+            <Stack.Screen
+                name="homepage"
+                component={MainContentRouter}
+                options={{ headerShown: false }}
+            />
+            <Stack.Screen
+                name="productlist"
+                component={TabTwoScreen}
+                options={({ navigation }) => ({
+                    headerTitle: 'Danh mục sản phẩm',
+                    headerLeft: () => (
+                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
+                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
+                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
+                        </TouchableOpacity>
+                    ),
+                })}
+            />
+            <Stack.Screen
+                name="ProductDetail"
+                component={ProductDetail}
+                options={({ navigation }) => ({
+                    headerTitle: 'Chi tiết sản phẩm',
+                    headerLeft: () => (
+                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
+                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
+                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
+                        </TouchableOpacity>
+                    ),
+                })}
+            />
+            <Stack.Screen
+                name="cart"
+                component={CartDetail}
+                options={({ navigation }) => ({
+                    headerTitle: 'Giỏ hàng',
+                    headerLeft: () => (
+                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
+                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
+                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
+                        </TouchableOpacity>
+                    ),
+                })}
+            />
+            <Stack.Screen
+                name="articlehome"
+                component={ArticleHome}
+                options={({ navigation }) => ({
+                    headerTitle: 'Tin tức',
+                    headerLeft: () => (
+                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
+                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
+                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
+                        </TouchableOpacity>
+                    ),
+                })}
+            />
+            <Stack.Screen
+                name="articlelist"
+                component={ArticleList}
+                options={({ navigation }) => ({
+                    headerTitle: 'Danh sách tin tức',
+                    headerLeft: () => (
+                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
+                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
+                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
+                        </TouchableOpacity>
+                    ),
+                })}
+            />
+            <Stack.Screen
+                name="articledetail"
+                component={ArticleDetail}
+                options={({ navigation }) => ({
+                    headerTitle: 'Chi tiết tin tức',
+                    headerLeft: () => (
+                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
+                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
+                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
+                        </TouchableOpacity>
+                    ),
+                })}
+            />
+            <Stack.Screen
+                name="login"
+                component={Login}
+                options={({ navigation }) => ({
+                    headerTitle: 'Đăng nhập',
+                    headerLeft: () => (
+                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
+                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
+                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
+                        </TouchableOpacity>
+                    ),
+                })}
+            />
+            <Stack.Screen
+                name="register"
+                component={Register}
+                options={({ navigation }) => ({
+                    headerTitle: 'Đăng ký',
+                    headerLeft: () => (
+                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
+                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
+                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
+                        </TouchableOpacity>
+                    ),
+                })}
+            />
+            <Stack.Screen
+                name="forgetpassword"
+                component={ForgetPassword}
+                options={({ navigation }) => ({
+                    headerTitle: 'Quên mật khẩu',
+                    headerLeft: () => (
+                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
+                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
+                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
+                        </TouchableOpacity>
+                    ),
+                })}
+            />
+            <Stack.Screen
+                name="aboutus"
+                component={AboutUs}
+                options={({ navigation }) => ({
+                    headerTitle: 'Giới thiệu',
+                    headerLeft: () => (
+                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
+                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
+                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
+                        </TouchableOpacity>
+                    ),
+                })}
+            />
+            <Stack.Screen
+                name="contactus"
+                component={ContactUs}
+                options={({ navigation }) => ({
+                    headerTitle: 'Liên hệ',
+                    headerLeft: () => (
+                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
+                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
+                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
+                        </TouchableOpacity>
+                    ),
+                })}
+            />
+            <Stack.Screen
+                name="buildpc"
+                component={BuildPc}
+                options={({ navigation }) => ({
+                    headerTitle: 'Xây dựng cấu hình',
+                    headerLeft: () => (
+                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
+                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
+                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
+                        </TouchableOpacity>
+                    ),
+                })}
+            />
+            <Stack.Screen
+                name="accounthome"
+                component={AccountHome}
+                options={({ navigation }) => ({
+                    headerTitle: 'Tài khoản',
+                    headerLeft: () => (
+                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
+                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
+                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
+                        </TouchableOpacity>
+                    ),
+                })}
+            />
+            <Stack.Screen
+                name="search"
+                component={SearchProduct}
+                options={({ navigation }) => ({
+                    headerTitle: 'Tìm kiếm',
+                    headerLeft: () => (
+                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
+                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
+                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
+                        </TouchableOpacity>
+                    ),
+                })}
+            />
+        </Stack.Navigator>
+    )
+}
+
+
 const MainContentRouter = () => {
     return (
-        <Drawer.Navigator>
+        <Drawer.Navigator initialRouteName="Trang chủ">
-            <Drawer.Screen name="Home" component={HomePage} />
+            <Drawer.Screen name="Trang chủ" component={HomePage} />
+            <Drawer.Screen name="Giới thiệu" component={AboutUsPage} />
             <Drawer.Screen name="Laptop, Máy Tính Xách Tay" component={ProductList} />
-            <Drawer.Screen name="Trang san pham" component={ProductDetailRec} />
-            <Drawer.Screen name="cart" component={CartPage} />
             <Drawer.Screen name="Tin tức" component={ArticleHomePage} />
             <Drawer.Screen name="Tin khuyến mại" component={ArticleListPage} />
-            <Drawer.Screen name="Chi tiết tin" component={ArticleDetailPage} />
             <Drawer.Screen name="Đăng nhập" component={LoginPage} />
             <Drawer.Screen name="Đăng Ký" component={RegisterPage} />
-            <Drawer.Screen name="Quên mật khẩu" component={ForgetPasswordPage} />
-            <Drawer.Screen name="Giới thiệu" component={AboutUsPage} />
-            <Drawer.Screen name="Liên hệ" component={ContactUsPage} />
             <Drawer.Screen name="Xây dựng cấu hình" component={BuildPcPage} />
             <Drawer.Screen name="Tài khoản" component={AccountHomePage} />
+            <Drawer.Screen name="Liên hệ" component={ContactUsPage} />
         </Drawer.Navigator>
     );
 }
 
+const styles = StyleSheet.create({
+    buttonGoBack: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingLeft: 10,
+    },
+    buttonGoBackText: {
+        fontSize: 16,
+    },
+    buttonGoBackIcon: {
+        fontSize: 16,
+        marginRight: 10,
+    },
+})
+

components/header/headerMain.tsx

@@ -6,7 +6,7 @@ import { Text, View, } from '../Themed';
 import { TextInput } from 'react-native-gesture-handler';
 import { Ionicons, FontAwesome } from '@expo/vector-icons';
 import { createDrawerNavigator, DrawerItemList, DrawerItem, DrawerContentScrollView } from '@react-navigation/drawer';
-import { NavigationContainer } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import Animated, { Easing } from 'react-native-reanimated';
 
@@ -38,11 +38,12 @@ const Header = ({props} : {props : any}) => {
 
 
 const MainSeach = () => {
+    const navigation = useNavigation();
     return (
         <View style={styles.boxSearch}>
             <View style={styles.boxSearchBo}>
                 <TextInput style={styles.inputSearch} placeholder="Nhập tên, mã sản phẩm" autoCapitalize="none" />
-                <Ionicons style={styles.buttonSearch} onPress={() => { Alert.alert('aaaaaaaaaa') }} name="search-outline" size={26} />
+                <Ionicons style={styles.buttonSearch} onPress={() => navigation.navigate('SearchProduct')} name="search-outline" size={26} />
             </View>
         </View>
     );

components/product/productItem.tsx

@@ -3,11 +3,9 @@ import { useState } from 'react';
 import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Pressable } from 'react-native';
 import { Text, View, } from '../Themed';
 import { Ionicons, FontAwesome } from '@expo/vector-icons';
-import ProductDetail from '../../screens/ProductDetail';
 import { createDrawerNavigator, DrawerItemList, DrawerItem, DrawerContentScrollView } from '@react-navigation/drawer';
-import { NavigationContainer } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
 import { createStackNavigator, StackScreenProps } from '@react-navigation/stack';
-import { NativeRouter, Route, Link } from "react-router-native";
 import { TextInput } from 'react-native-gesture-handler';
 import { Checkbox } from 'react-native-paper';
 
@@ -24,20 +22,22 @@ const ShowProductItem = (props: { id: number, productName: string, productSKU: s
 
     const { id, productName, productSKU, productImage, price, marketPrice, quantity, privateStyle } = props;
     const discount = Math.ceil(100 - (price / marketPrice * 100));
-
+    const navigation = useNavigation();
 
     return (
         <View style={[styles.itemProduct, privateStyle]}>
             <View style={styles.pBloxImgProduct}>
                 <Text style={styles.pSkuProduct}>{productSKU}</Text>
                 <Text style={styles.pDiscountProduct}>-{discount}%</Text>
-                <View style={styles.pBloxImgProductBao}>
+                <Pressable onPress={() => navigation.navigate('ProductDetail')} style={styles.pBloxImgProductBao}>
                     <Image style={styles.pImgProduct} source={{ uri: productImage.large }} />
-                </View>
+                </Pressable>
             </View>
-            <Text style={styles.pNameProduct} numberOfLines={2}>
+            <TouchableOpacity onPress={() => navigation.navigate('ProductDetail')}>
-                {productName}
+                <Text style={styles.pNameProduct} numberOfLines={2}>
-            </Text>
+                    {productName}
+                </Text>
+            </TouchableOpacity>
             <Text style={styles.priceProduct}>{formatCurrency(price)} đ</Text>
             <Text style={styles.oldPriceProduct}>{formatCurrency(marketPrice)} đ</Text>
             <View style={styles.pBottonProduct}>
@@ -45,7 +45,9 @@ const ShowProductItem = (props: { id: number, productName: string, productSKU: s
                     {quantity > 0 ? <Ionicons style={styles.pStatusProductIcon} name="checkmark-outline" size={13} /> : <Ionicons style={styles.pStatusProductIcon} name="close-outline" size={13} />}
                     {quantity > 0 ? 'Còn hàng' : 'Hết hàng'}
                 </Text>
-                <Text style={styles.pCartProduct}><Ionicons style={styles.pCartProductIcon} name="cart-outline" size={13} />Giỏ hàng</Text>
+                <TouchableOpacity onPress={() => navigation.navigate('cart')}>
+                    <Text style={styles.pCartProduct}><Ionicons style={styles.pCartProductIcon} name="cart-outline" size={13} />Giỏ hàng</Text>
+                </TouchableOpacity>
             </View>
         </View>
     );
@@ -92,7 +94,7 @@ const ItemComboSet = (props: { id: number, productName: string, productSKU: stri
                 </View>
             </View>
             <View style={styles.pNameProductAll}>
-                <Checkbox.IOS status={checked ? 'checked' : 'unchecked'} onPress={() =>  setChecked(!checked)} style={styles.inputComboCheck} />
+                <Checkbox.IOS status={checked ? 'checked' : 'unchecked'} onPress={() => setChecked(!checked)} style={styles.inputComboCheck} />
                 <Text style={[styles.pNameProduct, styles.pNameProductCombo]} numberOfLines={2}>
                     {productName}
                 </Text>

screens/Login.tsx

@@ -15,6 +15,7 @@ import { RadioButton, Checkbox } from 'react-native-paper';
 import { Picker } from '@react-native-picker/picker';
 import { ArticleItem } from '../components/article/ArticleItem';
 
+
 export default function Login() {
     return (
         <SafeAreaView style={styles.container}>

screens/ProductDetail.tsx

@@ -11,11 +11,14 @@ import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-ta
 import YoutubePlayer from "react-native-youtube-iframe";
 import { PolicyFooter, Social, ShowroomList, FooterInfo } from '../components/footer/footerMain';
 
+
 import EditScreenInfo from '../components/EditScreenInfo';
 import { Text, View, } from '../components/Themed';
 import useColorScheme from '../hooks/useColorScheme';
 import { TextInput } from 'react-native-gesture-handler';
 
+
+
 export default function ProductDetail() {
     return (
         <SafeAreaView style={styles.container}>

screens/SearchProduct.tsx

@@ -0,0 +1,522 @@
+import 'react-native-gesture-handler';
+import * as React from 'react';
+import { useState } from 'react';
+import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable } from 'react-native';
+import Constants from 'expo-constants';
+import { Ionicons, FontAwesome } from '@expo/vector-icons';
+import { PolicyFooter, Social, ShowroomList, FooterInfo } from '../components/footer/footerMain';
+import { ShowProductItem } from '../components/product/productItem';
+import { Text, View, } from '../components/Themed';
+
+export default function SearchProduct() {
+
+    const [showFilter, setFilter] = useState(false);
+
+
+    return (
+        <SafeAreaView style={styles.container}>
+            <ScrollView>
+                <View style={styles.brecrumb}>
+                    <Text style={styles.brecrumbText}>Trang chủ</Text>
+                    <FontAwesome style={styles.brecrumbIcon} name="angle-right" />
+                    <Text style={styles.brecrumbTextLast}>Tìm kiếm</Text>
+                </View>
+
+                <View style={styles.listFilter}>
+                    <FilterBrand />
+                    <FilterPrice />
+                </View>
+
+                <ShowProductListCategory />
+
+                <Paging />
+
+                <ProductCategorySummary />
+
+                <PolicyFooter />
+
+                <Social />
+
+                <ShowroomList />
+
+                <FooterInfo />
+            </ScrollView>
+        </SafeAreaView>
+    );
+}
+
+const winWidth = Dimensions.get('window').width; //full width
+const winHeight = Dimensions.get('window').height; //full height
+const halfWinWidth = winWidth / 2;
+const ratio = winWidth / 930; //541 is actual image width
+
+type ItemTyep = {id:string, title: string}
+
+const FilterBrand = () => {
+    const [modalVisible, setModalVisible] = useState(false);
+    const dataBrandFilter = [
+        {
+            url: '/',
+            name: 'Acer',
+        },
+        {
+            url: '/',
+            name: 'Asus',
+        },
+        {
+            url: '/',
+            name: 'HP',
+        },
+        {
+            url: '/',
+            name: 'Dell',
+        },
+        {
+            url: '/',
+            name: 'Apple',
+        },
+    ]
+    return (
+        <View style={styles.filterBox}>
+            <TouchableOpacity style={styles.filterBoxTitle} onPress={() => setModalVisible(true)}>
+                <Text style={styles.filterBoxTitleName}>Thứ tự sản phẩm</Text>
+                <FontAwesome style={styles.filterBoxTitleIcon} name="caret-down" />
+            </TouchableOpacity>
+            <Modal visible={modalVisible} animationType="slide" transparent={true} onRequestClose={() => { setModalVisible(!modalVisible); }}>
+                <Pressable onPress={() => setModalVisible(!modalVisible)} style={styles.filterItemContent}>
+                    <View style={styles.filterItemList}>
+                        <View style={styles.filterItemListTitle}>
+                            <Text style={styles.filterItemListTitleName}>Hãng sản xuất</Text>
+                            <Pressable onPress={() => setModalVisible(!modalVisible)}>
+                                <FontAwesome style={styles.filterItemListClose} name="times" />
+                            </Pressable>
+                        </View>
+                        <ScrollView>
+                            {
+                                dataBrandFilter.map((item , index) =>
+                                    <FilterItem key={index} name={item.name} />
+                                )
+                            }
+                        </ScrollView>
+                    </View>
+                </Pressable>
+            </Modal>
+        </View>
+    )
+}
+
+const FilterPrice = () => {
+    const [modalVisible, setModalVisible] = useState(false);
+    const dataPriceFilter = [
+        {
+            url: '/',
+            name: '1000000',
+        },
+        {
+            url: '/',
+            name: '2000000',
+        },
+        {
+            url: '/',
+            name: '3000000',
+        },
+        {
+            url: '/',
+            name: '4000000',
+        },
+        {
+            url: '/',
+            name: '5000000',
+        },
+    ]
+    return (
+        <View style={styles.filterBox}>
+            <TouchableOpacity style={styles.filterBoxTitle} onPress={() => setModalVisible(true)}>
+                <Text style={styles.filterBoxTitleName}>Khoảng giá</Text>
+                <FontAwesome style={styles.filterBoxTitleIcon} name="caret-down" />
+            </TouchableOpacity>
+            <Modal visible={modalVisible} animationType="slide" transparent={true} onRequestClose={() => { setModalVisible(!modalVisible); }}>
+                <Pressable onPress={() => setModalVisible(!modalVisible)} style={styles.filterItemContent}>
+                    <View style={styles.filterItemList}>
+                        <View style={styles.filterItemListTitle}>
+                            <Text style={styles.filterItemListTitleName}>Khoảng giá</Text>
+                            <Pressable onPress={() => setModalVisible(!modalVisible)}>
+                                <FontAwesome style={styles.filterItemListClose} name="times" />
+                            </Pressable>
+                        </View>
+                        <ScrollView>
+                            {
+                                dataPriceFilter.map((item , index) =>
+                                    <FilterItem key={index} name={item.name} />
+                                )
+                            }
+                        </ScrollView>
+                    </View>
+                </Pressable>
+            </Modal>
+        </View>
+    )
+}
+
+const FilterItem = (props: { name: string }) => {
+    const { name } = props;
+    return (
+        <Pressable style={styles.filterItem} onPress={() => Alert.alert('danh muc sp')}>
+            <Text style={styles.filterItemName}>{name}</Text>
+        </Pressable>
+    );
+}
+
+const ShowProductListCategory = () => {
+
+    const itemProductStyle = {
+        width: halfWinWidth,
+        borderBottomWidth: 1,
+        borderBottomColor: '#e8e8e8',
+        borderRightWidth: 1,
+        borderRightColor: '#e8e8e8',
+    }
+    const productData = [
+        {
+            id: 1,
+            productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
+            productSKU: 'TESTSKU',
+            productImage: {
+                small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+                medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+                large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+                original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+            },
+            price: 30000000,
+            marketPrice: 50000000,
+            quantity: 1,
+        },
+        {
+            id: 2,
+            productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
+            productSKU: 'TESTSKU',
+            productImage: {
+                small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+                medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+                large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+                original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+            },
+            price: 25000000,
+            marketPrice: 50000000,
+            quantity: 0,
+        },
+        {
+            id: 3,
+            productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
+            productSKU: 'TESTSKU',
+            productImage: {
+                small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+                medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+                large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+                original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+            },
+            price: 35000000,
+            marketPrice: 50000000,
+            quantity: 1,
+        },
+        {
+            id: 4,
+            productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
+            productSKU: 'TESTSKU',
+            productImage: {
+                small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+                medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+                large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+                original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+            },
+            price: 40000000,
+            marketPrice: 50000000,
+            quantity: 1,
+        },
+        {
+            id: 5,
+            productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
+            productSKU: 'TESTSKU',
+            productImage: {
+                small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+                medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+                large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+                original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+            },
+            price: 30000000,
+            marketPrice: 50000000,
+            quantity: 1,
+        },
+    ]
+
+    return (
+        <View style={styles.boxProductCategory}>
+            <View style={styles.listProductCategory}>
+                {
+                    productData.map(item => <ShowProductItem key={item.id} id={item.id} productName={item.productName}
+                        productSKU={item.productSKU} productImage={item.productImage} price={item.price} marketPrice={item.marketPrice} quantity={item.quantity} privateStyle={itemProductStyle}
+                    />)
+                }
+            </View>
+        </View>
+    )
+}
+
+const Paging = () => {
+
+    const pagingData = [
+        {
+            url: '/',
+            name: 1,
+            isCurrent: 1,
+        },
+        {
+            url: '/',
+            name: 2,
+            isCurrent: 0,
+        },
+        {
+            url: '/',
+            name: 3,
+            isCurrent: 0,
+        },
+        {
+            url: '/',
+            name: 4,
+            isCurrent: 0,
+        },
+        {
+            url: '/',
+            name: 5,
+            isCurrent: 0,
+        }
+    ]
+
+    return (
+        <View style={styles.boxPaging}>
+            <View style={styles.boxPagingList}>
+                {
+                    pagingData.map((item, index) => 
+                        <Pressable key={index} style={item.isCurrent == 1 ? styles.boxPagingItemCurrent : styles.boxPagingItem} onPress={() => Alert.alert('page')}>
+                            <Text style={item.isCurrent == 1 ? styles.boxPagingItemCurrentText : styles.boxPagingItemText}>{item.name}</Text>
+                        </Pressable>
+                    )
+                }
+            </View>
+        </View>
+    )
+}
+
+const ProductCategorySummary = () => {
+    return(
+        <View style={styles.boxProductCategorySummary}>
+            <Text>NHỮNG ĐIỀU CẦN LƯU Ý KHI CHỌN MUA LAPTOP</Text>
+            <Text>Để có thể sở hữu được một sản phẩm chất lượng và ưng ý nhất thì bạn cần xem xét các yếu tố như sau khi mua laptop:</Text>
+            <Text>Tốt nhất là bạn nên lựa chọn những laptop có thương hiệu nổi tiếng. Điều này phần nào đã chứng minh được chất lượng của laptop. Những thương hiệu được nhiều người ưa chuộng trong thời gian dài thì chắc chắn là sản phẩm có các ưu điểm nổi bật, mang đến nhiều giá trị tối ưu cho người dùng khi sử dụng sản phẩm. Khi đã chọn các thương hiệu nổi tiếng thì hàng chính hãng cũng là điều bạn nên đặc biệt quan tâm bởi vì hàng giả, hàng nhái hiện nay trên thị trường có rất nhiều</Text>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#fff',
+    },
+    title: {
+        fontSize: 20,
+        fontWeight: 'bold',
+    },
+    brecrumb: {
+        display: 'flex',
+        width: winWidth,
+        paddingLeft: 10,
+        paddingRight: 10,
+        flexDirection: 'row',
+        height: 18,
+        alignItems: 'center',
+        marginTop: 10,
+        marginBottom: 10,
+    },
+    brecrumbText: {
+        fontSize: 13,
+        color: '#222',
+    },
+    brecrumbTextLast: {
+        fontSize: 13,
+        color: '#b7b7b7',
+    },
+    brecrumbIcon: {
+        fontSize: 13,
+        color: '#222',
+        marginLeft: 6,
+        marginRight: 6
+    },
+    listCategoryChild: {
+        width: winWidth,
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between',
+        paddingLeft: 10,
+        paddingRight: 10,
+    },
+    listCategoryChildItem: {
+        width: halfWinWidth - 15,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'row',
+        height: 36,
+        backgroundColor: '#243a76',
+        marginBottom: 10,
+        borderRadius: 5,
+    },
+    listCategoryChildName: {
+        color: '#fff',
+        fontSize: 14,
+    },
+    listFilter: {
+        width: winWidth,
+        paddingLeft: 10,
+        paddingRight: 10,
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between',
+    },
+    filterBox: {
+        width: halfWinWidth - 15,
+        position: 'relative',
+        marginBottom: 10,
+        zIndex: -1,
+    },
+    filterBox1: {
+        zIndex: 1,
+    },
+    filterBoxTitle: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        flexDirection: 'row',
+        height: 36,
+        backgroundColor: '#dcdcdc',
+        borderRadius: 5,
+        paddingLeft: 10,
+        paddingRight: 10,
+        zIndex: 1,
+        position: 'relative',
+    },
+    filterItemListTitleName: {
+        fontSize: 16,
+        fontWeight: 'bold',
+        textTransform: 'uppercase',
+        color: '#222',
+    },
+    filterItemListClose: {
+        fontSize: 16,
+    },
+    filterBoxTitleName: {
+    },
+    filterBoxTitleIcon: {},
+    filterItemContent: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        position: 'relative',
+        zIndex: 1,
+    },
+    filterItemList: {
+        width: winWidth - 30,
+        maxWidth: 300,
+        height: 450,
+        backgroundColor: '#fff',
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 0,
+        },
+        shadowOpacity: 2.22,
+        shadowRadius: 2.22,
+        elevation: 3,
+        borderRadius: 5,
+        overflow: 'hidden',
+        position: 'relative',
+        zIndex: 2,
+    },
+    filterItemListTitle: {
+        height: 40,
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        flexDirection: 'row',
+        borderBottomWidth: 1,
+        borderBottomColor: '#e1e1e1',
+        paddingLeft: 10,
+        paddingRight: 10,
+        marginBottom: 10,
+    },
+    filterItem: {
+        width: '100%',
+        height: 30,
+        paddingLeft: 10,
+        paddingRight: 10,
+        alignItems: 'center',
+        flexDirection: 'row',
+    },
+    filterItemName: {},
+    boxProductCategory: {
+        width: winWidth,
+    },
+    listProductCategory: {
+        flexWrap: 'wrap',
+        display: 'flex',
+        flexDirection: 'row',
+        marginTop: 10,
+        borderTopColor: '#e8e8e8',
+        borderTopWidth: 1,
+    },
+    boxPaging: {
+        width: winWidth,
+        marginTop: 20,
+        marginBottom: 20,
+    },
+    boxPagingList: {
+        display: 'flex',
+        justifyContent: 'center',
+        flexDirection: 'row',
+    },
+    boxPagingItemCurrent: {
+        paddingHorizontal: 8,
+        paddingVertical: 5,
+        lineHeight: 16,
+        marginHorizontal: 2,
+        borderWidth: 1,
+        borderColor: '#bbb',
+        borderRadius: 3,
+        backgroundColor: '#243a76'
+    },
+    boxPagingItem: {
+        paddingHorizontal: 8,
+        paddingVertical: 5,
+        lineHeight: 16,
+        marginHorizontal: 2,
+        borderWidth: 1,
+        borderColor: '#bbb',
+        borderRadius: 3,
+    },
+    boxPagingItemCurrentText: {
+        color: '#fff',
+        fontSize: 14,
+    },
+    boxPagingItemText: {
+        color: '#333',
+        fontSize: 14,
+    },
+    boxProductCategorySummary: {
+        paddingLeft: 10,
+        paddingRight: 10,
+        marginBottom: 20,
+    },
+});

screens/TabOneScreen.tsx

@@ -13,16 +13,17 @@ import { ShowProductItem } from '../components/product/productItem';
 import EditScreenInfo from '../components/EditScreenInfo';
 import { Text, View, } from '../components/Themed';
 import useColorScheme from '../hooks/useColorScheme';
+import { useNavigation } from '@react-navigation/native';
 
 var winWidth = Dimensions.get('window').width; //full width
 var winHeight = Dimensions.get('window').height; //full height
 const ratio = winWidth / 930; //541 is actual image width
+import { Header, MainSeach } from '../components/header/headerMain';
 
 export default function TabOneScreen() {
     return (
         <SafeAreaView style={styles.container}>
             <ScrollView>
-
                 <SliderHome />
 
                 <CateHome />
@@ -69,24 +70,25 @@ const SliderHome = () => {
 }
 
 const CateHome = () => {
+    const navigation = useNavigation();
     return (
         <View style={styles.catHomepage}>
-            <View style={styles.catHomepageItem}>
+            <TouchableOpacity onPress={() => navigation.navigate('productlist')} style={styles.catHomepageItem}>
                 <Ionicons style={styles.catHomepageIcon} name="list-outline" size={28} />
                 <Text style={styles.catHomepageText}>Danh mục sản phẩm</Text>
-            </View>
+            </TouchableOpacity>
-            <View style={styles.catHomepageItem}>
+            <TouchableOpacity onPress={() => navigation.navigate('productlist')} style={styles.catHomepageItem}>
                 <Ionicons style={styles.catHomepageIcon} name="pricetags-outline" size={28} />
                 <Text style={styles.catHomepageText}>Chương trình khuyến mại</Text>
-            </View>
+            </TouchableOpacity>
-            <View style={styles.catHomepageItem}>
+            <TouchableOpacity onPress={() => navigation.navigate('productlist')} style={styles.catHomepageItem}>
                 <Ionicons style={styles.catHomepageIcon} name="search-outline" size={28} />
                 <Text style={styles.catHomepageText}>Sản phẩm vừa xem</Text>
-            </View>
+            </TouchableOpacity>
-            <View style={styles.catHomepageItem}>
+            <TouchableOpacity onPress={() => navigation.navigate('buildpc')} style={styles.catHomepageItem}>
                 <Ionicons style={styles.catHomepageIcon} name="build-outline" size={28} />
                 <Text style={styles.catHomepageText}>Xây dựng cấu hình</Text>
-            </View>
+            </TouchableOpacity>
         </View>
     );
 }

screens/TabTwoScreen.tsx

@@ -9,16 +9,25 @@ import Swiper from 'react-native-swiper';
 import styled from 'styled-components';
 import { PolicyFooter, Social, ShowroomList, FooterInfo } from '../components/footer/footerMain';
 import { ShowProductItem } from '../components/product/productItem';
+import ProductDetail from '../screens/ProductDetail';
 
 import EditScreenInfo from '../components/EditScreenInfo';
 import { Text, View, } from '../components/Themed';
 import useColorScheme from '../hooks/useColorScheme';
 import TabOneScreen from './TabOneScreen';
+import { createDrawerNavigator, DrawerItemList, DrawerItem, DrawerContentScrollView } from '@react-navigation/drawer';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
+import { createStackNavigator, StackScreenProps } from '@react-navigation/stack';
+
+const Stack = createStackNavigator();
+const Drawer = createDrawerNavigator();
+
 
 export default function TabTwoScreen() {
 
     const [showFilter, setFilter] = useState(false);
 
+
     return (
         <SafeAreaView style={styles.container}>
             <ScrollView>