add article home, article list

components/article/ArticleItem.tsx

@@ -0,0 +1,86 @@
+import 'react-native-gesture-handler';
+import * as React from 'react';
+import { useState } from 'react';
+import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity } from 'react-native';
+import { Text, View, } from '../Themed';
+import { TextInput } from 'react-native-gesture-handler';
+import { Ionicons, FontAwesome } from '@expo/vector-icons';
+import { createDrawerNavigator, DrawerItemList, DrawerItem, DrawerContentScrollView } from '@react-navigation/drawer';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import Animated, { Easing } from 'react-native-reanimated';
+
+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 ArticleItem = (props: {id: number, title: string, image: string, category: string, visit: number, comment: number, createDate: string, summary: string, styleTitle: object}) => {
+    const {id, title, image, category, visit, comment, createDate, summary, styleTitle} = props;
+    return (
+        <View key={id} style={styles.articleItem}>
+            <Image style={styles.articleItemImg} source={{ uri: image }} />
+            <View style={styles.articleItemInfo}>
+                <Text style={[styles.articleItemName, styleTitle]} numberOfLines={4}>{title}</Text>
+                <View style={styles.articleItemTimeView}>
+                    <Text style={styles.articleItemTime}>{createDate}</Text>
+                    <View style={styles.articleItemView}>
+                        <FontAwesome style={styles.articleItemIcon} name="comment" />
+                        <Text style={styles.articleItemViewText}>{comment}</Text>
+                    </View>
+                    <View style={styles.articleItemView}>
+                        <FontAwesome style={styles.articleItemIcon} name="eye" />
+                        <Text style={styles.articleItemViewText}>{visit}</Text>
+                    </View>
+                </View>
+            </View>
+        </View>
+    )
+}
+
+export { ArticleItem };
+
+const styles = StyleSheet.create({
+    articleItem: {
+        width: '100%',
+        marginBottom: 20,
+    },
+    articleItemImg: {
+        width: '100%',
+        height: ratio * 450,
+        marginBottom: 10,
+    },
+    articleItemInfo: {
+        width: '100%',
+    },
+    articleItemName: {
+        width: '100%',
+        fontSize: 14,
+        fontWeight: 'bold',
+        color: '#222222',
+        marginBottom: 8,
+    },
+    articleItemTimeView: {
+        flexDirection: 'row',
+    },
+    articleItemTime: {
+        fontSize: 13,
+        color: '#888',
+        alignItems: 'center'
+    },
+    articleItemView: {
+        flexDirection: 'row',
+        marginLeft: 10,
+        alignItems: 'center'
+    },
+    articleItemIcon: {
+        fontSize: 11,
+        color: '#2e9fff',
+        marginRight: 2,
+    },
+    articleItemViewText: {
+        fontSize: 13,
+        color: '#888'
+    },
+})