ducht/Hanoicomputer_App
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

sua menu

Browse Source
This commit is contained in:
ducht
2021-03-24 10:19:30 +07:00
parent e7dffeda13
commit 46b60ecb0c
8 changed files with 887 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

359
App.tsx
View File

@@ -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.Screen name="Home" component={HomePage} />
<Drawer.Navigator initialRouteName="Trang chủ">
<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,
},
})

5
components/header/headerMain.tsx
View File

@@ -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>
);

24
components/product/productItem.tsx
View File

@@ -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}>
{productName}
</Text>
<TouchableOpacity onPress={() => navigation.navigate('ProductDetail')}>
<Text style={styles.pNameProduct} numberOfLines={2}>
{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>

1
screens/Login.tsx
View File

@@ -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}>

3
screens/ProductDetail.tsx
View File

@@ -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}>

522
screens/SearchProduct.tsx Normal file
View File

@@ -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,
},
});

20
screens/TabOneScreen.tsx
View File

@@ -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>
<View style={styles.catHomepageItem}>
</TouchableOpacity>
<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>
<View style={styles.catHomepageItem}>
</TouchableOpacity>
<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>
<View style={styles.catHomepageItem}>
</TouchableOpacity>
<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>
);
}

9
screens/TabTwoScreen.tsx
View File

@@ -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>