add article home, article list

screens/ArticleList.tsx

@@ -0,0 +1,164 @@
+import 'react-native-gesture-handler';
+import * as React from 'react';
+import { useState } from 'react';
+import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native';
+import Constants from 'expo-constants';
+import { Ionicons, FontAwesome } from '@expo/vector-icons';
+import { LinearGradient } from 'expo-linear-gradient';
+import { PolicyFooter, Social, ShowroomList, FooterInfo } from '../components/footer/footerMain';
+
+import EditScreenInfo from '../components/EditScreenInfo';
+import { Text, View, } from '../components/Themed';
+import useColorScheme from '../hooks/useColorScheme';
+import { TextInput } from 'react-native-gesture-handler';
+import { RadioButton, Checkbox } from 'react-native-paper';
+import { Picker } from '@react-native-picker/picker';
+import { ArticleItem } from '../components/article/ArticleItem';
+
+export default function ArticleList() {
+    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}>Tin tức</Text>
+                </View>
+
+                <ListArticleCategory />
+
+                <PolicyFooter />
+
+                <Social />
+
+                <ShowroomList />
+
+                <FooterInfo />
+            </ScrollView>
+        </SafeAreaView>
+    )
+}
+
+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 dataArticle = [
+    {
+        id: 1,
+        title: 'Chương trình Khuyến mãi “Play-with Power by MSI”',
+        image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
+        category: 'Review sản phẩm',
+        visit: 10,
+        comment: 40,
+        createDate: '12-03-2021, 5:30 pm',
+        summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
+    },
+    {
+        id: 2,
+        title: 'Tự bẻ khóa tính năng hạn chế khai thác tiền ảo của RTX 3060, Nvidia đang \'tiếp tay\' cho dân đào coin?',
+        image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
+        category: 'Review sản phẩm',
+        visit: 10,
+        comment: 40,
+        createDate: '13-03-2021, 8:30 pm',
+        summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
+    },
+    {
+        id: 3,
+        title: '3 CPU “thần thánh” sẽ cứu rỗi game thủ',
+        image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
+        category: 'Review sản phẩm',
+        visit: 10,
+        comment: 40,
+        createDate: '13-03-2021, 5:30 am',
+        summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
+    },
+    {
+        id: 4,
+        title: 'Chương trình Khuyến mãi “Quà Cực Sốc Khi Dựng Cấu Hình PC Lắp Ráp”',
+        image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
+        category: 'Review sản phẩm',
+        visit: 10,
+        comment: 40,
+        createDate: '22-03-2021, 5:30 pm',
+        summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
+    },
+]
+
+const ListArticleCategory = () => {
+    const dataArtileList = dataArticle;
+    const styleTitle = {
+        fontSize: 16,
+    }
+    return (
+        <View style={styles.boxArtcleCategory}>
+            {
+                dataArtileList.map(item => <ArticleItem key={item.id} id={item.id} title={item.title}
+                    image={item.image} category={item.category} visit={item.visit}
+                    comment={item.comment} createDate={item.createDate} summary={item.summary} styleTitle={styleTitle} />)
+            }
+
+            <View style={styles.boxArtcleCategoryLoadMore}>
+                <Pressable style={styles.boxArtcleCategoryLoadMoreButton}>
+                    <Text style={styles.boxArtcleCategoryLoadMoreText}>Tải thêm</Text>
+                </Pressable>
+            </View>
+        </View>
+    )
+}
+
+
+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
+    },
+    boxArtcleCategory: {
+        paddingHorizontal: 10,
+        marginBottom: 20,
+        width: winWidth,
+    },
+    boxArtcleCategoryLoadMore: {
+    },
+    boxArtcleCategoryLoadMoreButton: {
+        width: '100%',
+        height: 36,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#ce0707'
+    },
+    boxArtcleCategoryLoadMoreText: {
+        color: '#fff'
+    },
+})