demo app hanoicomputer home category productdetail cart
This commit is contained in:
273
screens/TabOneScreen.tsx
Normal file
273
screens/TabOneScreen.tsx
Normal 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,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user