86 lines
3.1 KiB
TypeScript
86 lines
3.1 KiB
TypeScript
|
import 'react-native-gesture-handler';
|
||
|
|
import * as React from 'react';
|
||
|
|
import { useState } from 'react';
|
||
|
|
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity } from 'react-native';
|
||
|
|
import { 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'
|
||
|
|
},
|
||
|
|
})
|