add cart, login, product search, update navigation

components/header/HeaderAllPage.tsx

@@ -16,11 +16,12 @@ const winWidth = Dimensions.get('window').width; //full width
 const winHeight = Dimensions.get('window').height; //full height
 
 const HeaderHome = () => {
+    const navigation = useNavigation();
     return (
         <View style={styles.headerBox}>
             <Image style={styles.headerBoxLogo} source={require('../../assets/images/logo.png')} />
             <View style={styles.headerBoxSearch}>
-                <TouchableOpacity style={styles.headerBoxSearchButton}>
+                <TouchableOpacity style={styles.headerBoxSearchButton} onPress={() => navigation.navigate('ProductSearch')}>
                     <LinearGradient style={styles.headerBoxSearchBg} colors={['#FF5136', '#D8262F']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>
                         <Ionicons style={styles.headerBoxSearchIcon} name="search-outline" />
                     </LinearGradient>
@@ -33,6 +34,7 @@ const HeaderHome = () => {
 
 const HeaderCategory = () => {
     const [openSearch, setopenSearch] = useState(true);
+    const navigation = useNavigation();
     return (
         <View style={styles.headerCategory}>
             <TouchableOpacity style={styles.headerCategoryBack}>
@@ -44,7 +46,7 @@ const HeaderCategory = () => {
                 </TouchableOpacity>
                 <View style={openSearch ? styles.headerCategorySearchMain : [styles.headerCategorySearchMain, styles.headerCategorySearchMainActive]}>
                     <TextInput style={styles.headerCategorySearchInput} placeholder="Nhập tên sản phẩm tìm kiếm..." />
-                    <TouchableOpacity style={styles.headerCategorySearchSubmit}>
+                    <TouchableOpacity onPress={() => navigation.navigate('ProductSearch')} style={styles.headerCategorySearchSubmit}>
                         <Ionicons style={styles.headerCategorySearchSubmitIcon} name="search-outline" />
                     </TouchableOpacity>
                 </View>
@@ -56,7 +58,7 @@ const HeaderCategory = () => {
                 </TouchableOpacity>
             </View>
             <View style={styles.headerCategoryCart}>
-                <TouchableOpacity style={styles.headerCategoryCartButton}>
+                <TouchableOpacity style={styles.headerCategoryCartButton} onPress={() => navigation.navigate('Cart')}>
                     <Ionicons style={styles.headerCategoryCartIcon} name="cart-outline" />
                     <Text style={styles.headerCategoryCartCount}>0</Text>
                 </TouchableOpacity>
@@ -77,7 +79,29 @@ const HeaderProductDetail = () => {
                 <TouchableOpacity onPress={() => navigation.navigate('Home')} style={styles.boxHeaderProductDetailHome}>
                     <Ionicons style={styles.boxHeaderProductDetailIcon} name="home-outline" />
                 </TouchableOpacity>
-                <TouchableOpacity style={styles.boxHeaderProductDetailCart}>
+                <TouchableOpacity style={styles.boxHeaderProductDetailCart} onPress={() => navigation.navigate('Cart')}>
+                    <Ionicons style={styles.boxHeaderProductDetailIcon} name="cart-outline" />
+                    <Text style={styles.boxHeaderProductDetailCartCount}>0</Text>
+                </TouchableOpacity>
+            </View>
+        </View>
+    )
+}
+
+const HeaderAllOtherPage = (props : {headerTitle: string}) => {
+    const {headerTitle} = props
+    const navigation = useNavigation();
+    return (
+        <View style={styles.boxHeaderProductDetail}>
+            <TouchableOpacity onPress={() => navigation.goBack()} style={styles.boxHeaderProductDetailGoBack}>
+                <Ionicons style={styles.boxHeaderProductDetailIcon} name="chevron-back-outline" />
+            </TouchableOpacity>
+            <Text style={styles.boxHeaderProductDetailTitle}>{headerTitle}</Text>
+            <View style={styles.boxHeaderProductDetailRight}>
+                <TouchableOpacity onPress={() => navigation.navigate('Home')} style={styles.boxHeaderProductDetailHome}>
+                    <Ionicons style={styles.boxHeaderProductDetailIcon} name="home-outline" />
+                </TouchableOpacity>
+                <TouchableOpacity style={styles.boxHeaderProductDetailCart} onPress={() => navigation.navigate('Cart')}>
                     <Ionicons style={styles.boxHeaderProductDetailIcon} name="cart-outline" />
                     <Text style={styles.boxHeaderProductDetailCartCount}>0</Text>
                 </TouchableOpacity>
@@ -87,7 +111,7 @@ const HeaderProductDetail = () => {
 }
 
 
-export { HeaderHome, HeaderCategory, HeaderProductDetail };
+export { HeaderHome, HeaderCategory, HeaderProductDetail, HeaderAllOtherPage };
 
 const styles = StyleSheet.create({
     container: {
@@ -288,4 +312,10 @@ const styles = StyleSheet.create({
         top: 5,
         right: 0,
     },
+    boxHeaderProductDetailTitle: {
+        width: winWidth - 140,
+        textAlign: 'center',
+        fontWeight: 'bold',
+        fontSize: 16,
+    },
 })

components/product/ProductItem.tsx

@@ -17,7 +17,9 @@ const winHeight = Dimensions.get('window').height; //full height
 
 const ProductItemSt = () => {
     return (
-        <View></View>
+        <View>
+            
+        </View>
     )
 }