From 46b60ecb0ce6d8729ed9bf23f13c7141093c27e1 Mon Sep 17 00:00:00 2001 From: ducht Date: Wed, 24 Mar 2021 10:19:30 +0700 Subject: [PATCH] sua menu --- App.tsx | 359 ++++++++++++++++++-- components/header/headerMain.tsx | 5 +- components/product/productItem.tsx | 24 +- screens/Login.tsx | 1 + screens/ProductDetail.tsx | 5 +- screens/SearchProduct.tsx | 522 +++++++++++++++++++++++++++++ screens/TabOneScreen.tsx | 20 +- screens/TabTwoScreen.tsx | 9 + 8 files changed, 887 insertions(+), 58 deletions(-) create mode 100644 screens/SearchProduct.tsx diff --git a/App.tsx b/App.tsx index 2e68f79..321c631 100644 --- a/App.tsx +++ b/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 ( - + - ); } } @@ -68,7 +69,7 @@ const HeaderAllPageOpion = ({ navigation }: { navigation: any }) => { } /* redirect về trang chủ */ -const HomePage = ({ navigation }: { navigation: any }) => { +const HomePage = () => { return ( { ); } + + /* redirect về danh mục */ const ProductList = ({ navigation }: { navigation: any }) => { return ( @@ -95,11 +98,19 @@ const ProductList = ({ navigation }: { navigation: any }) => { const ProductDetailRec = ({ navigation }: { navigation: any }) => { return ( - + ({ + headerTitle: 'Danh sách sản phẩm', + headerLeft: () => ( + navigation.goBack()}> + + Quay lại + + ), + })} /> ); @@ -109,7 +120,7 @@ const CartPage = ({ navigation }: { navigation: any }) => { return ( @@ -121,7 +132,7 @@ const ArticleHomePage = ({ navigation }: { navigation: any }) => { return ( @@ -133,9 +144,17 @@ const ArticleListPage = ({ navigation }: { navigation: any }) => { return ( ({ + headerTitle: 'Danh mục Tin tức', + headerLeft: () => ( + navigation.goBack()}> + + Quay lại + + ), + })} /> ); @@ -145,9 +164,17 @@ const ArticleDetailPage = ({ navigation }: { navigation: any }) => { return ( ({ + headerTitle: 'Chi tiết tin tức', + headerLeft: () => ( + navigation.goBack()}> + + Quay lại + + ), + })} /> ); @@ -157,9 +184,17 @@ const LoginPage = ({ navigation }: { navigation: any }) => { return ( ({ + headerTitle: 'Đăng nhập', + headerLeft: () => ( + navigation.goBack()}> + + Quay lại + + ), + })} /> ); @@ -169,9 +204,17 @@ const RegisterPage = ({ navigation }: { navigation: any }) => { return ( ({ + headerTitle: 'Đăng ký', + headerLeft: () => ( + navigation.goBack()}> + + Quay lại + + ), + })} /> ); @@ -181,9 +224,17 @@ const ForgetPasswordPage = ({ navigation }: { navigation: any }) => { return ( ({ + headerTitle: 'Quên mật khẩu', + headerLeft: () => ( + navigation.goBack()}> + + Quay lại + + ), + })} /> ); @@ -193,9 +244,17 @@ const AboutUsPage = ({ navigation }: { navigation: any }) => { return ( ({ + headerTitle: 'Giới thiệu', + headerLeft: () => ( + navigation.goBack()}> + + Quay lại + + ), + })} /> ); @@ -205,9 +264,17 @@ const ContactUsPage = ({ navigation }: { navigation: any }) => { return ( ({ + headerTitle: 'Liên hệ', + headerLeft: () => ( + navigation.goBack()}> + + Quay lại + + ), + })} /> ); @@ -217,9 +284,17 @@ const BuildPcPage = ({ navigation }: { navigation: any }) => { return ( ({ + headerTitle: 'Xây dựng cấu hình', + headerLeft: () => ( + navigation.goBack()}> + + Quay lại + + ), + })} /> ); @@ -229,32 +304,246 @@ const AccountHomePage = ({ navigation }: { navigation: any }) => { return ( ({ + headerTitle: 'Tài khoản', + headerLeft: () => ( + navigation.goBack()}> + + Quay lại + + ), + })} /> ); } +const AllPage = () => { + return ( + + + ({ + headerTitle: 'Danh mục sản phẩm', + headerLeft: () => ( + navigation.goBack()}> + + Quay lại + + ), + })} + /> + ({ + headerTitle: 'Chi tiết sản phẩm', + headerLeft: () => ( + navigation.goBack()}> + + Quay lại + + ), + })} + /> + ({ + headerTitle: 'Giỏ hàng', + headerLeft: () => ( + navigation.goBack()}> + + Quay lại + + ), + })} + /> + ({ + headerTitle: 'Tin tức', + headerLeft: () => ( + navigation.goBack()}> + + Quay lại + + ), + })} + /> + ({ + headerTitle: 'Danh sách tin tức', + headerLeft: () => ( + navigation.goBack()}> + + Quay lại + + ), + })} + /> + ({ + headerTitle: 'Chi tiết tin tức', + headerLeft: () => ( + navigation.goBack()}> + + Quay lại + + ), + })} + /> + ({ + headerTitle: 'Đăng nhập', + headerLeft: () => ( + navigation.goBack()}> + + Quay lại + + ), + })} + /> + ({ + headerTitle: 'Đăng ký', + headerLeft: () => ( + navigation.goBack()}> + + Quay lại + + ), + })} + /> + ({ + headerTitle: 'Quên mật khẩu', + headerLeft: () => ( + navigation.goBack()}> + + Quay lại + + ), + })} + /> + ({ + headerTitle: 'Giới thiệu', + headerLeft: () => ( + navigation.goBack()}> + + Quay lại + + ), + })} + /> + ({ + headerTitle: 'Liên hệ', + headerLeft: () => ( + navigation.goBack()}> + + Quay lại + + ), + })} + /> + ({ + headerTitle: 'Xây dựng cấu hình', + headerLeft: () => ( + navigation.goBack()}> + + Quay lại + + ), + })} + /> + ({ + headerTitle: 'Tài khoản', + headerLeft: () => ( + navigation.goBack()}> + + Quay lại + + ), + })} + /> + ({ + headerTitle: 'Tìm kiếm', + headerLeft: () => ( + navigation.goBack()}> + + Quay lại + + ), + })} + /> + + ) +} + + const MainContentRouter = () => { return ( - - + + + - - - - - - + ); } +const styles = StyleSheet.create({ + buttonGoBack: { + flexDirection: 'row', + alignItems: 'center', + paddingLeft: 10, + }, + buttonGoBackText: { + fontSize: 16, + }, + buttonGoBackIcon: { + fontSize: 16, + marginRight: 10, + }, +}) + diff --git a/components/header/headerMain.tsx b/components/header/headerMain.tsx index 7396ffb..cfd3a63 100644 --- a/components/header/headerMain.tsx +++ b/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 ( - { Alert.alert('aaaaaaaaaa') }} name="search-outline" size={26} /> + navigation.navigate('SearchProduct')} name="search-outline" size={26} /> ); diff --git a/components/product/productItem.tsx b/components/product/productItem.tsx index f1757fa..2811068 100644 --- a/components/product/productItem.tsx +++ b/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 ( {productSKU} -{discount}% - + navigation.navigate('ProductDetail')} style={styles.pBloxImgProductBao}> - + - - {productName} - + navigation.navigate('ProductDetail')}> + + {productName} + + {formatCurrency(price)} đ {formatCurrency(marketPrice)} đ @@ -45,7 +45,9 @@ const ShowProductItem = (props: { id: number, productName: string, productSKU: s {quantity > 0 ? : } {quantity > 0 ? 'Còn hàng' : 'Hết hàng'} - Giỏ hàng + navigation.navigate('cart')}> + Giỏ hàng + ); @@ -92,7 +94,7 @@ const ItemComboSet = (props: { id: number, productName: string, productSKU: stri - setChecked(!checked)} style={styles.inputComboCheck} /> + setChecked(!checked)} style={styles.inputComboCheck} /> {productName} diff --git a/screens/Login.tsx b/screens/Login.tsx index c08a74a..2462a40 100644 --- a/screens/Login.tsx +++ b/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 ( diff --git a/screens/ProductDetail.tsx b/screens/ProductDetail.tsx index 6173c96..afc05cf 100644 --- a/screens/ProductDetail.tsx +++ b/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 ( @@ -1279,5 +1282,5 @@ const styles = StyleSheet.create({ fontSize: 16, }, boxFormComentFileText: {}, - + }) \ No newline at end of file diff --git a/screens/SearchProduct.tsx b/screens/SearchProduct.tsx new file mode 100644 index 0000000..7c6ea87 --- /dev/null +++ b/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 ( + + + + Trang chủ + + Tìm kiếm + + + + + + + + + + + + + + + + + + + + + + + ); +} + +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 ( + + setModalVisible(true)}> + Thứ tự sản phẩm + + + { setModalVisible(!modalVisible); }}> + setModalVisible(!modalVisible)} style={styles.filterItemContent}> + + + Hãng sản xuất + setModalVisible(!modalVisible)}> + + + + + { + dataBrandFilter.map((item , index) => + + ) + } + + + + + + ) +} + +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 ( + + setModalVisible(true)}> + Khoảng giá + + + { setModalVisible(!modalVisible); }}> + setModalVisible(!modalVisible)} style={styles.filterItemContent}> + + + Khoảng giá + setModalVisible(!modalVisible)}> + + + + + { + dataPriceFilter.map((item , index) => + + ) + } + + + + + + ) +} + +const FilterItem = (props: { name: string }) => { + const { name } = props; + return ( + Alert.alert('danh muc sp')}> + {name} + + ); +} + +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 ( + + + { + productData.map(item => ) + } + + + ) +} + +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 ( + + + { + pagingData.map((item, index) => + Alert.alert('page')}> + {item.name} + + ) + } + + + ) +} + +const ProductCategorySummary = () => { + return( + + NHỮNG ĐIỀU CẦN LƯU Ý KHI CHỌN MUA LAPTOP + Để 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: + 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 + + ) +} + +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, + }, +}); diff --git a/screens/TabOneScreen.tsx b/screens/TabOneScreen.tsx index 0df73e0..c61b8cf 100644 --- a/screens/TabOneScreen.tsx +++ b/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 ( - @@ -69,24 +70,25 @@ const SliderHome = () => { } const CateHome = () => { + const navigation = useNavigation(); return ( - + navigation.navigate('productlist')} style={styles.catHomepageItem}> Danh mục sản phẩm - - + + navigation.navigate('productlist')} style={styles.catHomepageItem}> Chương trình khuyến mại - - + + navigation.navigate('productlist')} style={styles.catHomepageItem}> Sản phẩm vừa xem - - + + navigation.navigate('buildpc')} style={styles.catHomepageItem}> Xây dựng cấu hình - + ); } diff --git a/screens/TabTwoScreen.tsx b/screens/TabTwoScreen.tsx index a119916..7afc7e1 100644 --- a/screens/TabTwoScreen.tsx +++ b/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 (