ios app
This commit is contained in:
254
argon-pro-react-native/screens/Articles.js
Normal file
254
argon-pro-react-native/screens/Articles.js
Normal file
@@ -0,0 +1,254 @@
|
||||
import React from "react";
|
||||
import {
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Image,
|
||||
TouchableWithoutFeedback,
|
||||
ImageBackground,
|
||||
Dimensions
|
||||
} from "react-native";
|
||||
//galio
|
||||
import { Block, Text, theme } from "galio-framework";
|
||||
//argon
|
||||
import { articles, Images, argonTheme } from "../constants/";
|
||||
import { Card, Button } from "../components/";
|
||||
|
||||
const { width } = Dimensions.get("screen");
|
||||
|
||||
const thumbMeasure = (width - 48 - 32) / 3;
|
||||
const cardWidth = width - theme.SIZES.BASE * 2;
|
||||
const categories = [
|
||||
{
|
||||
title: "Music Album",
|
||||
description:
|
||||
"Rock music is a genre of popular music. It developed during and after the 1960s in the United Kingdom.",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1470225620780-dba8ba36b745?fit=crop&w=840&q=80",
|
||||
price: "$125"
|
||||
},
|
||||
{
|
||||
title: "Events",
|
||||
description:
|
||||
"Rock music is a genre of popular music. It developed during and after the 1960s in the United Kingdom.",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1543747579-795b9c2c3ada?fit=crop&w=840&q=80",
|
||||
price: "$35"
|
||||
}
|
||||
];
|
||||
|
||||
class Articles extends React.Component {
|
||||
renderProduct = (item, index) => {
|
||||
const { navigation } = this.props;
|
||||
|
||||
return (
|
||||
<TouchableWithoutFeedback
|
||||
style={{ zIndex: 3 }}
|
||||
key={`product-${item.title}`}
|
||||
onPress={() => navigation.navigate("Pro", { product: item })}
|
||||
>
|
||||
<Block center style={styles.productItem}>
|
||||
<Image
|
||||
resizeMode="cover"
|
||||
style={styles.productImage}
|
||||
source={{ uri: item.image }}
|
||||
/>
|
||||
<Block center style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
||||
<Text
|
||||
center
|
||||
size={16}
|
||||
color="#525F7F"
|
||||
style={styles.productPrice}
|
||||
>
|
||||
{item.price}
|
||||
</Text>
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} center size={34} color={argonTheme.COLORS.TEXT}>
|
||||
{item.title}
|
||||
</Text>
|
||||
<Text
|
||||
center
|
||||
size={16}
|
||||
color={argonTheme.COLORS.MUTED}
|
||||
style={styles.productDescription}
|
||||
>
|
||||
{item.description}
|
||||
</Text>
|
||||
</Block>
|
||||
</Block>
|
||||
</TouchableWithoutFeedback>
|
||||
);
|
||||
};
|
||||
|
||||
renderCards = () => {
|
||||
return (
|
||||
<Block flex style={styles.group}>
|
||||
<Text size={16} style={styles.title}>
|
||||
Cards
|
||||
</Text>
|
||||
<Block flex>
|
||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
||||
<Card item={articles[0]} horizontal />
|
||||
<Block flex row>
|
||||
<Card
|
||||
item={articles[1]}
|
||||
style={{ marginRight: theme.SIZES.BASE }}
|
||||
/>
|
||||
<Card item={articles[2]} />
|
||||
</Block>
|
||||
<Card item={articles[4]} full />
|
||||
<Block flex card shadow style={styles.category}>
|
||||
<ImageBackground
|
||||
source={{ uri: Images.Products["View article"] }}
|
||||
style={[
|
||||
styles.imageBlock,
|
||||
{ width: width - theme.SIZES.BASE * 2, height: 252 }
|
||||
]}
|
||||
imageStyle={{
|
||||
width: width - theme.SIZES.BASE * 2,
|
||||
height: 252
|
||||
}}
|
||||
>
|
||||
<Block style={styles.categoryTitle}>
|
||||
<Text style={{ fontFamily: 'open-sans-bold' }} size={18} color={theme.COLORS.WHITE}>
|
||||
View article
|
||||
</Text>
|
||||
</Block>
|
||||
</ImageBackground>
|
||||
</Block>
|
||||
</Block>
|
||||
<Block flex style={{ marginTop: theme.SIZES.BASE / 2 }}>
|
||||
<ScrollView
|
||||
horizontal={true}
|
||||
pagingEnabled={true}
|
||||
decelerationRate={0}
|
||||
scrollEventThrottle={16}
|
||||
snapToAlignment="center"
|
||||
showsHorizontalScrollIndicator={false}
|
||||
snapToInterval={cardWidth + theme.SIZES.BASE * 0.375}
|
||||
contentContainerStyle={{
|
||||
paddingHorizontal: theme.SIZES.BASE / 2
|
||||
}}
|
||||
>
|
||||
{categories &&
|
||||
categories.map((item, index) =>
|
||||
this.renderProduct(item, index)
|
||||
)}
|
||||
</ScrollView>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
renderAlbum = () => {
|
||||
const { navigation } = this.props;
|
||||
|
||||
return (
|
||||
<Block
|
||||
flex
|
||||
style={[styles.group, { paddingBottom: theme.SIZES.BASE * 5 }]}
|
||||
>
|
||||
<Block style={{ marginHorizontal: theme.SIZES.BASE * 2 }}>
|
||||
<Block row space="between">
|
||||
<Text bold size={16} color="#525F7F" style={{ marginTop: 3 }}>
|
||||
Album
|
||||
</Text>
|
||||
<Button
|
||||
small
|
||||
color="transparent"
|
||||
textStyle={{ color: "#5E72E4", fontSize: 14 }}
|
||||
>
|
||||
View All
|
||||
</Button>
|
||||
</Block>
|
||||
<Block
|
||||
row
|
||||
space="between"
|
||||
style={{ marginTop: theme.SIZES.BASE, flexWrap: "wrap" }}
|
||||
>
|
||||
{Images.Viewed.map((img, index) => (
|
||||
<Block key={`viewed-${img}`} style={styles.shadow}>
|
||||
<Image
|
||||
resizeMode="cover"
|
||||
source={{ uri: img }}
|
||||
style={styles.albumThumb}
|
||||
/>
|
||||
</Block>
|
||||
))}
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Block flex center>
|
||||
<ScrollView showsVerticalScrollIndicator={false}>
|
||||
{this.renderCards()}
|
||||
{this.renderAlbum()}
|
||||
</ScrollView>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
title: {
|
||||
paddingBottom: theme.SIZES.BASE,
|
||||
paddingHorizontal: theme.SIZES.BASE * 2,
|
||||
marginTop: 22,
|
||||
color: argonTheme.COLORS.HEADER,
|
||||
fontFamily: 'open-sans-bold'
|
||||
},
|
||||
group: {
|
||||
paddingTop: theme.SIZES.BASE
|
||||
},
|
||||
albumThumb: {
|
||||
borderRadius: 4,
|
||||
marginVertical: 4,
|
||||
alignSelf: "center",
|
||||
width: thumbMeasure,
|
||||
height: thumbMeasure
|
||||
},
|
||||
category: {
|
||||
backgroundColor: theme.COLORS.WHITE,
|
||||
marginVertical: theme.SIZES.BASE / 2,
|
||||
borderWidth: 0
|
||||
},
|
||||
categoryTitle: {
|
||||
height: "100%",
|
||||
paddingHorizontal: theme.SIZES.BASE,
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
},
|
||||
imageBlock: {
|
||||
overflow: "hidden",
|
||||
borderRadius: 4
|
||||
},
|
||||
productItem: {
|
||||
width: cardWidth - theme.SIZES.BASE * 2,
|
||||
marginHorizontal: theme.SIZES.BASE,
|
||||
shadowColor: "black",
|
||||
shadowOffset: { width: 0, height: 7 },
|
||||
shadowRadius: 10,
|
||||
shadowOpacity: 0.2
|
||||
},
|
||||
productImage: {
|
||||
width: cardWidth - theme.SIZES.BASE,
|
||||
height: cardWidth - theme.SIZES.BASE,
|
||||
borderRadius: 3
|
||||
},
|
||||
productPrice: {
|
||||
paddingTop: theme.SIZES.BASE,
|
||||
paddingBottom: theme.SIZES.BASE / 2,
|
||||
fontFamily: 'open-sans-bold'
|
||||
},
|
||||
productDescription: {
|
||||
paddingTop: theme.SIZES.BASE,
|
||||
fontFamily: 'open-sans-regular'
|
||||
// paddingBottom: theme.SIZES.BASE * 2,
|
||||
}
|
||||
});
|
||||
|
||||
export default Articles;
|
||||
Reference in New Issue
Block a user