274 lines
9.5 KiB
TypeScript
274 lines
9.5 KiB
TypeScript
|
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,
|
||
|
|
},
|
||
|
|
});
|