add register, account, article, update navigation
This commit is contained in:
986
screens/AccountHome.tsx
Normal file
986
screens/AccountHome.tsx
Normal file
@@ -0,0 +1,986 @@
|
||||
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 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 AccountHome() {
|
||||
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ài khoản của bạn</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.accountBox}>
|
||||
<View style={styles.accountBoxHeader}>
|
||||
<View style={styles.accountBoxHeaderIcon}>
|
||||
<FontAwesome style={styles.accountBoxHeaderIconFont} name="user" />
|
||||
</View>
|
||||
<View style={styles.accountBoxHeaderInfo}>
|
||||
<Text style={styles.accountBoxHeaderInfoText}>Tài khoản</Text>
|
||||
<Text style={styles.accountBoxHeaderInfoName}>Hurasoft test</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<MenuAccount />
|
||||
|
||||
<View style={styles.accountBoxContent}>
|
||||
<Text style={styles.accountBoxTextHome}>Bạn đang ở trang tài khoản. Vui lòng chọn XEM THÔNG TIN để xem các mục.</Text>
|
||||
|
||||
<CustommerInfo />
|
||||
|
||||
<CustommerInfoChange />
|
||||
|
||||
<ListOrder />
|
||||
|
||||
<OrderDetail />
|
||||
|
||||
<ProductSave />
|
||||
|
||||
<ProductFavorite />
|
||||
|
||||
<ChangePassword />
|
||||
|
||||
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
|
||||
const MenuAccount = () => {
|
||||
const [showMenuAccount, setShowMenuAccount] = useState(true)
|
||||
return (
|
||||
<View style={styles.accountBoxSelec}>
|
||||
<TouchableOpacity style={styles.accountBoxSelecBox} onPress={() => setShowMenuAccount(!showMenuAccount)}>
|
||||
<Text style={styles.accountBoxSelecBoxText}>Xem thông tin</Text>
|
||||
<FontAwesome style={styles.accountBoxSelecBoxIcon} name="angle-down" />
|
||||
</TouchableOpacity>
|
||||
<View style={showMenuAccount ? styles.accountBoxSelecList : [styles.accountBoxSelecList, styles.active]}>
|
||||
<Pressable style={styles.accountNameTab}>
|
||||
<FontAwesome style={styles.accountNameTabIcon} name="user" />
|
||||
<Text style={styles.accountNameTabText}>Thông tin tài khoản</Text>
|
||||
</Pressable>
|
||||
<Pressable style={styles.accountNameTab}>
|
||||
<FontAwesome style={styles.accountNameTabIcon} name="list" />
|
||||
<Text style={styles.accountNameTabText}>Quản lý đơn hàng</Text>
|
||||
</Pressable>
|
||||
<Pressable style={styles.accountNameTab}>
|
||||
<FontAwesome style={styles.accountNameTabIcon} name="eye" />
|
||||
<Text style={styles.accountNameTabText}>Sản phẩm đã xem</Text>
|
||||
</Pressable>
|
||||
<Pressable style={styles.accountNameTab}>
|
||||
<FontAwesome style={styles.accountNameTabIcon} name="archive" />
|
||||
<Text style={styles.accountNameTabText}>Sản phẩm đã lưu</Text>
|
||||
</Pressable>
|
||||
<Pressable style={styles.accountNameTab}>
|
||||
<FontAwesome style={styles.accountNameTabIcon} name="comment" />
|
||||
<Text style={styles.accountNameTabText}>Sản phẩm bạn đã đánh giá</Text>
|
||||
</Pressable>
|
||||
<Pressable style={styles.accountNameTab}>
|
||||
<FontAwesome style={styles.accountNameTabIcon} name="heart" />
|
||||
<Text style={styles.accountNameTabText}>Sản phẩm bạn đã thích</Text>
|
||||
</Pressable>
|
||||
<Pressable style={styles.accountNameTab}>
|
||||
<FontAwesome style={styles.accountNameTabIcon} name="lock" />
|
||||
<Text style={styles.accountNameTabText}>Thay đổi mật khẩu</Text>
|
||||
</Pressable>
|
||||
<Pressable style={styles.accountNameTab}>
|
||||
<FontAwesome style={styles.accountNameTabIcon} name="power-off" />
|
||||
<Text style={styles.accountNameTabText}>Logout</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const CustommerInfo = () => {
|
||||
return (
|
||||
<View style={styles.custommerInfo}>
|
||||
<Text style={styles.custommerInfoItemHeader}>Thông tin tài khoản</Text>
|
||||
<Text style={styles.custommerInfoItem}>Họ tên: Hurasoft Test</Text>
|
||||
<Text style={styles.custommerInfoItem}>Giới tính: Nữ</Text>
|
||||
<Text style={styles.custommerInfoItem}>Email: test@mail.com</Text>
|
||||
<Text style={styles.custommerInfoItem}>Địa chỉ: 30 Nguyên Hồng - Láng Hạ - Đống Đa - HN</Text>
|
||||
<Text style={styles.custommerInfoItem}>Tỉnh/Thành phố: Hà Nội</Text>
|
||||
<Text style={styles.custommerInfoItem}>Số điện thoại: 0912345678</Text>
|
||||
<TouchableOpacity>
|
||||
<Text style={styles.custommerInfoButtonText}>Chỉnh sửa thông tin cá nhân</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const CustommerInfoChange = () => {
|
||||
const [selectedProvince, setSelectedProvince] = useState();
|
||||
const [checked, setChecked] = React.useState('male');
|
||||
return (
|
||||
<View style={styles.boxCustommerInfoChange}>
|
||||
<Text style={styles.titleBoxInAccount}>Cập nhật thông tin cá nhân</Text>
|
||||
<View style={styles.boxCustommerInfoChangeList}>
|
||||
<View style={styles.custommerInfoChangeItem}>
|
||||
<Text style={styles.custommerInfoChangeItemText}>Họ tên</Text>
|
||||
<View style={styles.custommerInfoChangeItemContent}>
|
||||
<TextInput style={styles.custommerInfoChangeItemInput} />
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.custommerInfoChangeItem}>
|
||||
<Text style={styles.custommerInfoChangeItemText}>Giới tính</Text>
|
||||
<View style={styles.custommerInfoChangeItemContent}>
|
||||
<View style={styles.registerItemSex}>
|
||||
<View style={styles.registerItemSexItem}>
|
||||
<Text style={styles.registerItemSexText}>Nam</Text>
|
||||
<View style={styles.registerItemSexRadio}>
|
||||
<RadioButton color={'#243a76'} value={'male'} status={checked === 'male' ? 'checked' : 'unchecked'} onPress={() => setChecked('male')} />
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.registerItemSexItem}>
|
||||
<Text style={styles.registerItemSexText}>Nữ</Text>
|
||||
<View style={styles.registerItemSexRadio}>
|
||||
<RadioButton color={'#243a76'} value={'female'} status={checked === 'female' ? 'checked' : 'unchecked'} onPress={() => setChecked('female')} />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.custommerInfoChangeItem}>
|
||||
<Text style={styles.custommerInfoChangeItemText}>Địa chỉ email</Text>
|
||||
<View style={styles.custommerInfoChangeItemContent}>
|
||||
<TextInput style={styles.custommerInfoChangeItemInput} />
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.custommerInfoChangeItem}>
|
||||
<Text style={styles.custommerInfoChangeItemText}>Địa chỉ nhà</Text>
|
||||
<View style={styles.custommerInfoChangeItemContent}>
|
||||
<TextInput style={styles.custommerInfoChangeItemInput} />
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.custommerInfoChangeItem}>
|
||||
<Text style={styles.custommerInfoChangeItemText}>Tỉnh/TP</Text>
|
||||
<View style={styles.custommerInfoChangeItemContent}>
|
||||
<Picker
|
||||
style={styles.picker}
|
||||
itemStyle={styles.onePickerItem}
|
||||
selectedValue={selectedProvince}
|
||||
onValueChange={(itemValue, itemIndex) =>
|
||||
setSelectedProvince(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>
|
||||
<View style={styles.custommerInfoChangeItem}>
|
||||
<Text style={styles.custommerInfoChangeItemText}>Điện thoại cố định</Text>
|
||||
<View style={styles.custommerInfoChangeItemContent}>
|
||||
<TextInput style={styles.custommerInfoChangeItemInput} />
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.custommerInfoChangeItem}>
|
||||
<Text style={styles.custommerInfoChangeItemText}>Điện thoại di động</Text>
|
||||
<View style={styles.custommerInfoChangeItemContent}>
|
||||
<TextInput style={styles.custommerInfoChangeItemInput} />
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.custommerInfoChangeItem}>
|
||||
<TouchableOpacity style={styles.boxCustommerInfoChangeSubmit}>
|
||||
<Text style={styles.boxCustommerInfoChangeSubmitText}>Thay đổi</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
function formatCurrency(price: string | number) {
|
||||
let priceConvert = parseFloat(`${price}`).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
|
||||
let len = priceConvert.length;
|
||||
return priceConvert.substring(0, len - 3);
|
||||
}
|
||||
|
||||
const ShowProductItemSave = (props: { id: number, productName: string, productSKU: string, summary: string, productImage: { small: string, medium: string, large: string, original: string }, price: number, marketPrice: number, quantity: number, privateStyle: object }) => {
|
||||
|
||||
const { id, productName, productSKU, summary, productImage, price, marketPrice, quantity, privateStyle } = props;
|
||||
const discount = Math.ceil(100 - (price / marketPrice * 100));
|
||||
|
||||
|
||||
return (
|
||||
<View style={[styles.itemProduct, privateStyle]}>
|
||||
<TouchableOpacity style={styles.pProductDelete}>
|
||||
<FontAwesome style={styles.pProductDeleteIcon} name="times" />
|
||||
</TouchableOpacity>
|
||||
<View style={styles.pBloxImgProduct}>
|
||||
<Text style={styles.pSkuProduct}>{productSKU}</Text>
|
||||
<Text style={styles.pDiscountProduct}>-{discount}%</Text>
|
||||
<View style={styles.pBloxImgProductBao}>
|
||||
<Image style={styles.pImgProduct} source={{ uri: productImage.large }} />
|
||||
</View>
|
||||
</View>
|
||||
<Text style={styles.pNameProduct} numberOfLines={2}>
|
||||
{productName}
|
||||
</Text>
|
||||
<Text style={styles.pSummaryProduct}>{summary}</Text>
|
||||
<Text style={styles.priceProduct}>{formatCurrency(price)} đ</Text>
|
||||
<Text style={styles.oldPriceProduct}>{formatCurrency(marketPrice)} đ</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const productData = [
|
||||
{
|
||||
id: 1,
|
||||
productName: 'Máy làm mát Nagakawa NFC452 (110W) - Hàng chính hãng',
|
||||
productSKU: 'TESTSKU',
|
||||
productImage: {
|
||||
small: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
|
||||
medium: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
|
||||
large: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
|
||||
original: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
|
||||
},
|
||||
price: 30000000,
|
||||
marketPrice: 50000000,
|
||||
quantity: 1,
|
||||
summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
productName: 'Máy làm mát Nagakawa NFC452 (110W) - Hàng chính hãng',
|
||||
productSKU: 'TESTSKU',
|
||||
productImage: {
|
||||
small: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
|
||||
medium: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
|
||||
large: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
|
||||
original: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
|
||||
},
|
||||
price: 25000000,
|
||||
marketPrice: 50000000,
|
||||
quantity: 0,
|
||||
summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen'
|
||||
},
|
||||
]
|
||||
|
||||
const ProductSave = () => {
|
||||
const itemProductStyle = {
|
||||
width: '100%',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#e8e8e8',
|
||||
position: 'relative',
|
||||
}
|
||||
return (
|
||||
<View style={styles.boxProductSave}>
|
||||
<Text style={styles.boxProductSaveTitle}>Sản phẩm mua sau</Text>
|
||||
<View style={styles.listProductSave}>
|
||||
{
|
||||
productData.map(item => <ShowProductItemSave key={item.id} id={item.id} productName={item.productName}
|
||||
productSKU={item.productSKU} summary={item.summary} productImage={item.productImage} price={item.price} marketPrice={item.marketPrice} quantity={item.quantity} privateStyle={itemProductStyle}
|
||||
/>)
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const ProductFavorite = () => {
|
||||
const itemProductStyle = {
|
||||
width: '100%',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#e8e8e8',
|
||||
position: 'relative',
|
||||
}
|
||||
return (
|
||||
<View style={styles.boxProductSave}>
|
||||
<Text style={styles.boxProductSaveTitle}>Sản phẩm Bạn đã thích</Text>
|
||||
<View style={styles.listProductSave}>
|
||||
{
|
||||
productData.map(item => <ShowProductItemSave key={item.id} id={item.id} productName={item.productName}
|
||||
productSKU={item.productSKU} summary={item.summary} productImage={item.productImage} price={item.price} marketPrice={item.marketPrice} quantity={item.quantity} privateStyle={itemProductStyle}
|
||||
/>)
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const ChangePassword = () => {
|
||||
return (
|
||||
<View>
|
||||
<Text style={styles.titleBoxInAccount}>Thay đổi mật khẩu</Text>
|
||||
<View>
|
||||
<View style={styles.custommerInfoChangeItem}>
|
||||
<Text style={styles.custommerInfoChangeItemText}>Mật khẩu hiện tại</Text>
|
||||
<View style={styles.custommerInfoChangeItemContent}>
|
||||
<TextInput style={styles.custommerInfoChangeItemInput} />
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.custommerInfoChangeItem}>
|
||||
<Text style={styles.custommerInfoChangeItemText}>Mật khẩu mới</Text>
|
||||
<View style={styles.custommerInfoChangeItemContent}>
|
||||
<TextInput style={styles.custommerInfoChangeItemInput} />
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.custommerInfoChangeItem}>
|
||||
<Text style={styles.custommerInfoChangeItemText}>Nhập lại mật khẩu mới</Text>
|
||||
<View style={styles.custommerInfoChangeItemContent}>
|
||||
<TextInput style={styles.custommerInfoChangeItemInput} />
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.custommerInfoChangeItem}>
|
||||
<TouchableOpacity style={styles.boxCustommerInfoChangeSubmit}>
|
||||
<Text style={styles.boxCustommerInfoChangeSubmitText}>Thay đổi</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const ListOrder = () => {
|
||||
return (
|
||||
<View style={styles.ListOrder}>
|
||||
<Text style={styles.titleBoxInAccount}>Danh Sách đơn hàng</Text>
|
||||
<View style={styles.ListOrderList}>
|
||||
<View style={styles.ListOrderListHeader}>
|
||||
<Text style={styles.ListOrderListHeaderSt}>Số đơn hàng</Text>
|
||||
<Text style={styles.ListOrderListHeaderNd}>Giá trị</Text>
|
||||
<Text style={styles.ListOrderListHeaderRd}>Thời gian</Text>
|
||||
<Text style={styles.ListOrderListHeaderInfo}>Thông tin</Text>
|
||||
</View>
|
||||
<View style={styles.ListOrderItem}>
|
||||
<View style={styles.ListOrderItemSt}>
|
||||
<Text style={styles.ListOrderItemStText}>#123456</Text>
|
||||
<TouchableOpacity style={styles.ListOrderItemStButton}>
|
||||
<Text style={styles.ListOrderItemStButtonText}>Xem chi tiết</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<Text style={styles.ListOrderItemNd}>100.000.000 đ</Text>
|
||||
<Text style={styles.ListOrderItemRd}>13-03-2021</Text>
|
||||
<Text style={styles.ListOrderItemInfo}>Đã hoàn thành</Text>
|
||||
</View>
|
||||
<View style={[styles.ListOrderItem, styles.ListOrderItemLast]}>
|
||||
<View style={styles.ListOrderItemSt}>
|
||||
<Text style={styles.ListOrderItemStText}>#123457</Text>
|
||||
<TouchableOpacity style={styles.ListOrderItemStButton}>
|
||||
<Text style={styles.ListOrderItemStButtonText}>Xem chi tiết</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<Text style={styles.ListOrderItemNd}>100.000.000 đ</Text>
|
||||
<Text style={styles.ListOrderItemRd}>13-03-2021</Text>
|
||||
<Text style={styles.ListOrderItemInfo}>Hủy bỏ</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const OrderDetail = () => {
|
||||
return (
|
||||
<View style={styles.boxOrderDetail}>
|
||||
<Text style={styles.boxOrderDetailNum}>Đơn hàng số #123456</Text>
|
||||
<Text style={styles.boxOrderDetailTime}><Text style={styles.bold}>Thời gian đặt mua: </Text>13-3-2021, 5:00 pm</Text>
|
||||
<View style={styles.boxOrderDetailInfo}>
|
||||
<Text style={styles.boxOrderDetailInfoTitle}>Thông tin người mua</Text>
|
||||
<View style={styles.boxOrderDetailInfoItem}>
|
||||
<Text style={styles.boxOrderDetailInfoItemTextSt}>Họ và tên:</Text>
|
||||
<Text style={styles.boxOrderDetailInfoItemTextNd}>Hurasoft Test</Text>
|
||||
</View>
|
||||
<View style={styles.boxOrderDetailInfoItem}>
|
||||
<Text style={styles.boxOrderDetailInfoItemTextSt}>Email:</Text>
|
||||
<Text style={styles.boxOrderDetailInfoItemTextNd}>test@mail.com</Text>
|
||||
</View>
|
||||
<View style={styles.boxOrderDetailInfoItem}>
|
||||
<Text style={styles.boxOrderDetailInfoItemTextSt}>Số điện thoại:</Text>
|
||||
<Text style={styles.boxOrderDetailInfoItemTextNd}>0912345678</Text>
|
||||
</View>
|
||||
<View style={styles.boxOrderDetailInfoItem}>
|
||||
<Text style={styles.boxOrderDetailInfoItemTextSt}>Địa chỉ:</Text>
|
||||
<Text style={styles.boxOrderDetailInfoItemTextNd}>30 Nguyên Hồng - Láng Hạ - Đống Đa - HN</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.boxOrderDetailList}>
|
||||
<View style={styles.boxOrderDetailListItem}>
|
||||
<View style={styles.boxOrderDetailListItemLine}>
|
||||
<View style={styles.boxOrderDetailListItemLeft}>
|
||||
<Text style={styles.boxOrderDetailListItemText}>STT</Text>
|
||||
</View>
|
||||
<View style={styles.boxOrderDetailListItemRight}>
|
||||
<Text style={styles.boxOrderDetailListItemText}>1</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.boxOrderDetailListItemLine}>
|
||||
<View style={styles.boxOrderDetailListItemLeft}>
|
||||
<Text style={styles.boxOrderDetailListItemText}>Ảnh</Text>
|
||||
</View>
|
||||
<View style={styles.boxOrderDetailListItemRight}>
|
||||
<View style={styles.boxOrderDetailListItemImage}>
|
||||
<Image style={styles.boxOrderDetailListItemImageCt} source={{ uri: 'https://hanoicomputercdn.com/media/product/250_55620_ban_game_k_deck_khung_kim_loai_mat_go_tu_nhien_phu_pu_bong.jpg' }} />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.boxOrderDetailListItemLine}>
|
||||
<View style={styles.boxOrderDetailListItemLeft}>
|
||||
<Text style={styles.boxOrderDetailListItemText}>Tên Sản phẩm</Text>
|
||||
</View>
|
||||
<View style={styles.boxOrderDetailListItemRight}>
|
||||
<Text style={[styles.boxOrderDetailListItemText, styles.bold]}>
|
||||
Bàn Game K-Deck ( Khung Kim Loại , Mặt Gỗ Tự Nhiên Phủ PU Bóng )
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.boxOrderDetailListItemLine}>
|
||||
<View style={styles.boxOrderDetailListItemLeft}>
|
||||
<Text style={styles.boxOrderDetailListItemText}>Giá bán</Text>
|
||||
</View>
|
||||
<View style={styles.boxOrderDetailListItemRight}>
|
||||
<Text style={[styles.boxOrderDetailListItemText, styles.bold]}>30.000.000 đ</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.boxOrderDetailListItemLine}>
|
||||
<View style={styles.boxOrderDetailListItemLeft}>
|
||||
<Text style={styles.boxOrderDetailListItemText}>Số lượng</Text>
|
||||
</View>
|
||||
<View style={styles.boxOrderDetailListItemRight}>
|
||||
<Text style={styles.boxOrderDetailListItemText}>1</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.boxOrderDetailListItemLine}>
|
||||
<View style={styles.boxOrderDetailListItemLeft}>
|
||||
<Text style={styles.boxOrderDetailListItemText}>Tổng</Text>
|
||||
</View>
|
||||
<View style={styles.boxOrderDetailListItemRight}>
|
||||
<Text style={styles.boxOrderDetailListItemText}>30.000.000 đ</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.boxOrderDetailTotal}>
|
||||
<View style={styles.boxOrderDetailListItemLineTotal}>
|
||||
<View style={styles.boxOrderTotalItemLeft}>
|
||||
<Text style={styles.boxOrderDetailListItemText}>Giá trị</Text>
|
||||
</View>
|
||||
<View style={styles.boxOrderTotalItemRight}>
|
||||
<Text style={[styles.boxOrderDetailListItemText, styles.bold]}>30.000.000 đ</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.boxOrderDetailListItemLineTotal}>
|
||||
<View style={styles.boxOrderTotalItemLeft}>
|
||||
<Text style={styles.boxOrderDetailListItemText}>Phí vận chuyển</Text>
|
||||
</View>
|
||||
<View style={styles.boxOrderTotalItemRight}>
|
||||
<Text style={[styles.boxOrderDetailListItemText]}>30.000 đ</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.boxOrderDetailListItemLineTotal}>
|
||||
<View style={styles.boxOrderTotalItemLeft}>
|
||||
<Text style={styles.boxOrderDetailListItemText}>Tổng giá trị đơn hàng</Text>
|
||||
</View>
|
||||
<View style={styles.boxOrderTotalItemRight}>
|
||||
<Text style={[styles.boxOrderDetailListItemText, styles.bold]}>30.030.000 đ</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const winWidth = Dimensions.get('window').width; //full width
|
||||
const winHeight = Dimensions.get('window').height; //full height
|
||||
const winWidthP10 = winWidth - 20;
|
||||
const halfWinWidth = winWidth / 2;
|
||||
const ratio = winWidthP10 / 850; //541 is actual image width
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#fff',
|
||||
},
|
||||
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
|
||||
},
|
||||
accountBox: {
|
||||
marginBottom: 20,
|
||||
width: winWidth,
|
||||
paddingHorizontal: 10,
|
||||
},
|
||||
accountBoxHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 20,
|
||||
},
|
||||
accountBoxHeaderIcon: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderRadius: 30,
|
||||
overflow: 'hidden',
|
||||
backgroundColor: '#008445',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 20,
|
||||
},
|
||||
accountBoxHeaderIconFont: {
|
||||
fontSize: 40,
|
||||
color: '#fff',
|
||||
lineHeight: 40,
|
||||
},
|
||||
accountBoxHeaderInfo: {
|
||||
width: winWidthP10 - 80,
|
||||
},
|
||||
accountBoxHeaderInfoText: {
|
||||
marginBottom: 10,
|
||||
},
|
||||
accountBoxHeaderInfoName: {
|
||||
fontSize: 16,
|
||||
textTransform: 'uppercase',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
accountBoxSelec: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
accountBoxSelecBox: {
|
||||
borderRadius: 3,
|
||||
borderWidth: 1,
|
||||
borderColor: '#999',
|
||||
paddingHorizontal: 10,
|
||||
height: 40,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
accountBoxSelecBoxText: {
|
||||
textTransform: 'uppercase',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
accountBoxSelecBoxIcon: {},
|
||||
accountBoxSelecList: {
|
||||
width: '100%',
|
||||
borderRadius: 3,
|
||||
borderWidth: 1,
|
||||
borderColor: '#999',
|
||||
display: 'none',
|
||||
},
|
||||
active: {
|
||||
display: 'flex',
|
||||
},
|
||||
accountNameTab: {
|
||||
padding: 10,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
accountNameTabIcon: {
|
||||
fontSize: 24,
|
||||
color: '#7b7b7b',
|
||||
marginRight: 8,
|
||||
},
|
||||
accountNameTabText: {},
|
||||
accountBoxContent: {},
|
||||
accountBoxTextHome: {},
|
||||
custommerInfo: {
|
||||
},
|
||||
custommerInfoItemHeader: {
|
||||
marginBottom: 10,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
custommerInfoItem: {
|
||||
marginBottom: 10,
|
||||
},
|
||||
custommerInfoButtonText: {
|
||||
color: '#ed1b24'
|
||||
},
|
||||
boxCustommerInfoChange: {},
|
||||
boxCustommerInfoChangeList: {
|
||||
padding: 10,
|
||||
borderColor: '#e1e1e1',
|
||||
borderWidth: 1,
|
||||
borderRadius: 5,
|
||||
},
|
||||
titleBoxInAccount: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 10,
|
||||
},
|
||||
custommerInfoChangeItem: {
|
||||
marginBottom: 15,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center'
|
||||
},
|
||||
custommerInfoChangeItemText: {
|
||||
width: 148,
|
||||
},
|
||||
custommerInfoChangeItemContent: {
|
||||
width: winWidthP10 - 170,
|
||||
},
|
||||
custommerInfoChangeItemInput: {
|
||||
width: '100%',
|
||||
height: 36,
|
||||
borderRadius: 3,
|
||||
borderWidth: 1,
|
||||
borderColor: '#e1e1e1',
|
||||
paddingHorizontal: 10,
|
||||
},
|
||||
registerItemSex: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
registerItemSexItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginRight: 20,
|
||||
},
|
||||
registerItemSexText: {
|
||||
marginRight: 5,
|
||||
},
|
||||
registerItemSexRadio: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderColor: '#333',
|
||||
borderWidth: 1,
|
||||
borderRadius: 18,
|
||||
},
|
||||
picker: {
|
||||
height: 46,
|
||||
width: '100%',
|
||||
},
|
||||
onePickerItem: {
|
||||
height: 46,
|
||||
color: '#222',
|
||||
fontSize: 14,
|
||||
textAlign: 'center',
|
||||
width: '100%',
|
||||
},
|
||||
boxCustommerInfoChangeSubmit: {
|
||||
width: 150,
|
||||
height: 36,
|
||||
backgroundColor: 'red',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 5,
|
||||
},
|
||||
boxCustommerInfoChangeSubmitText: {
|
||||
color: '#fff'
|
||||
},
|
||||
boxProductSave: {},
|
||||
boxProductSaveTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 15,
|
||||
},
|
||||
listProductSave: {},
|
||||
ListOrder: {},
|
||||
ListOrderList: {
|
||||
width: '100%',
|
||||
borderColor: '#e1e1e1',
|
||||
borderWidth: 1,
|
||||
borderRadius: 5,
|
||||
padding: 5
|
||||
},
|
||||
ListOrderListHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderBottomColor: '#e1e1e1',
|
||||
borderBottomWidth: 1,
|
||||
height: 40,
|
||||
},
|
||||
ListOrderListHeaderSt: {
|
||||
fontWeight: 'bold',
|
||||
width: winWidthP10 - 260,
|
||||
fontSize: 12,
|
||||
},
|
||||
ListOrderListHeaderNd: {
|
||||
fontWeight: 'bold',
|
||||
width: 90,
|
||||
fontSize: 12,
|
||||
},
|
||||
ListOrderListHeaderRd: {
|
||||
fontWeight: 'bold',
|
||||
width: 75,
|
||||
fontSize: 12,
|
||||
},
|
||||
ListOrderListHeaderInfo: {
|
||||
fontWeight: 'bold',
|
||||
width: 90,
|
||||
fontSize: 12,
|
||||
},
|
||||
ListOrderItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderBottomColor: '#e1e1e1',
|
||||
borderBottomWidth: 1,
|
||||
paddingVertical: 10,
|
||||
},
|
||||
ListOrderItemLast: {
|
||||
borderBottomWidth: 0,
|
||||
},
|
||||
ListOrderItemSt: {
|
||||
width: winWidthP10 - 260,
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
alignItems: 'center',
|
||||
},
|
||||
ListOrderItemStText: {
|
||||
fontSize: 12,
|
||||
marginRight: 6,
|
||||
},
|
||||
ListOrderItemStButton: {},
|
||||
ListOrderItemStButtonText: {
|
||||
fontSize: 12,
|
||||
color: '#f78d1c'
|
||||
},
|
||||
ListOrderItemNd: {
|
||||
width: 90,
|
||||
fontSize: 12,
|
||||
},
|
||||
ListOrderItemRd: {
|
||||
width: 75,
|
||||
fontSize: 12,
|
||||
},
|
||||
ListOrderItemInfo: {
|
||||
width: 90,
|
||||
fontSize: 12,
|
||||
},
|
||||
boxOrderDetail: {},
|
||||
boxOrderDetailNum: {
|
||||
width: '100%',
|
||||
marginBottom: 15,
|
||||
fontSize: 21,
|
||||
fontWeight: 'bold',
|
||||
textAlign: 'center'
|
||||
},
|
||||
boxOrderDetailTime: {
|
||||
marginBottom: 15,
|
||||
},
|
||||
boxOrderDetailInfo: {
|
||||
borderWidth: 1,
|
||||
borderRadius: 5,
|
||||
borderColor: '#e1e1e1',
|
||||
marginBottom: 20,
|
||||
padding: 8,
|
||||
},
|
||||
boxOrderDetailInfoTitle: {
|
||||
fontWeight: 'bold',
|
||||
color: '#f60',
|
||||
marginBottom: 10,
|
||||
},
|
||||
boxOrderDetailInfoItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 10,
|
||||
},
|
||||
boxOrderDetailInfoItemTextSt: {
|
||||
width: 100,
|
||||
},
|
||||
boxOrderDetailInfoItemTextNd: {
|
||||
width: winWidthP10 - 120,
|
||||
},
|
||||
boxOrderDetailList: {
|
||||
borderWidth: 1,
|
||||
borderRadius: 5,
|
||||
borderColor: '#e1e1e1',
|
||||
width: '100%',
|
||||
flexDirection: 'column',
|
||||
},
|
||||
bold: {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
boxOrderDetailListItem: {
|
||||
width: '100%',
|
||||
flexDirection: 'column',
|
||||
},
|
||||
boxOrderDetailListItemLine: {
|
||||
flexDirection: 'row',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#e1e1e1',
|
||||
width: '100%',
|
||||
},
|
||||
boxOrderDetailListItemLineTotal: {
|
||||
width: '100%',
|
||||
flexDirection: 'row',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#e1e1e1',
|
||||
alignItems: 'center',
|
||||
},
|
||||
boxOrderDetailListItemLeft: {
|
||||
width: 100,
|
||||
padding: 10,
|
||||
},
|
||||
boxOrderDetailListItemText: {},
|
||||
boxOrderDetailListItemRight: {
|
||||
width: winWidthP10 - 120,
|
||||
borderLeftColor: '#e1e1e1',
|
||||
borderLeftWidth: 1,
|
||||
padding: 10,
|
||||
},
|
||||
boxOrderDetailListItemImage: {
|
||||
width: 75,
|
||||
height: 75,
|
||||
position: 'relative',
|
||||
},
|
||||
boxOrderDetailListItemImageCt: {
|
||||
width: '100%',
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
boxOrderTotalItemLeft: {
|
||||
width: '50%',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-end',
|
||||
padding: 10,
|
||||
},
|
||||
boxOrderTotalItemRight: {
|
||||
width: '50%',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-start',
|
||||
borderLeftColor: '#e1e1e1',
|
||||
borderLeftWidth: 1,
|
||||
padding: 10,
|
||||
},
|
||||
boxOrderDetailTotal: {
|
||||
width: '100%',
|
||||
flexDirection: 'column',
|
||||
},
|
||||
itemProduct: {
|
||||
padding: 10,
|
||||
},
|
||||
pBloxImgProduct: {
|
||||
position: 'relative',
|
||||
marginBottom: 10,
|
||||
},
|
||||
pSkuProduct: {
|
||||
position: 'absolute',
|
||||
fontSize: 12,
|
||||
color: '#e00',
|
||||
top: 0,
|
||||
left: 0,
|
||||
lineHeight: 36,
|
||||
zIndex: 10,
|
||||
},
|
||||
pDiscountProduct: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
backgroundColor: '#e00',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
color: '#fff',
|
||||
textAlign: 'center',
|
||||
lineHeight: 36,
|
||||
borderRadius: 18,
|
||||
overflow: 'hidden',
|
||||
fontSize: 12,
|
||||
zIndex: 10,
|
||||
},
|
||||
pBloxImgProductBao: {
|
||||
position: 'relative',
|
||||
paddingTop: '100%',
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'row',
|
||||
},
|
||||
pImgProduct: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: '5%',
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
maxHeight: 500,
|
||||
width: '90%',
|
||||
},
|
||||
pNameProduct: {
|
||||
height: 40,
|
||||
lineHeight: 20,
|
||||
overflow: 'hidden',
|
||||
fontSize: 14,
|
||||
color: '#111',
|
||||
marginBottom: 5,
|
||||
},
|
||||
priceProduct: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: '#f10000',
|
||||
marginBottom: 5,
|
||||
},
|
||||
oldPriceProduct: {
|
||||
fontSize: 14,
|
||||
color: '#b7b7b7',
|
||||
marginBottom: 5,
|
||||
height: 24,
|
||||
lineHeight: 24,
|
||||
overflow: 'hidden',
|
||||
textDecorationLine: 'line-through',
|
||||
},
|
||||
pBottonProduct: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'row',
|
||||
marginTop: 5,
|
||||
},
|
||||
pStatusProduct: {
|
||||
fontSize: 13,
|
||||
color: '#00a706',
|
||||
},
|
||||
pCartProduct: {
|
||||
fontSize: 13,
|
||||
color: '#333',
|
||||
},
|
||||
pStatusProductIcon: {
|
||||
fontSize: 15,
|
||||
},
|
||||
pCartProductIcon: {
|
||||
fontSize: 15
|
||||
},
|
||||
pProductDelete: {},
|
||||
pProductDeleteIcon: {
|
||||
fontSize: 18,
|
||||
},
|
||||
pSummaryProduct: {
|
||||
marginBottom: 10,
|
||||
lineHeight: 20,
|
||||
},
|
||||
})
|
||||
583
screens/ArticleDetail.tsx
Normal file
583
screens/ArticleDetail.tsx
Normal file
@@ -0,0 +1,583 @@
|
||||
import * as React from 'react';
|
||||
import { useState } from 'react';
|
||||
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground, Modal, Pressable } from 'react-native';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { Ionicons, FontAwesome } from '@expo/vector-icons';
|
||||
import EditScreenInfo from '../components/EditScreenInfo';
|
||||
import { Text, View } from '../components/Themed';
|
||||
import { TextInput } from 'react-native-gesture-handler';
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
|
||||
export default function Login() {
|
||||
const navigation = useNavigation();
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<ScrollView>
|
||||
<ListArticleCategory />
|
||||
|
||||
<ArticleDetailContent />
|
||||
|
||||
<ArticleBestView />
|
||||
|
||||
<ProductArticle />
|
||||
|
||||
<BoxArticleListRight />
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const ListArticleCategory = () => {
|
||||
const navigation = useNavigation();
|
||||
return (
|
||||
<View style={styles.boxListArticleCategory}>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('ArticleList')} style={[styles.lacItem, styles.lacItemActive]}>
|
||||
<Text style={[styles.lacItemText, styles.lacItemTextActive]}>Tin tức mới</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('ArticleList')} style={styles.lacItem}>
|
||||
<Text style={styles.lacItemText}>Tin sản phẩm</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('ArticleList')} style={styles.lacItem}>
|
||||
<Text style={styles.lacItemText}>Tin doanh nghiệp</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('ArticleList')} style={styles.lacItem}>
|
||||
<Text style={styles.lacItemText}>Tin khuyến mại</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('ArticleList')} style={styles.lacItem}>
|
||||
<Text style={styles.lacItemText}>Kinh nghiệm mẹo vặt</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('ArticleList')} style={styles.lacItem}>
|
||||
<Text style={styles.lacItemText}>Video</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const ArticleDetailContent = () => {
|
||||
return (
|
||||
<View style={styles.boxArticleDetail}>
|
||||
<Text style={styles.boxArticleDetailTitle}>Cách sử dụng máy lọc không khí hiệu quả nhất</Text>
|
||||
<View style={styles.nTimeView}>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="clock-o" />
|
||||
<Text style={styles.nTimeViewText}>04-02-2021, 3:43 pm</Text>
|
||||
</View>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="eye" />
|
||||
<Text style={styles.nTimeViewText}>56</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.boxArticleDetailSummary}>
|
||||
<Text style={styles.boxArticleDetailSummaryText}>Giống như nhiều thiết bị điện máy khác, máy lọc không khí cần được sử dụng đúng các để đạt hiệu quả tốt nhất, cũng như đảm bảo tuổi thọ lâu bền nhất. Cùng Nagakawa xem một vài hướng dẫn sử dụng máy lọc không khí đúng cách và hiệu quả nhất nhé</Text>
|
||||
</View>
|
||||
<View style={styles.boxArticleDetailContent}>
|
||||
<Text>Nội dung đang được cập nhật</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const ArticleBestView = () => {
|
||||
return (
|
||||
<View style={styles.articleBestView}>
|
||||
<View style={styles.articleBestViewContent}>
|
||||
<Text style={styles.articleBestViewTitle}>Tin Xem nhiều</Text>
|
||||
<View style={styles.articleBestViewList}>
|
||||
<View style={styles.articleBestViewItem}>
|
||||
<View style={[styles.articleBestViewMun, styles.articleBestViewMunSt]}>
|
||||
<Text style={[styles.articleBestViewMunText, styles.white]}>1</Text>
|
||||
</View>
|
||||
<Text style={styles.articleBestViewName} numberOfLines={2}>Chương trình khuyến mãi dành riêng cho Khách hàng VinID mua hàng tại Nagakawa Shop</Text>
|
||||
</View>
|
||||
<View style={styles.articleBestViewItem}>
|
||||
<View style={[styles.articleBestViewMun, styles.articleBestViewMunNd]}>
|
||||
<Text style={[styles.articleBestViewMunText, styles.white]}>2</Text>
|
||||
</View>
|
||||
<Text style={styles.articleBestViewName} numberOfLines={2}>Chương trình khuyến mãi dành riêng cho Khách hàng VinID mua hàng tại Nagakawa Shop</Text>
|
||||
</View>
|
||||
<View style={styles.articleBestViewItem}>
|
||||
<View style={[styles.articleBestViewMun, styles.articleBestViewMunRd]}>
|
||||
<Text style={[styles.articleBestViewMunText, styles.white]}>3</Text>
|
||||
</View>
|
||||
<Text style={styles.articleBestViewName} numberOfLines={2}>Chương trình khuyến mãi dành riêng cho Khách hàng VinID mua hàng tại Nagakawa Shop</Text>
|
||||
</View>
|
||||
<View style={styles.articleBestViewItem}>
|
||||
<View style={styles.articleBestViewMun}>
|
||||
<Text style={styles.articleBestViewMunText}>4</Text>
|
||||
</View>
|
||||
<Text style={styles.articleBestViewName} numberOfLines={2}>Chương trình khuyến mãi dành riêng cho Khách hàng VinID mua hàng tại Nagakawa Shop</Text>
|
||||
</View>
|
||||
<View style={styles.articleBestViewItem}>
|
||||
<View style={styles.articleBestViewMun}>
|
||||
<Text style={styles.articleBestViewMunText}>5</Text>
|
||||
</View>
|
||||
<Text style={styles.articleBestViewName} numberOfLines={2}>Chương trình khuyến mãi dành riêng cho Khách hàng VinID mua hàng tại Nagakawa Shop</Text>
|
||||
</View>
|
||||
<View style={styles.articleBestViewItem}>
|
||||
<View style={styles.articleBestViewMun}>
|
||||
<Text style={styles.articleBestViewMunText}>6</Text>
|
||||
</View>
|
||||
<Text style={styles.articleBestViewName} numberOfLines={2}>Chương trình khuyến mãi dành riêng cho Khách hàng VinID mua hàng tại Nagakawa Shop</Text>
|
||||
</View>
|
||||
<View style={styles.articleBestViewItem}>
|
||||
<View style={styles.articleBestViewMun}>
|
||||
<Text style={styles.articleBestViewMunText}>7</Text>
|
||||
</View>
|
||||
<Text style={styles.articleBestViewName} numberOfLines={2}>Chương trình khuyến mãi dành riêng cho Khách hàng VinID mua hàng tại Nagakawa Shop</Text>
|
||||
</View>
|
||||
<View style={styles.articleBestViewItem}>
|
||||
<View style={styles.articleBestViewMun}>
|
||||
<Text style={styles.articleBestViewMunText}>8</Text>
|
||||
</View>
|
||||
<Text style={styles.articleBestViewName} numberOfLines={2}>Chương trình khuyến mãi dành riêng cho Khách hàng VinID mua hàng tại Nagakawa Shop</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const ProductArticle = () => {
|
||||
return (
|
||||
<View style={styles.boxProductArticle}>
|
||||
<Text style={styles.boxProductArticleTitle}>Sản phẩm nổi bật</Text>
|
||||
<View style={styles.boxProductArticleList}>
|
||||
<View style={styles.boxProductBestSaleItemStTwo}>
|
||||
<View style={styles.pContainerStTwo}>
|
||||
<View style={styles.pImgContentTwo}>
|
||||
<Image style={styles.pNew} source={require('../assets/images/icon_new.png')} />
|
||||
<Image style={styles.pImg} source={require('../assets/images/pro.png')} />
|
||||
<Image style={styles.pTraGop} source={require('../assets/images/icon_tragop.png')} />
|
||||
</View>
|
||||
<View style={styles.pInfoStTwo}>
|
||||
<Text style={styles.pName} numberOfLines={2}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
|
||||
<Text style={styles.pPrice}>1.292.000đ</Text>
|
||||
<View style={styles.pAllSale}>
|
||||
<Text style={styles.pOldPrice}>1.634.000đ</Text>
|
||||
<Text style={styles.pDiscount}>-30%</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.boxProductBestSaleItemStTwo}>
|
||||
<View style={styles.pContainerStTwo}>
|
||||
<View style={styles.pImgContentTwo}>
|
||||
<Image style={styles.pNew} source={require('../assets/images/icon_new.png')} />
|
||||
<Image style={styles.pImg} source={require('../assets/images/pro.png')} />
|
||||
<Image style={styles.pTraGop} source={require('../assets/images/icon_tragop.png')} />
|
||||
</View>
|
||||
<View style={styles.pInfoStTwo}>
|
||||
<Text style={styles.pName} numberOfLines={2}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
|
||||
<Text style={styles.pPrice}>1.292.000đ</Text>
|
||||
<View style={styles.pAllSale}>
|
||||
<Text style={styles.pOldPrice}>1.634.000đ</Text>
|
||||
<Text style={styles.pDiscount}>-30%</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.boxProductBestSaleItemStTwo}>
|
||||
<View style={styles.pContainerStTwo}>
|
||||
<View style={styles.pImgContentTwo}>
|
||||
<Image style={styles.pNew} source={require('../assets/images/icon_new.png')} />
|
||||
<Image style={styles.pImg} source={require('../assets/images/pro.png')} />
|
||||
<Image style={styles.pTraGop} source={require('../assets/images/icon_tragop.png')} />
|
||||
</View>
|
||||
<View style={styles.pInfoStTwo}>
|
||||
<Text style={styles.pName} numberOfLines={2}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
|
||||
<Text style={styles.pPrice}>1.292.000đ</Text>
|
||||
<View style={styles.pAllSale}>
|
||||
<Text style={styles.pOldPrice}>1.634.000đ</Text>
|
||||
<Text style={styles.pDiscount}>-30%</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const BoxArticleListRight = () => {
|
||||
return (
|
||||
<View style={styles.boxArticleList}>
|
||||
<View style={styles.boxArticleListTitle}>
|
||||
<Text style={styles.boxArticleListTitleName}>Tin khuyến mãi</Text>
|
||||
<TouchableOpacity>
|
||||
<Text style={styles.boxArticleListTitleVm}>Xem tất cả</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={styles.boxArticleListList}>
|
||||
<View style={styles.nItemFirst}>
|
||||
<View style={styles.nItemFirstImg}>
|
||||
<Image style={styles.nImg} source={require('../assets/images/news.png')} />
|
||||
</View>
|
||||
<View style={styles.nItemFirstInfo}>
|
||||
<Text style={styles.nNameSt} numberOfLines={3}>Những đặc điểm nổi bật của Máy rửa bát Nagakawa bạn cần biết!</Text>
|
||||
<View style={styles.nTimeView}>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="clock-o" />
|
||||
<Text style={styles.nTimeViewText}>04-02-2021, 3:43 pm</Text>
|
||||
</View>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="eye" />
|
||||
<Text style={styles.nTimeViewText}>56</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.nSum}>
|
||||
<Text style={styles.nSumText} numberOfLines={4}>Có thể nói, máy rửa bát thực sự đã mang tới một cuộc cách mạng trong căn bếp khi giúp cho người người, nhà nhà tiết kiệm được rất nhiều thời gian, công sức cũng như kinh phí hơn sau mỗi bữa ăn hàng ngày. "Nhà sạch thì mát - Bát</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.nItem}>
|
||||
<View style={styles.nItemImg}>
|
||||
<Image style={styles.nImg} source={require('../assets/images/news.png')} />
|
||||
</View>
|
||||
<View style={styles.nItemInfo}>
|
||||
<Text style={styles.nName} numberOfLines={3}>Những đặc điểm nổi bật của Máy rửa bát Nagakawa bạn cần biết!</Text>
|
||||
<View style={styles.nTimeView}>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="clock-o" />
|
||||
<Text style={styles.nTimeViewText}>04-02-2021, 3:43 pm</Text>
|
||||
</View>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="eye" />
|
||||
<Text style={styles.nTimeViewText}>56</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.nItem}>
|
||||
<View style={styles.nItemImg}>
|
||||
<Image style={styles.nImg} source={require('../assets/images/news.png')} />
|
||||
</View>
|
||||
<View style={styles.nItemInfo}>
|
||||
<Text style={styles.nName} numberOfLines={3}>Những đặc điểm nổi bật của Máy rửa bát Nagakawa bạn cần biết!</Text>
|
||||
<View style={styles.nTimeView}>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="clock-o" />
|
||||
<Text style={styles.nTimeViewText}>04-02-2021, 3:43 pm</Text>
|
||||
</View>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="eye" />
|
||||
<Text style={styles.nTimeViewText}>56</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const winWidth = Dimensions.get('window').width; //full width
|
||||
const winHeight = Dimensions.get('window').height; //full height
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
boxListArticleCategory: {
|
||||
width: winWidth,
|
||||
padding: 10,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
lacItem: {
|
||||
width: winWidth / 2 - 15,
|
||||
marginBottom: 10,
|
||||
height: 34,
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#e6e6e6',
|
||||
borderRadius: 5,
|
||||
},
|
||||
lacItemActive: {
|
||||
backgroundColor: '#ec3237',
|
||||
},
|
||||
lacItemText: {},
|
||||
lacItemTextActive: {
|
||||
color: '#fff'
|
||||
},
|
||||
boxArticleDetail: {
|
||||
width: winWidth,
|
||||
padding: 10,
|
||||
},
|
||||
boxArticleDetailTitle: {
|
||||
marginBottom: 20,
|
||||
fontSize: 24,
|
||||
fontWeight: '500',
|
||||
},
|
||||
boxArticleDetailSummary: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
boxArticleDetailSummaryText: {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
boxArticleDetailContent: {},
|
||||
nTimeView: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 10,
|
||||
},
|
||||
nTimeViewCt: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginRight: 20,
|
||||
},
|
||||
nTimeViewIcon: {
|
||||
marginRight: 5,
|
||||
color: '#999',
|
||||
},
|
||||
nTimeViewText: {
|
||||
color: '#999'
|
||||
},
|
||||
articleBestView: {
|
||||
width: winWidth,
|
||||
padding: 10,
|
||||
},
|
||||
articleBestViewContent: {
|
||||
width: '100%',
|
||||
padding: 10,
|
||||
backgroundColor: '#f5f5f5',
|
||||
},
|
||||
articleBestViewTitle: {
|
||||
marginBottom: 10,
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
articleBestViewList: {
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
paddingTop: 10,
|
||||
borderTopColor: '#ddd',
|
||||
borderTopWidth: 1,
|
||||
width: '100%',
|
||||
},
|
||||
articleBestViewItem: {
|
||||
marginBottom: 10,
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
articleBestViewMun: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 18,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#eee',
|
||||
marginRight: 10,
|
||||
},
|
||||
articleBestViewMunText: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: '#999',
|
||||
},
|
||||
articleBestViewName: {
|
||||
width: winWidth - 90,
|
||||
},
|
||||
articleBestViewMunSt: {
|
||||
backgroundColor: '#f25630'
|
||||
},
|
||||
articleBestViewMunNd: {
|
||||
backgroundColor: '#cc7935'
|
||||
},
|
||||
articleBestViewMunRd: {
|
||||
backgroundColor: '#ccb135'
|
||||
},
|
||||
white: {
|
||||
color: '#fff',
|
||||
},
|
||||
boxProductBestSaleItemStTwo: {
|
||||
width: '100%',
|
||||
},
|
||||
pContainerStTwo: {
|
||||
flexDirection: 'row',
|
||||
padding: 10,
|
||||
},
|
||||
pImgContentTwo: {
|
||||
width: 111,
|
||||
height: 111,
|
||||
marginRight: 20,
|
||||
position: 'relative',
|
||||
},
|
||||
pInfoStTwo: {
|
||||
width: winWidth - 175,
|
||||
},
|
||||
pContainer: {
|
||||
width: '100%',
|
||||
padding: 10,
|
||||
},
|
||||
pImgContent: {
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
paddingTop: '100%',
|
||||
marginBottom: 10,
|
||||
},
|
||||
pNew: {
|
||||
width: 24,
|
||||
height: 18,
|
||||
position: 'absolute',
|
||||
zIndex: 6,
|
||||
top: 0,
|
||||
left: 0,
|
||||
},
|
||||
pImg: {
|
||||
width: '100%',
|
||||
position: 'absolute',
|
||||
zIndex: 5,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
pTraGop: {
|
||||
width: 68,
|
||||
height: 16,
|
||||
position: 'absolute',
|
||||
zIndex: 6,
|
||||
bottom: 0,
|
||||
left: '50%',
|
||||
transform: [{ translateX: -34 }],
|
||||
},
|
||||
pInfo: {
|
||||
width: '100%',
|
||||
},
|
||||
pName: {
|
||||
width: '100%',
|
||||
fontSize: 14,
|
||||
marginBottom: 10,
|
||||
},
|
||||
pPrice: {
|
||||
width: '100%',
|
||||
fontSize: 18,
|
||||
marginBottom: 10,
|
||||
color: '#D8262F',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
pAllSale: {
|
||||
width: '100%',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 10,
|
||||
},
|
||||
pOldPrice: {
|
||||
color: '#A1A1A1',
|
||||
fontSize: 14,
|
||||
textDecorationLine: 'line-through',
|
||||
},
|
||||
pDiscount: {
|
||||
paddingVertical: 5,
|
||||
backgroundColor: '#D8262F',
|
||||
width: 50,
|
||||
textAlign: 'center',
|
||||
color: '#fff',
|
||||
borderRadius: 5,
|
||||
overflow: 'hidden',
|
||||
marginLeft: 5,
|
||||
},
|
||||
pOffer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
pOfferText: {
|
||||
fontSize: 10,
|
||||
color: '#A1A1A1',
|
||||
},
|
||||
pOfferPrice: {
|
||||
fontSize: 10,
|
||||
color: '#D8262F',
|
||||
},
|
||||
boxProductArticle: {
|
||||
width: winWidth,
|
||||
padding: 10,
|
||||
},
|
||||
boxProductArticleTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 10,
|
||||
},
|
||||
boxProductArticleList: {
|
||||
width: '100%',
|
||||
paddingTop: 10,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#ddd',
|
||||
},
|
||||
boxArticleList: {
|
||||
width: winWidth,
|
||||
padding: 10,
|
||||
},
|
||||
boxArticleListTitle: {
|
||||
marginBottom: 10,
|
||||
paddingBottom: 10,
|
||||
borderBottomColor: '#e1e1e1',
|
||||
borderBottomWidth: 1,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
boxArticleListTitleName: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
color: '#d9282f',
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
boxArticleListTitleVm: {},
|
||||
boxArticleListList: {
|
||||
},
|
||||
nItemFirst: {
|
||||
marginBottom: 20,
|
||||
width: '100%',
|
||||
},
|
||||
nItemFirstImg: {
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
height: winWidth * 65 / 100,
|
||||
overflow: 'hidden',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginBottom: 10,
|
||||
},
|
||||
nImg: {
|
||||
height: '100%',
|
||||
},
|
||||
nItemFirstInfo: {
|
||||
width: '100%',
|
||||
},
|
||||
nNameSt: {
|
||||
marginBottom: 10,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
nSum: {},
|
||||
nSumText: {},
|
||||
nItem: {
|
||||
width: '100%',
|
||||
marginBottom: 10,
|
||||
flexDirection: 'row',
|
||||
},
|
||||
nItemImg: {
|
||||
width: 110,
|
||||
position: 'relative',
|
||||
height: 70,
|
||||
overflow: 'hidden',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginRight: 10,
|
||||
},
|
||||
nItemInfo: {
|
||||
width: winWidth - 140,
|
||||
},
|
||||
nName: {
|
||||
marginBottom: 10,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
});
|
||||
675
screens/ArticleHome.tsx
Normal file
675
screens/ArticleHome.tsx
Normal file
@@ -0,0 +1,675 @@
|
||||
import * as React from 'react';
|
||||
import { useState } from 'react';
|
||||
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground, Modal, Pressable } from 'react-native';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { Ionicons, FontAwesome } from '@expo/vector-icons';
|
||||
import EditScreenInfo from '../components/EditScreenInfo';
|
||||
import { Text, View } from '../components/Themed';
|
||||
import { TextInput } from 'react-native-gesture-handler';
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
|
||||
export default function ArticleHome() {
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<ScrollView>
|
||||
<ListArticleCategory />
|
||||
|
||||
<BoxArticleNew />
|
||||
|
||||
<BoxArticleList />
|
||||
<BoxArticleList />
|
||||
<BoxArticleList />
|
||||
|
||||
<ArticleBestView />
|
||||
|
||||
<ProductArticle />
|
||||
|
||||
<BoxArticleListRight />
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const ListArticleCategory = () => {
|
||||
const navigation = useNavigation();
|
||||
return (
|
||||
<View style={styles.boxListArticleCategory}>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('ArticleList')} style={[styles.lacItem, styles.lacItemActive]}>
|
||||
<Text style={[styles.lacItemText, styles.lacItemTextActive]}>Tin tức mới</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('ArticleList')} style={styles.lacItem}>
|
||||
<Text style={styles.lacItemText}>Tin sản phẩm</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('ArticleList')} style={styles.lacItem}>
|
||||
<Text style={styles.lacItemText}>Tin doanh nghiệp</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('ArticleList')} style={styles.lacItem}>
|
||||
<Text style={styles.lacItemText}>Tin khuyến mại</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('ArticleList')} style={styles.lacItem}>
|
||||
<Text style={styles.lacItemText}>Kinh nghiệm mẹo vặt</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('ArticleList')} style={styles.lacItem}>
|
||||
<Text style={styles.lacItemText}>Video</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const BoxArticleNew = () => {
|
||||
return (
|
||||
<View style={styles.BoxArticleNew}>
|
||||
<View style={styles.BoxArticleNewItem}>
|
||||
<TouchableOpacity>
|
||||
<View style={styles.BoxArticleNewItemImg}>
|
||||
<Image style={styles.BoxArticleNewItemImage} source={require('../assets/images/news.png')} />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<View style={styles.BoxArticleNewItemInfo}>
|
||||
<TouchableOpacity>
|
||||
<Text style={styles.BoxArticleNewItemName}>Chương trình khuyến mãi dành riêng cho Khách hàng VinID mua hàng tại Nagakawa Shop</Text>
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.BoxArticleNewItemTime}>29-03-2021, 2:55 pm</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const BoxArticleList = () => {
|
||||
return (
|
||||
<View style={styles.boxArticleList}>
|
||||
<View style={styles.boxArticleListTitle}>
|
||||
<Text style={styles.boxArticleListTitleName}>Tin sản phẩm</Text>
|
||||
<TouchableOpacity>
|
||||
<Text style={styles.boxArticleListTitleVm}>Xem tất cả</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={styles.boxArticleListList}>
|
||||
<View style={styles.nItemFirst}>
|
||||
<View style={styles.nItemFirstImg}>
|
||||
<Image style={styles.nImg} source={require('../assets/images/news.png')} />
|
||||
</View>
|
||||
<View style={styles.nItemFirstInfo}>
|
||||
<Text style={styles.nNameSt} numberOfLines={3}>Những đặc điểm nổi bật của Máy rửa bát Nagakawa bạn cần biết!</Text>
|
||||
<View style={styles.nTimeView}>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="clock-o" />
|
||||
<Text style={styles.nTimeViewText}>04-02-2021, 3:43 pm</Text>
|
||||
</View>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="eye" />
|
||||
<Text style={styles.nTimeViewText}>56</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.nSum}>
|
||||
<Text style={styles.nSumText} numberOfLines={4}>Có thể nói, máy rửa bát thực sự đã mang tới một cuộc cách mạng trong căn bếp khi giúp cho người người, nhà nhà tiết kiệm được rất nhiều thời gian, công sức cũng như kinh phí hơn sau mỗi bữa ăn hàng ngày. "Nhà sạch thì mát - Bát</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.nItem}>
|
||||
<View style={styles.nItemImg}>
|
||||
<Image style={styles.nImg} source={require('../assets/images/news.png')} />
|
||||
</View>
|
||||
<View style={styles.nItemInfo}>
|
||||
<Text style={styles.nName} numberOfLines={3}>Những đặc điểm nổi bật của Máy rửa bát Nagakawa bạn cần biết!</Text>
|
||||
<View style={styles.nTimeView}>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="clock-o" />
|
||||
<Text style={styles.nTimeViewText}>04-02-2021, 3:43 pm</Text>
|
||||
</View>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="eye" />
|
||||
<Text style={styles.nTimeViewText}>56</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.nItem}>
|
||||
<View style={styles.nItemImg}>
|
||||
<Image style={styles.nImg} source={require('../assets/images/news.png')} />
|
||||
</View>
|
||||
<View style={styles.nItemInfo}>
|
||||
<Text style={styles.nName} numberOfLines={3}>Những đặc điểm nổi bật của Máy rửa bát Nagakawa bạn cần biết!</Text>
|
||||
<View style={styles.nTimeView}>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="clock-o" />
|
||||
<Text style={styles.nTimeViewText}>04-02-2021, 3:43 pm</Text>
|
||||
</View>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="eye" />
|
||||
<Text style={styles.nTimeViewText}>56</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const ArticleBestView = () => {
|
||||
return (
|
||||
<View style={styles.articleBestView}>
|
||||
<View style={styles.articleBestViewContent}>
|
||||
<Text style={styles.articleBestViewTitle}>Tin Xem nhiều</Text>
|
||||
<View style={styles.articleBestViewList}>
|
||||
<View style={styles.articleBestViewItem}>
|
||||
<View style={[styles.articleBestViewMun, styles.articleBestViewMunSt]}>
|
||||
<Text style={[styles.articleBestViewMunText, styles.white]}>1</Text>
|
||||
</View>
|
||||
<Text style={styles.articleBestViewName} numberOfLines={2}>Chương trình khuyến mãi dành riêng cho Khách hàng VinID mua hàng tại Nagakawa Shop</Text>
|
||||
</View>
|
||||
<View style={styles.articleBestViewItem}>
|
||||
<View style={[styles.articleBestViewMun, styles.articleBestViewMunNd]}>
|
||||
<Text style={[styles.articleBestViewMunText, styles.white]}>2</Text>
|
||||
</View>
|
||||
<Text style={styles.articleBestViewName} numberOfLines={2}>Chương trình khuyến mãi dành riêng cho Khách hàng VinID mua hàng tại Nagakawa Shop</Text>
|
||||
</View>
|
||||
<View style={styles.articleBestViewItem}>
|
||||
<View style={[styles.articleBestViewMun, styles.articleBestViewMunRd]}>
|
||||
<Text style={[styles.articleBestViewMunText, styles.white]}>3</Text>
|
||||
</View>
|
||||
<Text style={styles.articleBestViewName} numberOfLines={2}>Chương trình khuyến mãi dành riêng cho Khách hàng VinID mua hàng tại Nagakawa Shop</Text>
|
||||
</View>
|
||||
<View style={styles.articleBestViewItem}>
|
||||
<View style={styles.articleBestViewMun}>
|
||||
<Text style={styles.articleBestViewMunText}>4</Text>
|
||||
</View>
|
||||
<Text style={styles.articleBestViewName} numberOfLines={2}>Chương trình khuyến mãi dành riêng cho Khách hàng VinID mua hàng tại Nagakawa Shop</Text>
|
||||
</View>
|
||||
<View style={styles.articleBestViewItem}>
|
||||
<View style={styles.articleBestViewMun}>
|
||||
<Text style={styles.articleBestViewMunText}>5</Text>
|
||||
</View>
|
||||
<Text style={styles.articleBestViewName} numberOfLines={2}>Chương trình khuyến mãi dành riêng cho Khách hàng VinID mua hàng tại Nagakawa Shop</Text>
|
||||
</View>
|
||||
<View style={styles.articleBestViewItem}>
|
||||
<View style={styles.articleBestViewMun}>
|
||||
<Text style={styles.articleBestViewMunText}>6</Text>
|
||||
</View>
|
||||
<Text style={styles.articleBestViewName} numberOfLines={2}>Chương trình khuyến mãi dành riêng cho Khách hàng VinID mua hàng tại Nagakawa Shop</Text>
|
||||
</View>
|
||||
<View style={styles.articleBestViewItem}>
|
||||
<View style={styles.articleBestViewMun}>
|
||||
<Text style={styles.articleBestViewMunText}>7</Text>
|
||||
</View>
|
||||
<Text style={styles.articleBestViewName} numberOfLines={2}>Chương trình khuyến mãi dành riêng cho Khách hàng VinID mua hàng tại Nagakawa Shop</Text>
|
||||
</View>
|
||||
<View style={styles.articleBestViewItem}>
|
||||
<View style={styles.articleBestViewMun}>
|
||||
<Text style={styles.articleBestViewMunText}>8</Text>
|
||||
</View>
|
||||
<Text style={styles.articleBestViewName} numberOfLines={2}>Chương trình khuyến mãi dành riêng cho Khách hàng VinID mua hàng tại Nagakawa Shop</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const ProductArticle = () => {
|
||||
return (
|
||||
<View style={styles.boxProductArticle}>
|
||||
<Text style={styles.boxProductArticleTitle}>Sản phẩm nổi bật</Text>
|
||||
<View style={styles.boxProductArticleList}>
|
||||
<View style={styles.boxProductBestSaleItemStTwo}>
|
||||
<View style={styles.pContainerStTwo}>
|
||||
<View style={styles.pImgContentTwo}>
|
||||
<Image style={styles.pNew} source={require('../assets/images/icon_new.png')} />
|
||||
<Image style={styles.pImg} source={require('../assets/images/pro.png')} />
|
||||
<Image style={styles.pTraGop} source={require('../assets/images/icon_tragop.png')} />
|
||||
</View>
|
||||
<View style={styles.pInfoStTwo}>
|
||||
<Text style={styles.pName} numberOfLines={2}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
|
||||
<Text style={styles.pPrice}>1.292.000đ</Text>
|
||||
<View style={styles.pAllSale}>
|
||||
<Text style={styles.pOldPrice}>1.634.000đ</Text>
|
||||
<Text style={styles.pDiscount}>-30%</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.boxProductBestSaleItemStTwo}>
|
||||
<View style={styles.pContainerStTwo}>
|
||||
<View style={styles.pImgContentTwo}>
|
||||
<Image style={styles.pNew} source={require('../assets/images/icon_new.png')} />
|
||||
<Image style={styles.pImg} source={require('../assets/images/pro.png')} />
|
||||
<Image style={styles.pTraGop} source={require('../assets/images/icon_tragop.png')} />
|
||||
</View>
|
||||
<View style={styles.pInfoStTwo}>
|
||||
<Text style={styles.pName} numberOfLines={2}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
|
||||
<Text style={styles.pPrice}>1.292.000đ</Text>
|
||||
<View style={styles.pAllSale}>
|
||||
<Text style={styles.pOldPrice}>1.634.000đ</Text>
|
||||
<Text style={styles.pDiscount}>-30%</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.boxProductBestSaleItemStTwo}>
|
||||
<View style={styles.pContainerStTwo}>
|
||||
<View style={styles.pImgContentTwo}>
|
||||
<Image style={styles.pNew} source={require('../assets/images/icon_new.png')} />
|
||||
<Image style={styles.pImg} source={require('../assets/images/pro.png')} />
|
||||
<Image style={styles.pTraGop} source={require('../assets/images/icon_tragop.png')} />
|
||||
</View>
|
||||
<View style={styles.pInfoStTwo}>
|
||||
<Text style={styles.pName} numberOfLines={2}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
|
||||
<Text style={styles.pPrice}>1.292.000đ</Text>
|
||||
<View style={styles.pAllSale}>
|
||||
<Text style={styles.pOldPrice}>1.634.000đ</Text>
|
||||
<Text style={styles.pDiscount}>-30%</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const BoxArticleListRight = () => {
|
||||
return (
|
||||
<View style={styles.boxArticleList}>
|
||||
<View style={styles.boxArticleListTitle}>
|
||||
<Text style={styles.boxArticleListTitleName}>Tin khuyến mãi</Text>
|
||||
<TouchableOpacity>
|
||||
<Text style={styles.boxArticleListTitleVm}>Xem tất cả</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={styles.boxArticleListList}>
|
||||
<View style={styles.nItemFirst}>
|
||||
<View style={styles.nItemFirstImg}>
|
||||
<Image style={styles.nImg} source={require('../assets/images/news.png')} />
|
||||
</View>
|
||||
<View style={styles.nItemFirstInfo}>
|
||||
<Text style={styles.nNameSt} numberOfLines={3}>Những đặc điểm nổi bật của Máy rửa bát Nagakawa bạn cần biết!</Text>
|
||||
<View style={styles.nTimeView}>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="clock-o" />
|
||||
<Text style={styles.nTimeViewText}>04-02-2021, 3:43 pm</Text>
|
||||
</View>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="eye" />
|
||||
<Text style={styles.nTimeViewText}>56</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.nSum}>
|
||||
<Text style={styles.nSumText} numberOfLines={4}>Có thể nói, máy rửa bát thực sự đã mang tới một cuộc cách mạng trong căn bếp khi giúp cho người người, nhà nhà tiết kiệm được rất nhiều thời gian, công sức cũng như kinh phí hơn sau mỗi bữa ăn hàng ngày. "Nhà sạch thì mát - Bát</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.nItem}>
|
||||
<View style={styles.nItemImg}>
|
||||
<Image style={styles.nImg} source={require('../assets/images/news.png')} />
|
||||
</View>
|
||||
<View style={styles.nItemInfo}>
|
||||
<Text style={styles.nName} numberOfLines={3}>Những đặc điểm nổi bật của Máy rửa bát Nagakawa bạn cần biết!</Text>
|
||||
<View style={styles.nTimeView}>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="clock-o" />
|
||||
<Text style={styles.nTimeViewText}>04-02-2021, 3:43 pm</Text>
|
||||
</View>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="eye" />
|
||||
<Text style={styles.nTimeViewText}>56</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.nItem}>
|
||||
<View style={styles.nItemImg}>
|
||||
<Image style={styles.nImg} source={require('../assets/images/news.png')} />
|
||||
</View>
|
||||
<View style={styles.nItemInfo}>
|
||||
<Text style={styles.nName} numberOfLines={3}>Những đặc điểm nổi bật của Máy rửa bát Nagakawa bạn cần biết!</Text>
|
||||
<View style={styles.nTimeView}>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="clock-o" />
|
||||
<Text style={styles.nTimeViewText}>04-02-2021, 3:43 pm</Text>
|
||||
</View>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="eye" />
|
||||
<Text style={styles.nTimeViewText}>56</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const winWidth = Dimensions.get('window').width; //full width
|
||||
const winHeight = Dimensions.get('window').height; //full height
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
boxListArticleCategory: {
|
||||
width: winWidth,
|
||||
padding: 10,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
lacItem: {
|
||||
width: winWidth / 2 - 15,
|
||||
marginBottom: 10,
|
||||
height: 34,
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#e6e6e6',
|
||||
borderRadius: 5,
|
||||
},
|
||||
lacItemActive: {
|
||||
backgroundColor: '#ec3237',
|
||||
},
|
||||
lacItemText: {},
|
||||
lacItemTextActive: {
|
||||
color: '#fff'
|
||||
},
|
||||
BoxArticleNew: {
|
||||
width: winWidth,
|
||||
padding: 10,
|
||||
},
|
||||
BoxArticleNewItem: {
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
},
|
||||
BoxArticleNewItemImg: {
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
height: winWidth * 65 / 100,
|
||||
overflow: 'hidden',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
BoxArticleNewItemImage: {
|
||||
height: '100%'
|
||||
},
|
||||
BoxArticleNewItemInfo: {
|
||||
width: '100%',
|
||||
padding: 10,
|
||||
backgroundColor: 'rgba(0,0,0,0.5)',
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
},
|
||||
BoxArticleNewItemName: {
|
||||
marginBottom: 10,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: '#fff',
|
||||
},
|
||||
BoxArticleNewItemTime: {
|
||||
color: '#999'
|
||||
},
|
||||
boxArticleList: {
|
||||
width: winWidth,
|
||||
padding: 10,
|
||||
},
|
||||
boxArticleListTitle: {
|
||||
marginBottom: 10,
|
||||
paddingBottom: 10,
|
||||
borderBottomColor: '#e1e1e1',
|
||||
borderBottomWidth: 1,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
boxArticleListTitleName: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
color: '#d9282f',
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
boxArticleListTitleVm: {},
|
||||
boxArticleListList: {
|
||||
},
|
||||
nItemFirst: {
|
||||
marginBottom: 20,
|
||||
width: '100%',
|
||||
},
|
||||
nItemFirstImg: {
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
height: winWidth * 65 / 100,
|
||||
overflow: 'hidden',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginBottom: 10,
|
||||
},
|
||||
nImg: {
|
||||
height: '100%',
|
||||
},
|
||||
nItemFirstInfo: {
|
||||
width: '100%',
|
||||
},
|
||||
nNameSt: {
|
||||
marginBottom: 10,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
nTimeView: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 10,
|
||||
},
|
||||
nTimeViewCt: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginRight: 20,
|
||||
},
|
||||
nTimeViewIcon: {
|
||||
marginRight: 5,
|
||||
color: '#999',
|
||||
},
|
||||
nTimeViewText: {
|
||||
color: '#999'
|
||||
},
|
||||
nSum: {},
|
||||
nSumText: {},
|
||||
nItem: {
|
||||
width: '100%',
|
||||
marginBottom: 10,
|
||||
flexDirection: 'row',
|
||||
},
|
||||
nItemImg: {
|
||||
width: 110,
|
||||
position: 'relative',
|
||||
height: 70,
|
||||
overflow: 'hidden',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginRight: 10,
|
||||
},
|
||||
nItemInfo: {
|
||||
width: winWidth - 140,
|
||||
},
|
||||
nName: {
|
||||
marginBottom: 10,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
articleBestView: {
|
||||
width: winWidth,
|
||||
padding: 10,
|
||||
},
|
||||
articleBestViewContent: {
|
||||
width: '100%',
|
||||
padding: 10,
|
||||
backgroundColor: '#f5f5f5',
|
||||
},
|
||||
articleBestViewTitle: {
|
||||
marginBottom: 10,
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
articleBestViewList: {
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
paddingTop: 10,
|
||||
borderTopColor: '#ddd',
|
||||
borderTopWidth: 1,
|
||||
width: '100%',
|
||||
},
|
||||
articleBestViewItem: {
|
||||
marginBottom: 10,
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
articleBestViewMun: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 18,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#eee',
|
||||
marginRight: 10,
|
||||
},
|
||||
articleBestViewMunText: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: '#999',
|
||||
},
|
||||
articleBestViewName: {
|
||||
width: winWidth - 90,
|
||||
},
|
||||
articleBestViewMunSt: {
|
||||
backgroundColor: '#f25630'
|
||||
},
|
||||
articleBestViewMunNd: {
|
||||
backgroundColor: '#cc7935'
|
||||
},
|
||||
articleBestViewMunRd: {
|
||||
backgroundColor: '#ccb135'
|
||||
},
|
||||
white: {
|
||||
color: '#fff',
|
||||
},
|
||||
boxProductBestSaleItemStTwo: {
|
||||
width: '100%',
|
||||
},
|
||||
pContainerStTwo: {
|
||||
flexDirection: 'row',
|
||||
padding: 10,
|
||||
},
|
||||
pImgContentTwo: {
|
||||
width: 111,
|
||||
height: 111,
|
||||
marginRight: 20,
|
||||
position: 'relative',
|
||||
},
|
||||
pInfoStTwo: {
|
||||
width: winWidth - 175,
|
||||
},
|
||||
pContainer: {
|
||||
width: '100%',
|
||||
padding: 10,
|
||||
},
|
||||
pImgContent: {
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
paddingTop: '100%',
|
||||
marginBottom: 10,
|
||||
},
|
||||
pNew: {
|
||||
width: 24,
|
||||
height: 18,
|
||||
position: 'absolute',
|
||||
zIndex: 6,
|
||||
top: 0,
|
||||
left: 0,
|
||||
},
|
||||
pImg: {
|
||||
width: '100%',
|
||||
position: 'absolute',
|
||||
zIndex: 5,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
pTraGop: {
|
||||
width: 68,
|
||||
height: 16,
|
||||
position: 'absolute',
|
||||
zIndex: 6,
|
||||
bottom: 0,
|
||||
left: '50%',
|
||||
transform: [{ translateX: -34 }],
|
||||
},
|
||||
pInfo: {
|
||||
width: '100%',
|
||||
},
|
||||
pName: {
|
||||
width: '100%',
|
||||
fontSize: 14,
|
||||
marginBottom: 10,
|
||||
},
|
||||
pPrice: {
|
||||
width: '100%',
|
||||
fontSize: 18,
|
||||
marginBottom: 10,
|
||||
color: '#D8262F',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
pAllSale: {
|
||||
width: '100%',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 10,
|
||||
},
|
||||
pOldPrice: {
|
||||
color: '#A1A1A1',
|
||||
fontSize: 14,
|
||||
textDecorationLine: 'line-through',
|
||||
},
|
||||
pDiscount: {
|
||||
paddingVertical: 5,
|
||||
backgroundColor: '#D8262F',
|
||||
width: 50,
|
||||
textAlign: 'center',
|
||||
color: '#fff',
|
||||
borderRadius: 5,
|
||||
overflow: 'hidden',
|
||||
marginLeft: 5,
|
||||
},
|
||||
pOffer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
pOfferText: {
|
||||
fontSize: 10,
|
||||
color: '#A1A1A1',
|
||||
},
|
||||
pOfferPrice: {
|
||||
fontSize: 10,
|
||||
color: '#D8262F',
|
||||
},
|
||||
boxProductArticle: {
|
||||
width: winWidth,
|
||||
padding: 10,
|
||||
},
|
||||
boxProductArticleTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 10,
|
||||
},
|
||||
boxProductArticleList: {
|
||||
width: '100%',
|
||||
paddingTop: 10,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#ddd',
|
||||
},
|
||||
});
|
||||
721
screens/ArticleList.tsx
Normal file
721
screens/ArticleList.tsx
Normal file
@@ -0,0 +1,721 @@
|
||||
import * as React from 'react';
|
||||
import { useState } from 'react';
|
||||
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground, Modal, Pressable } from 'react-native';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { Ionicons, FontAwesome } from '@expo/vector-icons';
|
||||
import EditScreenInfo from '../components/EditScreenInfo';
|
||||
import { Text, View } from '../components/Themed';
|
||||
import { TextInput } from 'react-native-gesture-handler';
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
|
||||
export default function ArticleList() {
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<ScrollView>
|
||||
<ListArticleCategory />
|
||||
|
||||
<BoxArticleList />
|
||||
|
||||
<Paging />
|
||||
|
||||
<ArticleBestView />
|
||||
|
||||
<ProductArticle />
|
||||
|
||||
<BoxArticleListRight />
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const ListArticleCategory = () => {
|
||||
const navigation = useNavigation();
|
||||
return (
|
||||
<View style={styles.boxListArticleCategory}>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('ArticleList')} style={[styles.lacItem, styles.lacItemActive]}>
|
||||
<Text style={[styles.lacItemText, styles.lacItemTextActive]}>Tin tức mới</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('ArticleList')} style={styles.lacItem}>
|
||||
<Text style={styles.lacItemText}>Tin sản phẩm</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('ArticleList')} style={styles.lacItem}>
|
||||
<Text style={styles.lacItemText}>Tin doanh nghiệp</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('ArticleList')} style={styles.lacItem}>
|
||||
<Text style={styles.lacItemText}>Tin khuyến mại</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('ArticleList')} style={styles.lacItem}>
|
||||
<Text style={styles.lacItemText}>Kinh nghiệm mẹo vặt</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('ArticleList')} style={styles.lacItem}>
|
||||
<Text style={styles.lacItemText}>Video</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const BoxArticleList = () => {
|
||||
const navigation = useNavigation();
|
||||
return (
|
||||
<View style={styles.boxArticleList}>
|
||||
<View style={styles.boxArticleListList}>
|
||||
<View style={styles.nItemFirst}>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('ArticleDetail')}>
|
||||
<View style={styles.nItemFirstImg}>
|
||||
<Image style={styles.nImg} source={require('../assets/images/news.png')} />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<View style={styles.nItemFirstInfo}>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('ArticleDetail')}>
|
||||
<Text style={styles.nNameSt} numberOfLines={3}>Những đặc điểm nổi bật của Máy rửa bát Nagakawa bạn cần biết!</Text>
|
||||
</TouchableOpacity>
|
||||
<View style={styles.nTimeView}>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="clock-o" />
|
||||
<Text style={styles.nTimeViewText}>04-02-2021, 3:43 pm</Text>
|
||||
</View>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="eye" />
|
||||
<Text style={styles.nTimeViewText}>56</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.nSum}>
|
||||
<Text style={styles.nSumText} numberOfLines={4}>Có thể nói, máy rửa bát thực sự đã mang tới một cuộc cách mạng trong căn bếp khi giúp cho người người, nhà nhà tiết kiệm được rất nhiều thời gian, công sức cũng như kinh phí hơn sau mỗi bữa ăn hàng ngày. "Nhà sạch thì mát - Bát</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.nItem}>
|
||||
<View style={styles.nItemImg}>
|
||||
<Image style={styles.nImg} source={require('../assets/images/news.png')} />
|
||||
</View>
|
||||
<View style={styles.nItemInfo}>
|
||||
<Text style={styles.nName} numberOfLines={3}>Những đặc điểm nổi bật của Máy rửa bát Nagakawa bạn cần biết!</Text>
|
||||
<View style={styles.nTimeView}>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="clock-o" />
|
||||
<Text style={styles.nTimeViewText}>04-02-2021, 3:43 pm</Text>
|
||||
</View>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="eye" />
|
||||
<Text style={styles.nTimeViewText}>56</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.nSum}>
|
||||
<Text style={styles.nSumText} numberOfLines={4}>Có thể nói, máy rửa bát thực sự đã mang tới một cuộc cách mạng trong căn bếp khi giúp cho người người, nhà nhà tiết kiệm được rất nhiều thời gian, công sức cũng như kinh phí hơn sau mỗi bữa ăn hàng ngày. "Nhà sạch thì mát - Bát</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.nItem}>
|
||||
<View style={styles.nItemImg}>
|
||||
<Image style={styles.nImg} source={require('../assets/images/news.png')} />
|
||||
</View>
|
||||
<View style={styles.nItemInfo}>
|
||||
<Text style={styles.nName} numberOfLines={3}>Những đặc điểm nổi bật của Máy rửa bát Nagakawa bạn cần biết!</Text>
|
||||
<View style={styles.nTimeView}>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="clock-o" />
|
||||
<Text style={styles.nTimeViewText}>04-02-2021, 3:43 pm</Text>
|
||||
</View>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="eye" />
|
||||
<Text style={styles.nTimeViewText}>56</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.nSum}>
|
||||
<Text style={styles.nSumText} numberOfLines={4}>Có thể nói, máy rửa bát thực sự đã mang tới một cuộc cách mạng trong căn bếp khi giúp cho người người, nhà nhà tiết kiệm được rất nhiều thời gian, công sức cũng như kinh phí hơn sau mỗi bữa ăn hàng ngày. "Nhà sạch thì mát - Bát</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const Paging = () => {
|
||||
return (
|
||||
<View style={styles.paging}>
|
||||
<View style={styles.pagingContent}>
|
||||
<TouchableOpacity style={[styles.pagingItem, styles.pagingItemActive]}>
|
||||
<Text style={[styles.pagingItemText, styles.pagingItemTextActive]}>1</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.pagingItem}>
|
||||
<Text style={styles.pagingItemText}>2</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.pagingItem}>
|
||||
<Text style={styles.pagingItemText}>3</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.pagingItem}>
|
||||
<Text style={styles.pagingItemText}>4</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.pagingItem}>
|
||||
<Text style={styles.pagingItemText}>5</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const ArticleBestView = () => {
|
||||
return (
|
||||
<View style={styles.articleBestView}>
|
||||
<View style={styles.articleBestViewContent}>
|
||||
<Text style={styles.articleBestViewTitle}>Tin Xem nhiều</Text>
|
||||
<View style={styles.articleBestViewList}>
|
||||
<View style={styles.articleBestViewItem}>
|
||||
<View style={[styles.articleBestViewMun, styles.articleBestViewMunSt]}>
|
||||
<Text style={[styles.articleBestViewMunText, styles.white]}>1</Text>
|
||||
</View>
|
||||
<Text style={styles.articleBestViewName} numberOfLines={2}>Chương trình khuyến mãi dành riêng cho Khách hàng VinID mua hàng tại Nagakawa Shop</Text>
|
||||
</View>
|
||||
<View style={styles.articleBestViewItem}>
|
||||
<View style={[styles.articleBestViewMun, styles.articleBestViewMunNd]}>
|
||||
<Text style={[styles.articleBestViewMunText, styles.white]}>2</Text>
|
||||
</View>
|
||||
<Text style={styles.articleBestViewName} numberOfLines={2}>Chương trình khuyến mãi dành riêng cho Khách hàng VinID mua hàng tại Nagakawa Shop</Text>
|
||||
</View>
|
||||
<View style={styles.articleBestViewItem}>
|
||||
<View style={[styles.articleBestViewMun, styles.articleBestViewMunRd]}>
|
||||
<Text style={[styles.articleBestViewMunText, styles.white]}>3</Text>
|
||||
</View>
|
||||
<Text style={styles.articleBestViewName} numberOfLines={2}>Chương trình khuyến mãi dành riêng cho Khách hàng VinID mua hàng tại Nagakawa Shop</Text>
|
||||
</View>
|
||||
<View style={styles.articleBestViewItem}>
|
||||
<View style={styles.articleBestViewMun}>
|
||||
<Text style={styles.articleBestViewMunText}>4</Text>
|
||||
</View>
|
||||
<Text style={styles.articleBestViewName} numberOfLines={2}>Chương trình khuyến mãi dành riêng cho Khách hàng VinID mua hàng tại Nagakawa Shop</Text>
|
||||
</View>
|
||||
<View style={styles.articleBestViewItem}>
|
||||
<View style={styles.articleBestViewMun}>
|
||||
<Text style={styles.articleBestViewMunText}>5</Text>
|
||||
</View>
|
||||
<Text style={styles.articleBestViewName} numberOfLines={2}>Chương trình khuyến mãi dành riêng cho Khách hàng VinID mua hàng tại Nagakawa Shop</Text>
|
||||
</View>
|
||||
<View style={styles.articleBestViewItem}>
|
||||
<View style={styles.articleBestViewMun}>
|
||||
<Text style={styles.articleBestViewMunText}>6</Text>
|
||||
</View>
|
||||
<Text style={styles.articleBestViewName} numberOfLines={2}>Chương trình khuyến mãi dành riêng cho Khách hàng VinID mua hàng tại Nagakawa Shop</Text>
|
||||
</View>
|
||||
<View style={styles.articleBestViewItem}>
|
||||
<View style={styles.articleBestViewMun}>
|
||||
<Text style={styles.articleBestViewMunText}>7</Text>
|
||||
</View>
|
||||
<Text style={styles.articleBestViewName} numberOfLines={2}>Chương trình khuyến mãi dành riêng cho Khách hàng VinID mua hàng tại Nagakawa Shop</Text>
|
||||
</View>
|
||||
<View style={styles.articleBestViewItem}>
|
||||
<View style={styles.articleBestViewMun}>
|
||||
<Text style={styles.articleBestViewMunText}>8</Text>
|
||||
</View>
|
||||
<Text style={styles.articleBestViewName} numberOfLines={2}>Chương trình khuyến mãi dành riêng cho Khách hàng VinID mua hàng tại Nagakawa Shop</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const ProductArticle = () => {
|
||||
return (
|
||||
<View style={styles.boxProductArticle}>
|
||||
<Text style={styles.boxProductArticleTitle}>Sản phẩm nổi bật</Text>
|
||||
<View style={styles.boxProductArticleList}>
|
||||
<View style={styles.boxProductBestSaleItemStTwo}>
|
||||
<View style={styles.pContainerStTwo}>
|
||||
<View style={styles.pImgContentTwo}>
|
||||
<Image style={styles.pNew} source={require('../assets/images/icon_new.png')} />
|
||||
<Image style={styles.pImg} source={require('../assets/images/pro.png')} />
|
||||
<Image style={styles.pTraGop} source={require('../assets/images/icon_tragop.png')} />
|
||||
</View>
|
||||
<View style={styles.pInfoStTwo}>
|
||||
<Text style={styles.pName} numberOfLines={2}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
|
||||
<Text style={styles.pPrice}>1.292.000đ</Text>
|
||||
<View style={styles.pAllSale}>
|
||||
<Text style={styles.pOldPrice}>1.634.000đ</Text>
|
||||
<Text style={styles.pDiscount}>-30%</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.boxProductBestSaleItemStTwo}>
|
||||
<View style={styles.pContainerStTwo}>
|
||||
<View style={styles.pImgContentTwo}>
|
||||
<Image style={styles.pNew} source={require('../assets/images/icon_new.png')} />
|
||||
<Image style={styles.pImg} source={require('../assets/images/pro.png')} />
|
||||
<Image style={styles.pTraGop} source={require('../assets/images/icon_tragop.png')} />
|
||||
</View>
|
||||
<View style={styles.pInfoStTwo}>
|
||||
<Text style={styles.pName} numberOfLines={2}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
|
||||
<Text style={styles.pPrice}>1.292.000đ</Text>
|
||||
<View style={styles.pAllSale}>
|
||||
<Text style={styles.pOldPrice}>1.634.000đ</Text>
|
||||
<Text style={styles.pDiscount}>-30%</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.boxProductBestSaleItemStTwo}>
|
||||
<View style={styles.pContainerStTwo}>
|
||||
<View style={styles.pImgContentTwo}>
|
||||
<Image style={styles.pNew} source={require('../assets/images/icon_new.png')} />
|
||||
<Image style={styles.pImg} source={require('../assets/images/pro.png')} />
|
||||
<Image style={styles.pTraGop} source={require('../assets/images/icon_tragop.png')} />
|
||||
</View>
|
||||
<View style={styles.pInfoStTwo}>
|
||||
<Text style={styles.pName} numberOfLines={2}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
|
||||
<Text style={styles.pPrice}>1.292.000đ</Text>
|
||||
<View style={styles.pAllSale}>
|
||||
<Text style={styles.pOldPrice}>1.634.000đ</Text>
|
||||
<Text style={styles.pDiscount}>-30%</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const BoxArticleListRight = () => {
|
||||
return (
|
||||
<View style={styles.boxArticleList}>
|
||||
<View style={styles.boxArticleListTitle}>
|
||||
<Text style={styles.boxArticleListTitleName}>Tin khuyến mãi</Text>
|
||||
<TouchableOpacity>
|
||||
<Text style={styles.boxArticleListTitleVm}>Xem tất cả</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={styles.boxArticleListList}>
|
||||
<View style={styles.nItemFirst}>
|
||||
<View style={styles.nItemFirstImg}>
|
||||
<Image style={styles.nImg} source={require('../assets/images/news.png')} />
|
||||
</View>
|
||||
<View style={styles.nItemFirstInfo}>
|
||||
<Text style={styles.nNameSt} numberOfLines={3}>Những đặc điểm nổi bật của Máy rửa bát Nagakawa bạn cần biết!</Text>
|
||||
<View style={styles.nTimeView}>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="clock-o" />
|
||||
<Text style={styles.nTimeViewText}>04-02-2021, 3:43 pm</Text>
|
||||
</View>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="eye" />
|
||||
<Text style={styles.nTimeViewText}>56</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.nSum}>
|
||||
<Text style={styles.nSumText} numberOfLines={4}>Có thể nói, máy rửa bát thực sự đã mang tới một cuộc cách mạng trong căn bếp khi giúp cho người người, nhà nhà tiết kiệm được rất nhiều thời gian, công sức cũng như kinh phí hơn sau mỗi bữa ăn hàng ngày. "Nhà sạch thì mát - Bát</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.nItem}>
|
||||
<View style={styles.nItemImg}>
|
||||
<Image style={styles.nImg} source={require('../assets/images/news.png')} />
|
||||
</View>
|
||||
<View style={styles.nItemInfo}>
|
||||
<Text style={styles.nName} numberOfLines={3}>Những đặc điểm nổi bật của Máy rửa bát Nagakawa bạn cần biết!</Text>
|
||||
<View style={styles.nTimeView}>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="clock-o" />
|
||||
<Text style={styles.nTimeViewText}>04-02-2021, 3:43 pm</Text>
|
||||
</View>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="eye" />
|
||||
<Text style={styles.nTimeViewText}>56</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.nItem}>
|
||||
<View style={styles.nItemImg}>
|
||||
<Image style={styles.nImg} source={require('../assets/images/news.png')} />
|
||||
</View>
|
||||
<View style={styles.nItemInfo}>
|
||||
<Text style={styles.nName} numberOfLines={3}>Những đặc điểm nổi bật của Máy rửa bát Nagakawa bạn cần biết!</Text>
|
||||
<View style={styles.nTimeView}>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="clock-o" />
|
||||
<Text style={styles.nTimeViewText}>04-02-2021, 3:43 pm</Text>
|
||||
</View>
|
||||
<View style={styles.nTimeViewCt}>
|
||||
<FontAwesome style={styles.nTimeViewIcon} name="eye" />
|
||||
<Text style={styles.nTimeViewText}>56</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const winWidth = Dimensions.get('window').width; //full width
|
||||
const winHeight = Dimensions.get('window').height; //full height
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
boxListArticleCategory: {
|
||||
width: winWidth,
|
||||
padding: 10,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
lacItem: {
|
||||
width: winWidth / 2 - 15,
|
||||
marginBottom: 10,
|
||||
height: 34,
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#e6e6e6',
|
||||
borderRadius: 5,
|
||||
},
|
||||
lacItemActive: {
|
||||
backgroundColor: '#ec3237',
|
||||
},
|
||||
lacItemText: {},
|
||||
lacItemTextActive: {
|
||||
color: '#fff'
|
||||
},
|
||||
BoxArticleNew: {
|
||||
width: winWidth,
|
||||
padding: 10,
|
||||
},
|
||||
BoxArticleNewItem: {
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
},
|
||||
BoxArticleNewItemImg: {
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
height: winWidth * 65 / 100,
|
||||
overflow: 'hidden',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
BoxArticleNewItemImage: {
|
||||
height: '100%'
|
||||
},
|
||||
BoxArticleNewItemInfo: {
|
||||
width: '100%',
|
||||
padding: 10,
|
||||
backgroundColor: 'rgba(0,0,0,0.5)',
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
},
|
||||
BoxArticleNewItemName: {
|
||||
marginBottom: 10,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: '#fff',
|
||||
},
|
||||
BoxArticleNewItemTime: {
|
||||
color: '#999'
|
||||
},
|
||||
boxArticleList: {
|
||||
width: winWidth,
|
||||
padding: 10,
|
||||
},
|
||||
boxArticleListTitle: {
|
||||
marginBottom: 10,
|
||||
paddingBottom: 10,
|
||||
borderBottomColor: '#e1e1e1',
|
||||
borderBottomWidth: 1,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
boxArticleListTitleName: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
color: '#d9282f',
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
boxArticleListTitleVm: {},
|
||||
boxArticleListList: {
|
||||
},
|
||||
nItemFirst: {
|
||||
marginBottom: 20,
|
||||
width: '100%',
|
||||
},
|
||||
nItemFirstImg: {
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
height: winWidth * 65 / 100,
|
||||
overflow: 'hidden',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginBottom: 10,
|
||||
},
|
||||
nImg: {
|
||||
height: '100%',
|
||||
},
|
||||
nItemFirstInfo: {
|
||||
width: '100%',
|
||||
},
|
||||
nNameSt: {
|
||||
marginBottom: 10,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
nTimeView: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 10,
|
||||
},
|
||||
nTimeViewCt: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginRight: 20,
|
||||
},
|
||||
nTimeViewIcon: {
|
||||
marginRight: 5,
|
||||
color: '#999',
|
||||
},
|
||||
nTimeViewText: {
|
||||
color: '#999'
|
||||
},
|
||||
nSum: {},
|
||||
nSumText: {},
|
||||
nItem: {
|
||||
width: '100%',
|
||||
marginBottom: 10,
|
||||
flexDirection: 'row',
|
||||
},
|
||||
nItemImg: {
|
||||
width: 110,
|
||||
position: 'relative',
|
||||
height: 70,
|
||||
overflow: 'hidden',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginRight: 10,
|
||||
},
|
||||
nItemInfo: {
|
||||
width: winWidth - 140,
|
||||
},
|
||||
nName: {
|
||||
marginBottom: 10,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
articleBestView: {
|
||||
width: winWidth,
|
||||
padding: 10,
|
||||
},
|
||||
articleBestViewContent: {
|
||||
width: '100%',
|
||||
padding: 10,
|
||||
backgroundColor: '#f5f5f5',
|
||||
},
|
||||
articleBestViewTitle: {
|
||||
marginBottom: 10,
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
articleBestViewList: {
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
paddingTop: 10,
|
||||
borderTopColor: '#ddd',
|
||||
borderTopWidth: 1,
|
||||
width: '100%',
|
||||
},
|
||||
articleBestViewItem: {
|
||||
marginBottom: 10,
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
articleBestViewMun: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 18,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#eee',
|
||||
marginRight: 10,
|
||||
},
|
||||
articleBestViewMunText: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: '#999',
|
||||
},
|
||||
articleBestViewName: {
|
||||
width: winWidth - 90,
|
||||
},
|
||||
articleBestViewMunSt: {
|
||||
backgroundColor: '#f25630'
|
||||
},
|
||||
articleBestViewMunNd: {
|
||||
backgroundColor: '#cc7935'
|
||||
},
|
||||
articleBestViewMunRd: {
|
||||
backgroundColor: '#ccb135'
|
||||
},
|
||||
white: {
|
||||
color: '#fff',
|
||||
},
|
||||
boxProductBestSaleItemStTwo: {
|
||||
width: '100%',
|
||||
},
|
||||
pContainerStTwo: {
|
||||
flexDirection: 'row',
|
||||
padding: 10,
|
||||
},
|
||||
pImgContentTwo: {
|
||||
width: 111,
|
||||
height: 111,
|
||||
marginRight: 20,
|
||||
position: 'relative',
|
||||
},
|
||||
pInfoStTwo: {
|
||||
width: winWidth - 175,
|
||||
},
|
||||
pContainer: {
|
||||
width: '100%',
|
||||
padding: 10,
|
||||
},
|
||||
pImgContent: {
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
paddingTop: '100%',
|
||||
marginBottom: 10,
|
||||
},
|
||||
pNew: {
|
||||
width: 24,
|
||||
height: 18,
|
||||
position: 'absolute',
|
||||
zIndex: 6,
|
||||
top: 0,
|
||||
left: 0,
|
||||
},
|
||||
pImg: {
|
||||
width: '100%',
|
||||
position: 'absolute',
|
||||
zIndex: 5,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
pTraGop: {
|
||||
width: 68,
|
||||
height: 16,
|
||||
position: 'absolute',
|
||||
zIndex: 6,
|
||||
bottom: 0,
|
||||
left: '50%',
|
||||
transform: [{ translateX: -34 }],
|
||||
},
|
||||
pInfo: {
|
||||
width: '100%',
|
||||
},
|
||||
pName: {
|
||||
width: '100%',
|
||||
fontSize: 14,
|
||||
marginBottom: 10,
|
||||
},
|
||||
pPrice: {
|
||||
width: '100%',
|
||||
fontSize: 18,
|
||||
marginBottom: 10,
|
||||
color: '#D8262F',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
pAllSale: {
|
||||
width: '100%',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 10,
|
||||
},
|
||||
pOldPrice: {
|
||||
color: '#A1A1A1',
|
||||
fontSize: 14,
|
||||
textDecorationLine: 'line-through',
|
||||
},
|
||||
pDiscount: {
|
||||
paddingVertical: 5,
|
||||
backgroundColor: '#D8262F',
|
||||
width: 50,
|
||||
textAlign: 'center',
|
||||
color: '#fff',
|
||||
borderRadius: 5,
|
||||
overflow: 'hidden',
|
||||
marginLeft: 5,
|
||||
},
|
||||
pOffer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
pOfferText: {
|
||||
fontSize: 10,
|
||||
color: '#A1A1A1',
|
||||
},
|
||||
pOfferPrice: {
|
||||
fontSize: 10,
|
||||
color: '#D8262F',
|
||||
},
|
||||
boxProductArticle: {
|
||||
width: winWidth,
|
||||
padding: 10,
|
||||
},
|
||||
boxProductArticleTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 10,
|
||||
},
|
||||
boxProductArticleList: {
|
||||
width: '100%',
|
||||
paddingTop: 10,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#ddd',
|
||||
},
|
||||
paging: {
|
||||
width: winWidth,
|
||||
padding: 10,
|
||||
},
|
||||
pagingContent: {
|
||||
width: '100%',
|
||||
height: 60,
|
||||
shadowColor: "#000",
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 2,
|
||||
},
|
||||
shadowOpacity: 0.25,
|
||||
shadowRadius: 3.84,
|
||||
elevation: 5,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderRadius: 5,
|
||||
},
|
||||
pagingItem: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 3,
|
||||
borderWidth: 1,
|
||||
borderColor: '#e1e1e1',
|
||||
marginHorizontal: 2,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
pagingItemActive: {
|
||||
borderColor: '#d9282f',
|
||||
backgroundColor: '#d9282f',
|
||||
},
|
||||
pagingItemText: {},
|
||||
pagingItemTextActive: {
|
||||
color: '#fff',
|
||||
},
|
||||
});
|
||||
@@ -1091,7 +1091,7 @@ const styles = StyleSheet.create({
|
||||
height: '100%',
|
||||
},
|
||||
productBestSaleTitleText: {
|
||||
width: 200,
|
||||
width: '100%',
|
||||
lineHeight: 40,
|
||||
fontSize: 22,
|
||||
fontWeight: 'bold',
|
||||
@@ -1100,8 +1100,7 @@ const styles = StyleSheet.create({
|
||||
position: 'absolute',
|
||||
zIndex: 2,
|
||||
top: 0,
|
||||
left: '50%',
|
||||
transform: [{ translateX: -100 }],
|
||||
left: 0,
|
||||
textAlign: 'center',
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
|
||||
@@ -9,6 +9,7 @@ import { TextInput } from 'react-native-gesture-handler';
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
|
||||
export default function Login() {
|
||||
const navigation = useNavigation();
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<ScrollView>
|
||||
@@ -19,7 +20,7 @@ export default function Login() {
|
||||
</View>
|
||||
<View style={styles.boxLoginToRegis}>
|
||||
<Text>Khách hàng mới?</Text>
|
||||
<TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('Register')}>
|
||||
<Text style={styles.green}>Đăng ký</Text>
|
||||
</TouchableOpacity>
|
||||
<Text>tại đây</Text>
|
||||
@@ -38,7 +39,7 @@ export default function Login() {
|
||||
<Text style={styles.boxLoginForgetPassText}>Quên mật khẩu?</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<TouchableOpacity style={styles.boxLoginSubmit}>
|
||||
<TouchableOpacity style={styles.boxLoginSubmit} onPress={() => navigation.navigate('AccountHome')}>
|
||||
<Text style={styles.boxLoginSubmitText}>Đăng nhập</Text>
|
||||
</TouchableOpacity>
|
||||
<View style={styles.boxLoginOther}>
|
||||
|
||||
@@ -188,12 +188,21 @@ const OtherMenuFix = [
|
||||
name: 'Deal hot',
|
||||
image: require('../assets/images/icon-cat7.png'),
|
||||
imageActive: require('../assets/images/icon-cat7.png'),
|
||||
page: '',
|
||||
},
|
||||
{
|
||||
id: 'cb',
|
||||
name: 'Combo',
|
||||
image: require('../assets/images/icon-cat8.png'),
|
||||
imageActive: require('../assets/images/icon-cat8.png'),
|
||||
page: '',
|
||||
},
|
||||
{
|
||||
id: 'tt',
|
||||
name: 'Tin tức',
|
||||
image: require('../assets/images/icon-cat8.png'),
|
||||
imageActive: require('../assets/images/icon-cat8.png'),
|
||||
page: 'ArticleHome',
|
||||
},
|
||||
]
|
||||
|
||||
@@ -230,7 +239,7 @@ const ListMenuCat = () => {
|
||||
OtherMenuFix.map((item, index) => {
|
||||
return (
|
||||
<View style={activeMenuOther == item.id ? [styles.boxMenuLeftItem, styles.boxMenuLeftItemActive] : styles.boxMenuLeftItem} key={item.id}>
|
||||
<TouchableOpacity style={styles.boxMenuLeftItemButton} onPress={() => setActiveMenuother(item.id)}>
|
||||
<TouchableOpacity style={styles.boxMenuLeftItemButton} onPress={item.page != '' ? () => navigation.navigate(item.page) : () => setActiveMenuother(item.id)}>
|
||||
{
|
||||
activeMenuOther == item.id ?
|
||||
<Image style={styles.boxMenuLeftItemImage} source={item.imageActive} />
|
||||
|
||||
209
screens/Register.tsx
Normal file
209
screens/Register.tsx
Normal file
@@ -0,0 +1,209 @@
|
||||
import * as React from 'react';
|
||||
import { useState } from 'react';
|
||||
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground, Modal, Pressable } from 'react-native';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { Ionicons, FontAwesome } from '@expo/vector-icons';
|
||||
import EditScreenInfo from '../components/EditScreenInfo';
|
||||
import { Text, View } from '../components/Themed';
|
||||
import { TextInput } from 'react-native-gesture-handler';
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
import { Checkbox } from 'react-native-paper';
|
||||
|
||||
export default function Register() {
|
||||
const [checkedRegis, setCheckedRegis] = useState(false);
|
||||
const navigation = useNavigation();
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<ScrollView>
|
||||
<View style={styles.boxRegister}>
|
||||
<Text style={styles.boxRegisterTitle}>Tạo tài khoản Nagakawa</Text>
|
||||
<View style={styles.boxRegisterNote}>
|
||||
<Text>Bạn đã có tài khoản? </Text>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('Login')}>
|
||||
<Text style={styles.green}>Đăng nhập</Text>
|
||||
</TouchableOpacity>
|
||||
<Text> tại đây</Text>
|
||||
</View>
|
||||
<View style={styles.boxRegisterList}>
|
||||
<View style={styles.boxRegisterItem}>
|
||||
<Text style={styles.boxRegisterItemText}>Số điện thoại*</Text>
|
||||
<TextInput style={styles.boxRegisterItemInput} />
|
||||
</View>
|
||||
<View style={styles.boxRegisterItem}>
|
||||
<Text style={styles.boxRegisterItemText}>Email đăng ký*</Text>
|
||||
<TextInput style={styles.boxRegisterItemInput} />
|
||||
</View>
|
||||
<View style={styles.boxRegisterItem}>
|
||||
<Text style={styles.boxRegisterItemText}>Địa chỉ*</Text>
|
||||
<TextInput style={styles.boxRegisterItemInput} />
|
||||
</View>
|
||||
<View style={styles.boxRegisterItem}>
|
||||
<Text style={styles.boxRegisterItemText}>Mật khẩu*</Text>
|
||||
<TextInput style={styles.boxRegisterItemInput} />
|
||||
</View>
|
||||
<View style={styles.boxRegisterItem}>
|
||||
<Text style={styles.boxRegisterItemText}>Nhập lại mật khẩu*</Text>
|
||||
<TextInput style={styles.boxRegisterItemInput} />
|
||||
</View>
|
||||
<View style={styles.boxRegisterItem}>
|
||||
<Text style={styles.boxRegisterItemText}>Họ tên*</Text>
|
||||
<TextInput style={styles.boxRegisterItemInput} />
|
||||
</View>
|
||||
<View style={styles.boxRegisterItem}>
|
||||
<Text style={styles.boxRegisterItemText}>Mã xác nhận</Text>
|
||||
<View style={styles.boxRegisterCapcha}>
|
||||
<Image source={require('../assets/images/captcha.png')} />
|
||||
<TouchableOpacity>
|
||||
<Text style={styles.boxRegisterCapchaOther}>[ Xem mã khác ]</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<TextInput style={styles.boxRegisterItemInput} />
|
||||
</View>
|
||||
<View style={styles.checkKmRegis}>
|
||||
<View style={styles.checkKmRegisCheck}>
|
||||
<Checkbox status={checkedRegis ? 'checked' : 'unchecked'} onPress={() => setCheckedRegis(!checkedRegis)} />
|
||||
</View>
|
||||
<Text style={styles.checkKmRegisText}>Tôi muốn nhận các thông tin khuyến mãi từ Nagakawa</Text>
|
||||
</View>
|
||||
<TouchableOpacity style={styles.boxLoginSubmit}>
|
||||
<Text style={styles.boxLoginSubmitText}>Đăng ký</Text>
|
||||
</TouchableOpacity>
|
||||
<View style={styles.boxLoginOther}>
|
||||
<Text style={styles.boxLoginOtherText}>Hoặc đăng nhập bằng</Text>
|
||||
</View>
|
||||
<View style={styles.boxLoginSocial}>
|
||||
<TouchableOpacity style={[styles.boxLoginSocialItem, styles.boxLoginSocialFace]}>
|
||||
<FontAwesome style={styles.boxLoginSocialIcon} name="facebook" />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={[styles.boxLoginSocialItem, styles.boxLoginSocialGoogle]}>
|
||||
<FontAwesome style={styles.boxLoginSocialIcon} name="google" />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={[styles.boxLoginSocialItem, styles.boxLoginSocialZalo]}>
|
||||
<Image style={styles.boxLoginSocialImg} source={require('../assets/images/icon-zalo.png')} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const winWidth = Dimensions.get('window').width; //full width
|
||||
const winHeight = Dimensions.get('window').height; //full height
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
boxRegister: {
|
||||
width: winWidth,
|
||||
padding: 10,
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
},
|
||||
boxRegisterTitle: {
|
||||
marginBottom: 15,
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
boxRegisterNote: {
|
||||
marginBottom: 10,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0,0,0,0)'
|
||||
},
|
||||
green: {
|
||||
color: '#008445',
|
||||
},
|
||||
boxRegisterList: {
|
||||
width: '100%',
|
||||
padding: 10,
|
||||
},
|
||||
boxRegisterItem: {
|
||||
width: '100%',
|
||||
marginBottom: 10,
|
||||
},
|
||||
boxRegisterItemText: {
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 5,
|
||||
},
|
||||
boxRegisterItemInput: {
|
||||
width: '100%',
|
||||
height: 40,
|
||||
borderColor: '#e1e1e1',
|
||||
borderWidth: 1,
|
||||
borderRadius: 5,
|
||||
},
|
||||
boxRegisterCapcha: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
boxRegisterCapchaOther: {},
|
||||
checkKmRegis: {
|
||||
flexDirection: 'row',
|
||||
marginBottom: 10,
|
||||
marginTop: 10,
|
||||
},
|
||||
checkKmRegisCheck: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderWidth: 1,
|
||||
borderColor: '#e1e1e1',
|
||||
marginRight: 10,
|
||||
},
|
||||
checkKmRegisText: {},
|
||||
boxLoginSubmit: {
|
||||
width: '100%',
|
||||
height: 40,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 5,
|
||||
overflow: 'hidden',
|
||||
backgroundColor: '#d9282f',
|
||||
marginBottom: 20,
|
||||
},
|
||||
boxLoginSubmitText: {
|
||||
fontWeight: 'bold',
|
||||
color: '#fff'
|
||||
},
|
||||
boxLoginOther: {
|
||||
marginBottom: 20,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
boxLoginOtherText: {},
|
||||
boxLoginSocial: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
boxLoginSocialItem: {
|
||||
width: 34,
|
||||
height: 34,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderRadius: 5,
|
||||
marginHorizontal: 5,
|
||||
backgroundColor: '#3b5998',
|
||||
},
|
||||
boxLoginSocialFace: {},
|
||||
boxLoginSocialGoogle: {
|
||||
backgroundColor: '#df4a32',
|
||||
},
|
||||
boxLoginSocialZalo: {
|
||||
backgroundColor: '#0f8edd',
|
||||
},
|
||||
boxLoginSocialIcon: {
|
||||
fontSize: 16,
|
||||
color: '#fff',
|
||||
},
|
||||
boxLoginSocialImg: {
|
||||
width: 16,
|
||||
height: 16,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user