ducht/Hanoicomputer_App
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add article home, article list

Browse Source
This commit is contained in:
ducht
2021-03-17 16:50:37 +07:00
parent 6db1634f60
commit d335721278
4 changed files with 834 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

556
screens/ArticleHome.tsx Normal file
View File

@@ -0,0 +1,556 @@
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 ArticleHome() {
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>
<ArticleHomeNewFirstBlock />
<ArticleNewHome />
<ArticleHot />
<ArticleListHome />
<PolicyFooter />
<Social />
<ShowroomList />
<FooterInfo />
</ScrollView>
</SafeAreaView>
)
}
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 ArticleHomeNewFirstBlock = () => {
const dataArticleHome = dataArticle;
return (
<View style={styles.boxArticleHomeNew}>
<View style={styles.boxArticleHomeNewList}>
{
dataArticleHome.map((item, index) => {
if (index == 0) {
return (
<View key={item.id} style={styles.boxArticleHomeNewFirst}>
<Image style={styles.boxArticleHomeNewFirstImg} source={{ uri: item.image }} />
<View style={styles.boxArticleHomeNewFirstInfo}>
<Text style={styles.boxArticleHomeNewFirstInfoCat}>{item.category}</Text>
<Text style={styles.boxArticleHomeNewFirstInfoName} numberOfLines={2}>{item.title}</Text>
</View>
</View>
)
} else if (index > 0 && index < 5) {
return (
<View key={item.id} style={styles.boxArticleHomeNewListItem}>
<Image style={styles.boxArticleHomeNewListImg} source={{ uri: item.image }} />
<View style={styles.boxArticleHomeNewListItemInfo}>
<Text style={styles.boxArticleHomeNewListItemInfoName} numberOfLines={2}>{item.title}</Text>
<Text style={styles.boxArticleHomeNewListItemInfoTime}>{item.createDate}</Text>
</View>
</View>
)
}
})
}
</View>
</View>
)
}
const ArticleNewHome = () => {
const dataArticleNew = dataArticle;
return (
<View style={styles.boxArticleNewHome}>
<View style={styles.boxArticleNewHomeTitle}>
<Text style={styles.boxArticleNewHomeTitleText}>Bài viết mới nhất</Text>
<View style={styles.boxArticleNewHomeTitleLine}></View>
</View>
<View style={styles.boxArticleNewHomeList}>
{
dataArticleNew.map(item =>
<View style={styles.boxArticleNewHomeItem} key={item.id}>
<View style={styles.boxArticleNewHomeItemcontent}>
<View style={styles.boxArticleNewHomeItemInfo}>
<Text style={styles.boxArticleNewHomeItemName} numberOfLines={4}>{item.title}</Text>
<View style={styles.boxArticleNewHomeItemTimeView}>
<Text style={styles.boxArticleNewHomeItemTime}>{item.createDate}</Text>
<View style={styles.boxArticleNewHomeItemView}>
<FontAwesome style={styles.boxArticleNewHomeItemIcon} name="comment" />
<Text style={styles.boxArticleNewHomeItemViewText}>{item.comment}</Text>
</View>
<View style={styles.boxArticleNewHomeItemView}>
<FontAwesome style={styles.boxArticleNewHomeItemIcon} name="eye" />
<Text style={styles.boxArticleNewHomeItemViewText}>{item.visit}</Text>
</View>
</View>
</View>
<View style={styles.boxArticleNewHomeItemImageCt}>
<Image style={styles.boxArticleNewHomeItemImage} source={{ uri: item.image }} />
</View>
</View>
<Text style={styles.boxArticleNewHomeItemSummary} numberOfLines={2}>{item.summary}</Text>
</View>
)
}
</View>
</View>
)
}
const ArticleHot = () => {
const dataArticleNew = dataArticle;
let counter = 1;
return (
<View style={styles.boxArticleHomeHot}>
<View style={styles.boxArticleNewHomeTitle}>
<Text style={styles.boxArticleNewHomeTitleText}>Bài viết nổi bật</Text>
<View style={styles.boxArticleNewHomeTitleLine}></View>
</View>
<View style={styles.boxArticleNewHomeList}>
{
dataArticleNew.map((item, index) => {
if (index == 0) {
return (
<View key={item.id} style={styles.articleHotFirst}>
<Image style={styles.articleHotFirstImg} source={{ uri: item.image }} />
<View style={styles.articleHotFirstInfo}>
<Text style={styles.articleHotFirstInfoNum}>01</Text>
<View style={styles.articleHotFirstInfoContent}>
<Text style={styles.articleHotName} numberOfLines={2}>{item.title}</Text>
<Pressable style={styles.articleHotSahre}>
<FontAwesome style={styles.articleHotSahreIcon} name="share-alt" />
<Text style={styles.articleHotSahreText}>Chia sẻ</Text>
</Pressable>
</View>
</View>
</View>
)
} else if (index > 0 && index < 4) {
{ counter++ }
return (
<View key={item.id} style={styles.articleHotItem}>
<View style={styles.articleHotInfo}>
<Text style={styles.articleHotNum}>0{counter}</Text>
<View style={styles.articleHotInfoContent}>
<Text style={styles.articleHotName} numberOfLines={2}>{item.title}</Text>
<Pressable style={styles.articleHotSahre}>
<FontAwesome style={styles.articleHotSahreIcon} name="share-alt" />
<Text style={styles.articleHotSahreText}>Chia sẻ</Text>
</Pressable>
</View>
</View>
</View>
)
}
}
)
}
</View>
</View>
)
}
const ArticleListHome = () => {
const listArticleCat = [
'Review sản phẩm',
'Tin game',
'Tin khuyến mãi',
'Sự kiện'
];
const dataArtileList = dataArticle;
const styleTitle = {
fontSize: 14,
}
return (
<View>
{
listArticleCat.map((item, index) =>
<View style={styles.boxArticleHomeList} key={index}>
<View style={styles.boxArticleNewHomeTitle}>
<Text style={styles.boxArticleNewHomeTitleText}>{item}</Text>
<View style={styles.boxArticleNewHomeTitleLine}></View>
</View>
<View>
{
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>
<View style={styles.boxArticleHomeListVm}>
<View style={styles.boxArticleHomeListVmLineL}></View>
<Pressable style={styles.boxArticleHomeListVmBt}>
<Text style={styles.boxArticleHomeListVmText}>Xem thêm</Text>
</Pressable>
<View style={styles.boxArticleHomeListVmLineR}></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
},
boxArticleHomeNew: {
paddingHorizontal: 10,
width: winWidth,
marginBottom: 10,
},
boxArticleHomeNewFirst: {
marginBottom: 20,
position: 'relative',
},
boxArticleHomeNewFirstImg: {
width: '100%',
height: 450 * ratio,
},
boxArticleHomeNewFirstInfo: {
padding: 10,
position: 'absolute',
left: 0,
bottom: 0,
backgroundColor: 'rgba(0,0,0,0.3)',
width: '100%',
},
boxArticleHomeNewFirstInfoCat: {
backgroundColor: '#ce0707',
width: 150,
maxWidth: '100%',
textAlign: 'center',
color: '#fff',
textTransform: 'uppercase',
paddingVertical: 5,
overflow: 'hidden',
marginBottom: 8,
},
boxArticleHomeNewFirstInfoName: {
width: '100%',
fontSize: 30,
fontWeight: 'bold',
color: '#fff',
},
boxArticleHomeNewList: {
flexDirection: 'column',
},
boxArticleHomeNewListItem: {
width: '100%',
marginBottom: 10,
},
boxArticleHomeNewListImg: {
width: '100%',
height: 450 * ratio,
},
boxArticleHomeNewListItemInfo: {},
boxArticleHomeNewListItemInfoName: {
marginVertical: 7,
width: '100%',
fontSize: 14,
fontWeight: 'bold',
color: '#222222'
},
boxArticleHomeNewListItemInfoTime: {
fontSize: 13,
color: '#888888'
},
boxArticleNewHome: {
width: winWidth,
paddingHorizontal: 10,
},
boxArticleNewHomeTitle: {
paddingVertical: 10,
marginBottom: 10,
borderBottomWidth: 1,
borderBottomColor: '#e1e1e1',
},
boxArticleNewHomeTitleText: {
fontSize: 16,
fontWeight: 'bold',
color: '#ce0707',
textTransform: 'uppercase',
},
boxArticleNewHomeTitleLine: {
width: 100,
height: 1,
backgroundColor: '#ce0707',
position: 'absolute',
bottom: -1,
left: 0,
},
boxArticleNewHomeList: {
flexDirection: 'column',
width: '100%'
},
boxArticleNewHomeItem: {
marginBottom: 20,
width: '100%',
flexDirection: 'column',
},
boxArticleNewHomeItemcontent: {
width: '100%',
marginBottom: 10,
flexDirection: 'row'
},
boxArticleNewHomeItemInfo: {
width: '65%',
paddingRight: 10,
},
boxArticleNewHomeItemName: {
width: '100%',
fontSize: 14,
fontWeight: 'bold',
color: '#222222',
marginBottom: 8,
},
boxArticleNewHomeItemTimeView: {
flexDirection: 'row',
},
boxArticleNewHomeItemTime: {
fontSize: 13,
color: '#888',
alignItems: 'center'
},
boxArticleNewHomeItemView: {
flexDirection: 'row',
marginLeft: 10,
alignItems: 'center'
},
boxArticleNewHomeItemIcon: {
fontSize: 11,
color: '#2e9fff',
marginRight: 2,
},
boxArticleNewHomeItemViewText: {
fontSize: 13,
color: '#888'
},
boxArticleNewHomeItemImageCt: {
width: '35%',
paddingTop: '35%',
position: 'relative',
overflow: 'hidden',
},
boxArticleNewHomeItemImage: {
width: '100%',
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
boxArticleNewHomeItemSummary: {},
boxArticleHomeHot: {
width: winWidth,
paddingHorizontal: 10,
},
articleHotFirst: {
marginBottom: 20,
paddingBottom: 10,
borderBottomColor: '#e1e1e1',
borderBottomWidth: 1,
},
articleHotFirstImg: {
width: '100%',
height: ratio * 450,
marginBottom: 10,
},
articleHotFirstInfo: {
flexDirection: 'row',
alignItems: 'center'
},
articleHotFirstInfoNum: {
width: 75,
paddingRight: 10,
fontSize: 50,
fontWeight: 'bold',
color: '#cacaca',
fontStyle: 'italic',
},
articleHotFirstInfoContent: {
width: winWidth - 95,
paddingLeft: 10,
borderLeftWidth: 1,
borderLeftColor: '#e1e1e1'
},
articleHotName: {
fontSize: 14,
fontWeight: 'bold',
color: '#222',
marginBottom: 10,
},
articleHotSahre: {
flexDirection: 'row',
alignItems: 'center'
},
articleHotSahreIcon: {
color: '#45629f',
marginRight: 3,
},
articleHotSahreText: {
color: '#999'
},
articleHotItem: {
marginBottom: 20,
},
articleHotInfo: {
flexDirection: 'row',
alignItems: 'center'
},
articleHotNum: {
width: 40,
height: 40,
marginRight: 10,
fontSize: 16,
fontWeight: 'bold',
color: '#222',
fontStyle: 'italic',
backgroundColor: '#f0eded',
textAlign: 'center',
lineHeight: 40,
borderRadius: 20,
overflow: 'hidden',
},
articleHotInfoContent: {
width: winWidth - 70,
paddingLeft: 10,
},
boxArticleHomeList: {
width: winWidth,
paddingHorizontal: 10,
marginBottom: 20,
},
boxArticleHomeListVm: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 20,
},
boxArticleHomeListVmLineL: {
width: halfWinWidth - 85,
height: 1,
backgroundColor: '#e1e1e1'
},
boxArticleHomeListVmLineR: {
width: halfWinWidth - 85,
height: 1,
backgroundColor: '#e1e1e1'
},
boxArticleHomeListVmBt: {
width: 115,
height: 34,
borderRadius: 3,
borderWidth: 1,
borderColor: '#e1e1e1',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
boxArticleHomeListVmText: {
color: '#888'
},
})

164
screens/ArticleList.tsx Normal file
View File

@@ -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'
},
})