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

demo app hanoicomputer home category productdetail cart

Browse Source
This commit is contained in:
ducht
2021-03-16 17:00:55 +07:00
commit 6db1634f60
35 changed files with 36093 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

492
screens/Cart.tsx Normal file
View File

@@ -0,0 +1,492 @@
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, Share } from 'react-native';
import Constants from 'expo-constants';
import { Ionicons, FontAwesome } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
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';
import { RadioButton, Checkbox } from 'react-native-paper';
import { Picker } from '@react-native-picker/picker';
export default function CartDetail() {
return (
<SafeAreaView style={styles.container}>
<ScrollView>
<View style={styles.boxCartPage}>
<View style={styles.boxCartPageHeader}>
<View style={styles.boxCartPageBackHome}>
<Pressable>
<Ionicons style={styles.boxCartPageBackHomeIcon} name="arrow-back-outline" />
</Pressable>
<Text style={styles.boxCartPageBackHomeText}>Giỏ hàng</Text>
</View>
<Pressable style={styles.boxCartPageDeleteAll}>
<Text style={styles.boxCartPageDeleteAllText}>Xóa toàn bộ</Text>
</Pressable>
</View>
<View style={styles.boxCartPageListProduct}>
<CartItem />
</View>
<Voucher />
<PayOption />
<CustommerInfoCart />
<PolicyFooter />
<Social />
<ShowroomList />
<FooterInfo />
</View>
</ScrollView>
</SafeAreaView>
)
}
const CartItem = () => {
return (
<View style={styles.cartItem}>
<View style={styles.cartItemImg}>
<Image style={styles.cartItemImgContent} source={{ uri: 'https://hanoicomputercdn.com/media/product/250_56516_vosro3405__4_.png' }} />
</View>
<View style={styles.cartItemCtNd}>
<Text style={styles.cartItemProName} numberOfLines={2}>
Laptop Dell Vostro 3405 (V4R53500U003W) (R5 3500U 8GB asa asas )
</Text>
<TouchableOpacity style={styles.cartItemDelete}>
<FontAwesome style={styles.cartItemDeleteIcon} name="trash-o" />
</TouchableOpacity>
</View>
<View style={styles.cartItemCtRd}>
<Text style={styles.cartItemPrice}>20.000.000 đ</Text>
<View style={styles.cartItemQuantity}>
<Pressable style={styles.cartItemQuantityChange}><Text style={styles.cartItemQuantityChangeText}>-</Text></Pressable>
<TextInput style={styles.cartItemQuantityInput} value="1" />
<Pressable style={styles.cartItemQuantityChange}><Text style={styles.cartItemQuantityChangeText}>+</Text></Pressable>
</View>
</View>
</View>
);
}
const Voucher = () => {
return (
<View style={styles.voucher}>
<Text style={styles.voucherTitle}>Mã giảm giả / Quà tặng</Text>
<View style={styles.voucherContent}>
<TextInput style={styles.voucherInput} placeholder="Nhập mã giảm giá" />
<Pressable style={styles.voucherSubmit}>
<LinearGradient colors={['#243a76', '#ed1b24']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.linearGradientBg}>
<Text style={styles.voucherSubmitText}>Áp dụng</Text>
</LinearGradient>
</Pressable>
</View>
</View>
)
}
const PayOption = () => {
const [checked, setChecked] = React.useState('pay1');
const listPayment = [
{
id: 1,
name: 'Thanh toán tiền mặt khi nhận hàng (tiền mặt / quẹt thẻ ATM, Visa, Master)',
description: '',
},
{
id: 2,
name: 'Thanh toán qua chuyển khoản qua tài khoản ngân hàng (khuyên dùng)',
description: '',
},
{
id: 3,
name: 'Thanh toán qua Ngân Lượng (ATM nội địa, Visa, Master)',
description: '',
},
{
id: 4,
name: 'Trả góp qua Alepay (Ngân Lượng)',
description: '',
},
]
return (
<View style={styles.BoxPayment}>
<Text style={styles.BoxPaymentTitle}>Lựa chọn hình thức thanh toán</Text>
<View style={styles.BoxPaymentList}>
{
listPayment.map(item => {
let idpay = 'pay' + item.id;
return (
<View style={styles.paymentItem} key={item.id}>
<View style={styles.paymentItemRadio}>
<RadioButton color={'#243a76'} value={idpay} status={checked === idpay ? 'checked' : 'unchecked'} onPress={() => setChecked(idpay)} />
</View>
<Text style={styles.paymentItemText}>{item.name}</Text>
</View>
)
})
}
</View>
</View>
)
}
const CustommerInfoCart = () => {
const [selectedLanguage, setSelectedLanguage] = useState();
const [checked, setChecked] = React.useState(false);
return (
<View style={styles.BoxCustommerInfoCart}>
<Text style={styles.BoxPaymentTitle}>Thông tin khách hàng</Text>
<View style={styles.BoxCustommerInfoCartList}>
<View style={styles.cartCusItem}>
<Text style={styles.cartCusItemText}>Họ và tên*</Text>
<TextInput style={styles.cartCusItemInput} />
</View>
<View style={styles.cartCusItem}>
<Text style={styles.cartCusItemText}>Email*</Text>
<TextInput style={styles.cartCusItemInput} />
</View>
<View style={styles.cartCusItem}>
<Text style={styles.cartCusItemText}>Số điện thoại*</Text>
<TextInput style={styles.cartCusItemInput} />
</View>
<View style={styles.cartCusItem}>
<Text style={styles.cartCusItemText}>Chọn tỉnh thành phố*</Text>
<Picker
style={styles.picker}
itemStyle={styles.onePickerItem}
selectedValue={selectedLanguage}
onValueChange={(itemValue, itemIndex) =>
setSelectedLanguage(itemValue)
}
>
<Picker.Item label="Hà Nội" value="1" />
<Picker.Item label="Đà Nẵng" value="2" />
<Picker.Item label="Hải Phòng" value="3" />
<Picker.Item label="TP Hồ Chí Minh" value="4" />
</Picker>
</View>
<View style={styles.cartCusItem}>
<Text style={styles.cartCusItemText}>Địa chỉ*</Text>
<TextInput multiline={true} numberOfLines={3} style={styles.cartCusItemArea} />
</View>
<View style={styles.cartCusItem}>
<Text style={styles.cartCusItemText}>Ghi chú</Text>
<TextInput multiline={true} numberOfLines={4} style={styles.cartCusItemArea} />
</View>
</View>
<View style={styles.companyCart}>
<View style={styles.companyCartCheck}>
<View style={styles.companyCartCheckBox}>
<Checkbox.IOS status={checked ? 'checked' : 'unchecked'} onPress={() => setChecked(!checked)} />
</View>
<Text style={styles.companyCartCheckText}>Xuất hóa đơn công ty</Text>
</View>
<View style={styles.companyCartList}>
<View style={styles.cartCusItem}>
<Text style={styles.cartCusItemText}>Công ty/ tổ chức*:</Text>
<TextInput multiline={true} numberOfLines={4} style={styles.cartCusItemArea} />
</View>
<View style={styles.cartCusItem}>
<Text style={styles.cartCusItemText}>Địa chỉ*:</Text>
<TextInput multiline={true} numberOfLines={4} style={styles.cartCusItemArea} />
</View>
<View style={styles.cartCusItem}>
<Text style={styles.cartCusItemText}>Mã số thuế*:</Text>
<TextInput multiline={true} numberOfLines={4} style={styles.cartCusItemArea} />
</View>
</View>
</View>
</View>
)
}
const winWidth = Dimensions.get('window').width; //full width
const winHeight = Dimensions.get('window').height; //full height
const halfWinWidth = winWidth / 2;
const ratio = winWidth / 500; //541 is actual image width
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#fff',
},
boxCartPage: {
marginBottom: 20,
width: winWidth
},
boxCartPageHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
width: '100%',
height: 40,
alignItems: 'center',
paddingHorizontal: 10,
borderBottomColor: '#d42333',
borderBottomWidth: 1,
},
boxCartPageBackHome: {
flexDirection: 'row',
alignItems: 'center'
},
boxCartPageBackHomeIcon: {
fontSize: 14,
marginRight: 8,
width: 30
},
boxCartPageBackHomeText: {
fontWeight: 'bold'
},
boxCartPageDeleteAll: {},
boxCartPageDeleteAllText: {
fontWeight: 'bold',
color: '#f00'
},
boxCartPageListProduct: {
width: winWidth - 20,
marginLeft: 10,
marginTop: 20,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
marginBottom: 15,
},
cartItem: {
padding: 10,
},
cartItemImg: {
position: 'relative',
paddingTop: '100%',
overflow: 'hidden',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
width: '100%',
},
cartItemImgContent: {
position: 'absolute',
top: 0,
left: '5%',
right: 0,
bottom: 0,
maxHeight: 500,
width: '90%',
},
cartItemCtNd: {
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: 5,
width: '100%',
alignItems: 'center'
},
cartItemProName: {
fontSize: 14,
height: 40,
lineHeight: 20,
width: winWidth - 80,
},
cartItemDelete: {
width: 60,
flexDirection: 'row',
justifyContent: 'center',
height: 40,
alignItems: 'center',
display: 'flex',
},
cartItemDeleteIcon: {
fontSize: 24,
color: '#f00'
},
cartItemCtRd: {
flexDirection: 'row',
justifyContent: 'space-between',
width: '100%',
alignItems: 'center'
},
cartItemPrice: {
fontSize: 16,
fontWeight: 'bold',
color: '#e00'
},
cartItemQuantity: {
width: 100,
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
borderColor: '#e1e1e1',
borderWidth: 1,
},
cartItemQuantityChange: {
width: 30,
height: 30,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
cartItemQuantityChangeText: {},
cartItemQuantityInput: {
width: 40,
height: 30,
textAlign: 'center',
borderLeftWidth: 1,
borderRightWidth: 1,
borderLeftColor: '#e1e1e1',
borderRightColor: '#e1e1e1',
},
voucher: {
paddingHorizontal: 10,
marginBottom: 20,
},
voucherTitle: {
fontWeight: 'bold',
fontSize: 14,
marginBottom: 5,
},
voucherContent: {
flexDirection: 'row',
justifyContent: 'space-between',
},
voucherInput: {
borderWidth: 1,
borderColor: '#ccc',
height: 34,
paddingHorizontal: 10,
borderRadius: 5,
width: winWidth - 110,
},
voucherSubmit: {
width: 85,
marginLeft: 5,
},
linearGradientBg: {
width: '100%',
height: 34,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 5,
},
voucherSubmitText: {
color: '#fff',
fontWeight: 'bold'
},
BoxPayment: {
paddingHorizontal: 10,
},
BoxPaymentTitle: {
padding: 10,
backgroundColor: '#243a76',
borderRadius: 3,
fontSize: 16,
fontWeight: 'bold',
color: '#fff',
textTransform: 'uppercase',
overflow: 'hidden',
marginBottom: 10,
},
BoxPaymentList: {
flexDirection: 'column',
},
paymentItem: {
flexDirection: 'row',
marginBottom: 10,
alignItems: 'center'
},
paymentItemRadio: {
width: 36,
height: 36,
borderRadius: 18,
borderWidth: 1,
borderColor: '#222',
marginRight: 10,
position: 'relative',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
overflow: 'hidden',
},
paymentItemText: {
width: winWidth - 56,
},
BoxCustommerInfoCart: {
paddingHorizontal: 10,
marginBottom: 20,
},
BoxCustommerInfoCartList: {
flexDirection: 'column',
},
cartCusItem: {
flexDirection: 'column',
marginBottom: 10,
},
cartCusItemText: {
fontSize: 14,
marginBottom: 5,
},
cartCusItemInput: {
height: 34,
width: '100%',
paddingHorizontal: 10,
borderColor: '#e1e1e1',
borderWidth: 1,
borderRadius: 5,
},
cartCusItemArea: {
height: 65,
width: '100%',
padding: 10,
borderColor: '#e1e1e1',
borderWidth: 1,
borderRadius: 5,
},
picker: {
height: 42,
width: '100%',
},
onePickerItem: {
height: 46,
color: '#222',
fontSize: 14,
textAlign: 'center',
width: '100%',
},
companyCart: {
marginTop: 5,
},
companyCartCheck: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 10,
},
companyCartCheckBox: {
width: 36,
height: 36,
borderWidth: 1,
borderColor: '#e1e1e1',
marginRight: 10,
borderRadius: 18,
},
companyCartCheckText: {},
companyCartList: {},
})

40
screens/NotFoundScreen.tsx Normal file
View File

@@ -0,0 +1,40 @@
import { StackScreenProps } from '@react-navigation/stack';
import * as React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { RootStackParamList } from '../types';
export default function NotFoundScreen({
navigation,
}: StackScreenProps<RootStackParamList, 'NotFound'>) {
return (
<View style={styles.container}>
<Text style={styles.title}>This screen doesn't exist.</Text>
<TouchableOpacity onPress={() => navigation.replace('Root')} style={styles.link}>
<Text style={styles.linkText}>Go to home screen!</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
padding: 20,
},
title: {
fontSize: 20,
fontWeight: 'bold',
},
link: {
marginTop: 15,
paddingVertical: 15,
},
linkText: {
fontSize: 14,
color: '#2e78b7',
},
});

1283
screens/ProductDetail.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

273
screens/TabOneScreen.tsx Normal file
View File

@@ -0,0 +1,273 @@
import 'react-native-gesture-handler';
import * as React from 'react';
import { useState } from 'react';
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
import { Ionicons, FontAwesome } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
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 EditScreenInfo from '../components/EditScreenInfo';
import { Text, View, } from '../components/Themed';
import useColorScheme from '../hooks/useColorScheme';
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
export default function TabOneScreen() {
return (
<SafeAreaView style={styles.container}>
<ScrollView>
<SliderHome />
<CateHome />
<ShowProductList />
<ShowProductList />
<PolicyFooter />
<Social />
<ShowroomList />
<FooterInfo />
</ScrollView>
</SafeAreaView>
);
}
const SliderHome = () => {
const imageSlider = [
'https://hanoicomputercdn.com/media/banner/04_Feb6a20714a3495fa80e985095a9a548f98.png',
'https://hanoicomputercdn.com/media/banner/19_Febbc8b55d8c3a6be385d8523c79eb4c8da.jpg',
'https://hanoicomputercdn.com/media/banner/25_Feb8a3b5d706fea215ed9004c6ad5ea9065.png'
]
return (
<View style={styles.slider}>
<Swiper style={styles.sliderSwipper} autoplay={true} showsButtons={false} index={3000} showsPagination={false}>
{
imageSlider.map((item, index) => {
return (<Image style={styles.imgSlider} key={index} source={{ uri: item }} />);
})
}
</Swiper>
</View>
);
}
const CateHome = () => {
return (
<View style={styles.catHomepage}>
<View 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}>
<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}>
<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}>
<Ionicons style={styles.catHomepageIcon} name="build-outline" size={28} />
<Text style={styles.catHomepageText}>Xây dựng cấu hình</Text>
</View>
</View>
);
}
const ShowProductList = () => {
const itemProductHomeStyle = {
width: 180,
borderRadius: 5,
margin: 5,
borderWidth: 1,
borderColor: '#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.bloxProductHome}>
<Text style={styles.titleProductHome}>Lap top, máy tính xách tay</Text>
<View style={styles.listProductHomeBao}>
<ScrollView horizontal={true} style={styles.listProductHome}>
{
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={itemProductHomeStyle}
/>)
}
</ScrollView>
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
slider: {
width: winWidth,
marginBottom: 20,
height: ratio * 430,
},
sliderSwipper: {
},
imgSlider: {
width: winWidth,
height: 430 * ratio,
},
catHomepage: {
width: winWidth,
marginBottom: 20,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
catHomepageItem: {
width: winWidth / 4,
padding: 10,
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center',
},
catHomepageIcon: {
width: 48,
height: 48,
backgroundColor: '#2b3179',
textAlign: 'center',
lineHeight: 48,
borderRadius: 24,
overflow: 'hidden',
color: '#fff',
marginBottom: 5,
},
catHomepageText: {
fontSize: 12,
textAlign: 'center',
},
title: {
fontSize: 20,
fontWeight: 'bold',
color: '#ff00cc',
},
bloxProductHome: {
width: winWidth,
marginBottom: 20,
padding: 10,
},
titleProductHome: {
backgroundColor: '#243a76',
fontSize: 15,
paddingLeft: 10,
paddingRight: 10,
borderRadius: 3,
lineHeight: 40,
marginBottom: 5,
textTransform: 'uppercase',
fontWeight: '700',
color: '#fff',
overflow: 'hidden',
},
listProductHomeBao: {
overflow: 'hidden',
},
listProductHome: {
marginRight: -5,
marginLeft: -5,
},
});

549
screens/TabTwoScreen.tsx Normal file
View File

@@ -0,0 +1,549 @@
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 { LinearGradient } from 'expo-linear-gradient';
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 EditScreenInfo from '../components/EditScreenInfo';
import { Text, View, } from '../components/Themed';
import useColorScheme from '../hooks/useColorScheme';
import TabOneScreen from './TabOneScreen';
export default function TabTwoScreen() {
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}>Laptop, Máy Tính Xách Tay</Text>
</View>
<View style={styles.listCategoryChild}>
<TouchableOpacity style={styles.listCategoryChildItem} onPress={() => Alert.alert('danh muc sp')}>
<Text style={styles.listCategoryChildName}>Laptop Asus</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.listCategoryChildItem} onPress={() => Alert.alert('danh muc sp')}>
<Text style={styles.listCategoryChildName}>Laptop Dell</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.listCategoryChildItem} onPress={() => Alert.alert('danh muc sp')}>
<Text style={styles.listCategoryChildName}>Laptop HP</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.listCategoryChildItem} onPress={() => Alert.alert('danh muc sp')}>
<Text style={styles.listCategoryChildName}>Laptop Lenovo</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.listCategoryChildItem} onPress={() => Alert.alert('danh muc sp')}>
<Text style={styles.listCategoryChildName}>Laptop Acer</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.listCategoryChildItem} onPress={() => Alert.alert('danh muc sp')}>
<Text style={styles.listCategoryChildName}>Laptop MSI</Text>
</TouchableOpacity>
</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,
},
});

12
screens/test.tsx Normal file
View File

@@ -0,0 +1,12 @@
import React from 'react';
import { Text, View } from 'react-native'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
function HomeScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} >
<Text> Home Screen </Text>
</View>
);
}