ios app
This commit is contained in:
163
argon-pro-react-native/screens/About.js
Normal file
163
argon-pro-react-native/screens/About.js
Normal file
@@ -0,0 +1,163 @@
|
||||
/**
|
||||
* 关于页面 - 价值前沿
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { ScrollView, StyleSheet, Image, Dimensions } from "react-native";
|
||||
import { Box, VStack, HStack, Text, Center, Icon } from "native-base";
|
||||
import { LinearGradient } from "expo-linear-gradient";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
|
||||
const { width } = Dimensions.get("window");
|
||||
|
||||
// 金色主题
|
||||
const GOLD_PRIMARY = '#D4AF37';
|
||||
const GOLD_GRADIENT = ['#D4AF37', '#F5D77A', '#D4AF37'];
|
||||
|
||||
const FeatureItem = ({ icon, title, description }) => (
|
||||
<HStack
|
||||
bg="rgba(212, 175, 55, 0.08)"
|
||||
borderWidth={1}
|
||||
borderColor="rgba(212, 175, 55, 0.15)"
|
||||
rounded="xl"
|
||||
p={4}
|
||||
space={3}
|
||||
alignItems="center"
|
||||
mb={3}
|
||||
>
|
||||
<Box
|
||||
bg="rgba(212, 175, 55, 0.15)"
|
||||
rounded="lg"
|
||||
p={2}
|
||||
>
|
||||
<Icon as={Ionicons} name={icon} size="md" color={GOLD_PRIMARY} />
|
||||
</Box>
|
||||
<VStack flex={1}>
|
||||
<Text fontSize="sm" fontWeight="bold" color="white">
|
||||
{title}
|
||||
</Text>
|
||||
<Text fontSize="xs" color="gray.400">
|
||||
{description}
|
||||
</Text>
|
||||
</VStack>
|
||||
</HStack>
|
||||
);
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<Box flex={1} bg="#0F172A">
|
||||
<ScrollView
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={styles.container}
|
||||
>
|
||||
{/* Logo 区域 */}
|
||||
<Center mb={6}>
|
||||
<Box
|
||||
bg="rgba(212, 175, 55, 0.1)"
|
||||
borderWidth={1}
|
||||
borderColor="rgba(212, 175, 55, 0.2)"
|
||||
rounded="2xl"
|
||||
p={4}
|
||||
mb={4}
|
||||
>
|
||||
<Image
|
||||
source={require("../assets/logo.jpg")}
|
||||
style={{ width: 80, height: 80 }}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
</Box>
|
||||
<Text fontSize="2xl" fontWeight="bold" color={GOLD_PRIMARY}>
|
||||
价值前沿
|
||||
</Text>
|
||||
<Text fontSize="sm" color="rgba(212, 175, 55, 0.7)" mt={1}>
|
||||
VALUE FRONTIER
|
||||
</Text>
|
||||
<Text fontSize="xs" color="gray.500" mt={2}>
|
||||
Version 1.0.0
|
||||
</Text>
|
||||
</Center>
|
||||
|
||||
{/* 介绍文字 */}
|
||||
<Box
|
||||
bg="rgba(30, 41, 59, 0.6)"
|
||||
borderWidth={1}
|
||||
borderColor="rgba(255, 255, 255, 0.08)"
|
||||
rounded="2xl"
|
||||
p={4}
|
||||
mb={6}
|
||||
>
|
||||
<Text fontSize="sm" color="gray.300" lineHeight="xl" textAlign="center">
|
||||
价值前沿是一款专注于A股市场的智能投资决策平台，
|
||||
通过实时追踪市场事件、分析板块热点，
|
||||
帮助投资者发现市场机会，做出更明智的投资决策。
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* 核心功能 */}
|
||||
<Text fontSize="md" fontWeight="bold" color="white" mb={3}>
|
||||
核心功能
|
||||
</Text>
|
||||
|
||||
<FeatureItem
|
||||
icon="flash"
|
||||
title="事件中心"
|
||||
description="实时追踪市场重大事件，分析事件影响力和相关股票表现"
|
||||
/>
|
||||
<FeatureItem
|
||||
icon="flame"
|
||||
title="市场热点"
|
||||
description="智能分析板块热度，发现市场主线和投资机会"
|
||||
/>
|
||||
<FeatureItem
|
||||
icon="analytics"
|
||||
title="数据分析"
|
||||
description="提供专业的行情数据和技术指标分析工具"
|
||||
/>
|
||||
<FeatureItem
|
||||
icon="notifications"
|
||||
title="智能提醒"
|
||||
description="关键事件和异动股票的实时推送通知"
|
||||
/>
|
||||
|
||||
{/* 联系信息 */}
|
||||
<Box mt={6}>
|
||||
<Text fontSize="md" fontWeight="bold" color="white" mb={3}>
|
||||
联系我们
|
||||
</Text>
|
||||
<Box
|
||||
bg="rgba(30, 41, 59, 0.6)"
|
||||
borderWidth={1}
|
||||
borderColor="rgba(255, 255, 255, 0.08)"
|
||||
rounded="2xl"
|
||||
p={4}
|
||||
>
|
||||
<HStack alignItems="center" space={2} mb={2}>
|
||||
<Icon as={Ionicons} name="globe-outline" size="sm" color="gray.400" />
|
||||
<Text fontSize="sm" color="gray.300">www.valuefrontier.cn</Text>
|
||||
</HStack>
|
||||
<HStack alignItems="center" space={2}>
|
||||
<Icon as={Ionicons} name="mail-outline" size="sm" color="gray.400" />
|
||||
<Text fontSize="sm" color="gray.300">support@valuefrontier.cn</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* 版权信息 */}
|
||||
<Center mt={8} mb={4}>
|
||||
<Text fontSize="xs" color="gray.600">
|
||||
Copyright 2024 Value Frontier
|
||||
</Text>
|
||||
<Text fontSize="xs" color="gray.600">
|
||||
All rights reserved.
|
||||
</Text>
|
||||
</Center>
|
||||
</ScrollView>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
padding: 20,
|
||||
},
|
||||
});
|
||||
60
argon-pro-react-native/screens/Agreement.js
Normal file
60
argon-pro-react-native/screens/Agreement.js
Normal file
@@ -0,0 +1,60 @@
|
||||
import React from "react";
|
||||
import { ScrollView, StyleSheet } from "react-native";
|
||||
import { Block, Text, theme } from "galio-framework";
|
||||
|
||||
import argonTheme from "../constants/Theme";
|
||||
|
||||
export default class Agreement extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<Block flex style={{ position: "relative" }}>
|
||||
<ScrollView
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={styles.agreements}
|
||||
overScrollMode="always"
|
||||
>
|
||||
<Text style={{ fontFamily: 'open-sans-bold' }} size={16} color={argonTheme.COLORS.TEXT}>
|
||||
It all started in the early 1970s, when, floundering a bit in her
|
||||
post-college life, she landed a gig at WBFO, a radio station in
|
||||
Buffalo. There she would call subjects and interview them for the
|
||||
program she hosted, “This Is Radio.” She moved to Philadelphia in
|
||||
1975 to host “Fresh Air,” the brainchild of a colleague from WBFO.
|
||||
</Text>
|
||||
<Text
|
||||
style={{ fontFamily: 'open-sans-regular' }}
|
||||
size={16}
|
||||
color={argonTheme.COLORS.TEXT}
|
||||
style={{ paddingTop: 9 }}
|
||||
>
|
||||
Ms. Gross brings a combination of empathy and rigorous preparation
|
||||
to the job. “I read, watch or listen to as much of the person’s work
|
||||
as possible, so I have an understanding of what makes them, or their
|
||||
story, important,” she said. “I try to clarify in my own mind why
|
||||
this person matters, and why it’s worthy of our listeners’ time.”
|
||||
</Text>
|
||||
<Text
|
||||
style={{ fontFamily: 'open-sans-regular' }}
|
||||
size={16}
|
||||
color={argonTheme.COLORS.TEXT}
|
||||
style={{ paddingTop: 9 }}
|
||||
>
|
||||
One thing she does not allow of her interview subjects, however, is
|
||||
input on the edit. “When the interview is over, you don’t have a
|
||||
chance to call back and say, ‘Well I like my answer to this, I don’t
|
||||
like my answer to that, can you edit that out,” she said. (As
|
||||
someone who has been interviewed by Ms. Gross, I would like to say
|
||||
that I wish I hadn’t insisted that her cats hate her. That said, I
|
||||
never asked for my comment to be removed from that particular
|
||||
episode of “Fresh Air.”)
|
||||
</Text>
|
||||
</ScrollView>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
agreements: {
|
||||
padding: theme.SIZES.BASE
|
||||
}
|
||||
});
|
||||
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;
|
||||
123
argon-pro-react-native/screens/Beauty.js
Normal file
123
argon-pro-react-native/screens/Beauty.js
Normal file
@@ -0,0 +1,123 @@
|
||||
import React from "react";
|
||||
import {
|
||||
StyleSheet,
|
||||
Dimensions,
|
||||
ImageBackground,
|
||||
ScrollView,
|
||||
TouchableWithoutFeedback
|
||||
} from "react-native";
|
||||
import { Block, Text, theme } from "galio-framework";
|
||||
|
||||
import Images from "../constants/Images";
|
||||
|
||||
const { width } = Dimensions.get("screen");
|
||||
|
||||
const menuCategories = {
|
||||
music: [
|
||||
{ id: "artists", title: "Artists", image: Images.Music["Artists"] },
|
||||
{ id: "concerts", title: "Concerts", image: Images.Music["Concerts"] },
|
||||
{ id: "DJs", title: "DJs", image: Images.Music["DJs"] }
|
||||
],
|
||||
beauty: [
|
||||
{ id: "hands", title: "Hands", image: Images.Music["Hands"] },
|
||||
{ id: "body", title: "Body", image: Images.Music["Body"] },
|
||||
{ id: "face", title: "Face", image: Images.Music["Face"] }
|
||||
],
|
||||
fashion: [
|
||||
{ id: "trends", title: "Trends", image: Images.Music["Trends"] },
|
||||
{ id: "clothes", title: "Clothes", image: Images.Music["Clothes"] },
|
||||
{ id: "accessory", title: "Accessory", image: Images.Music["Accessory"] }
|
||||
],
|
||||
clothes: [
|
||||
{ id: "fashion", title: "Fashion", image: Images.Music["Fashion"] },
|
||||
{ id: "garagesale", title: "Garage Sale", image: Images.Music["Garage_sale"] },
|
||||
{ id: "weddingdress", title: "Wedding Dress", image: Images.Music["Wedding_dress"] }
|
||||
]
|
||||
};
|
||||
|
||||
export default class Categories extends React.Component {
|
||||
renderCategories = () => {
|
||||
const { navigation, route } = this.props;
|
||||
// const tabId = navigation.getParam("tabId");
|
||||
// const categories = tabId ? menuCategories[tabId] : menuCategories.beauty;
|
||||
const tabId = route.params?.tabId;
|
||||
const categories = tabId ? menuCategories[tabId] : menuCategories.beauty;
|
||||
|
||||
return (
|
||||
<ScrollView
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={styles.categoryList}
|
||||
>
|
||||
<Block flex>
|
||||
{categories.map(category => (
|
||||
<TouchableWithoutFeedback
|
||||
key={`category-${category.id}`}
|
||||
onPress={() => navigation.navigate("Category", { ...category })}
|
||||
>
|
||||
<Block flex card style={[styles.category, styles.shadow]}>
|
||||
<ImageBackground
|
||||
source={{ uri: category.image }}
|
||||
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}>
|
||||
{category.title}
|
||||
</Text>
|
||||
</Block>
|
||||
</ImageBackground>
|
||||
</Block>
|
||||
</TouchableWithoutFeedback>
|
||||
))}
|
||||
</Block>
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
render() {
|
||||
return (
|
||||
<Block flex center style={styles.categories}>
|
||||
{this.renderCategories()}
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
categories: {
|
||||
width
|
||||
},
|
||||
categoryList: {
|
||||
justifyContent: "center",
|
||||
paddingTop: theme.SIZES.BASE * 1.5
|
||||
},
|
||||
category: {
|
||||
backgroundColor: theme.COLORS.WHITE,
|
||||
marginHorizontal: theme.SIZES.BASE,
|
||||
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
|
||||
},
|
||||
shadow: {
|
||||
shadowColor: theme.COLORS.BLACK,
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowRadius: 3,
|
||||
shadowOpacity: 0.1,
|
||||
elevation: 2
|
||||
}
|
||||
});
|
||||
394
argon-pro-react-native/screens/Cart.js
Normal file
394
argon-pro-react-native/screens/Cart.js
Normal file
@@ -0,0 +1,394 @@
|
||||
import React from "react";
|
||||
import {
|
||||
StyleSheet,
|
||||
Dimensions,
|
||||
Image,
|
||||
FlatList,
|
||||
TouchableWithoutFeedback
|
||||
} from "react-native";
|
||||
import { Block, Text, theme } from "galio-framework";
|
||||
// butoane text mai gros ca la register screen
|
||||
import { Card, Select, Button } from "../components/";
|
||||
import { argonTheme } from "../constants/";
|
||||
import { cart } from "../constants";
|
||||
|
||||
const { width } = Dimensions.get("screen");
|
||||
|
||||
export default class Cart extends React.Component {
|
||||
state = {
|
||||
cart: cart.products
|
||||
};
|
||||
|
||||
handleQuantity = (id, qty) => {
|
||||
const { cart } = this.state;
|
||||
|
||||
const updatedCart = cart.map(product => {
|
||||
if (product.id === id) product.qty = qty;
|
||||
return product;
|
||||
});
|
||||
|
||||
this.setState({ cart: updatedCart });
|
||||
};
|
||||
|
||||
handleDelete = id => {
|
||||
const { cart } = this.state;
|
||||
const updatedCart = cart.filter(product => product.id !== id);
|
||||
this.setState({ cart: updatedCart });
|
||||
};
|
||||
|
||||
handleAdd = item => {
|
||||
const { cart } = this.state;
|
||||
|
||||
cart.push({
|
||||
...item,
|
||||
id: cart.length + 1,
|
||||
stock: true,
|
||||
qty: 1
|
||||
});
|
||||
|
||||
this.setState({ cart });
|
||||
};
|
||||
|
||||
renderProduct = ({ item }) => {
|
||||
const { navigation } = this.props;
|
||||
|
||||
return (
|
||||
<Block>
|
||||
<Block card shadow style={styles.product}>
|
||||
<Block flex row>
|
||||
<TouchableWithoutFeedback
|
||||
onPress={() => navigation.navigate("Product", { product: item })}
|
||||
>
|
||||
<Block style={styles.imageHorizontal}>
|
||||
<Image
|
||||
source={{ uri: item.image }}
|
||||
style={{
|
||||
height: theme.SIZES.BASE * 5,
|
||||
marginTop: -theme.SIZES.BASE,
|
||||
borderRadius: 3
|
||||
}}
|
||||
/>
|
||||
</Block>
|
||||
</TouchableWithoutFeedback>
|
||||
<Block flex style={styles.productDescription}>
|
||||
<TouchableWithoutFeedback
|
||||
onPress={() =>
|
||||
navigation.navigate("Product", { product: item })
|
||||
}
|
||||
>
|
||||
<Text size={14} style={styles.productTitle} color={argonTheme.COLORS.TEXT}>
|
||||
{item.title}
|
||||
</Text>
|
||||
</TouchableWithoutFeedback>
|
||||
<Block flex row space="between">
|
||||
<Block bottom>
|
||||
<Text
|
||||
style={{ fontFamily: 'open-sans-regular' }}
|
||||
size={theme.SIZES.BASE * 0.75}
|
||||
color={argonTheme.COLORS[item.stock ? "SUCCESS" : "ERROR"]}
|
||||
>
|
||||
{item.stock ? "In Stock" : "Out of Stock"}
|
||||
</Text>
|
||||
</Block>
|
||||
<Block bottom>
|
||||
<Text
|
||||
style={{ fontFamily: 'open-sans-regular' }}
|
||||
size={theme.SIZES.BASE * 0.75}
|
||||
color={argonTheme.COLORS.ACTIVE}
|
||||
>
|
||||
${item.price * item.qty}
|
||||
</Text>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
<Block flex row space="between" style={styles.options}>
|
||||
<Block style={{marginTop: 8}}>
|
||||
<Select
|
||||
defaultIndex={1}
|
||||
disabled={!item.stock}
|
||||
options={[1, 2, 3, 4, 5]}
|
||||
onSelect={(index, value) => this.handleQuantity(item.id, value)}
|
||||
/>
|
||||
</Block>
|
||||
<Button
|
||||
center
|
||||
shadowless
|
||||
color="default"
|
||||
textStyle={styles.optionsButtonText}
|
||||
style={styles.optionsButton}
|
||||
onPress={() => this.handleDelete(item.id)}
|
||||
>
|
||||
DELETE
|
||||
</Button>
|
||||
<Button
|
||||
center
|
||||
shadowless
|
||||
color="default"
|
||||
textStyle={styles.optionsButtonText}
|
||||
style={styles.optionsButton}
|
||||
onPress={() => console.log("save for later")}
|
||||
>
|
||||
SAVE FOR LATER
|
||||
</Button>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
renderHorizontalProduct = ({ item }) => {
|
||||
const buttonStyles = {
|
||||
...styles.optionsButton,
|
||||
marginTop: 5
|
||||
};
|
||||
return (
|
||||
<Block style={{ marginRight: theme.SIZES.BASE }}>
|
||||
<Card
|
||||
item={item}
|
||||
imageStyle={{ width: "auto", height: 94 }}
|
||||
style={{ width: width / 2.88 }}
|
||||
/>
|
||||
<Button
|
||||
center
|
||||
shadowless
|
||||
color="active"
|
||||
style={buttonStyles}
|
||||
textStyle={[styles.optionsButtonText, { color: "white" }]}
|
||||
onPress={() => this.handleAdd(item)}
|
||||
>
|
||||
ADD TO CART
|
||||
</Button>
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
renderHorizontalProducts = () => {
|
||||
return (
|
||||
<Block style={{ marginHorizontal: theme.SIZES.BASE }}>
|
||||
<Text bold size={theme.SIZES.BASE} style={styles.similarTitle} color={argonTheme.COLORS.TEXT}>
|
||||
Customers who shopped for items in your cart also shopped for:
|
||||
</Text>
|
||||
<FlatList
|
||||
data={cart.suggestions}
|
||||
horizontal={true}
|
||||
showsHorizontalScrollIndicator={false}
|
||||
keyExtractor={(item, index) => `${index}-${item.title}`}
|
||||
renderItem={this.renderHorizontalProduct}
|
||||
/>
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
renderHeader = () => {
|
||||
const { navigation } = this.props;
|
||||
const { cart } = this.state;
|
||||
const productsQty = cart.length;
|
||||
const total =
|
||||
cart &&
|
||||
cart.reduce((prev, product) => prev + product.price * product.qty, 0);
|
||||
|
||||
return (
|
||||
<Block flex style={styles.header}>
|
||||
<Block style={{ marginBottom: theme.SIZES.BASE * 2 }}>
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} color={argonTheme.COLORS.TEXT}>
|
||||
Cart subtotal ({productsQty} items):{" "}
|
||||
<Text style={{ fontFamily: 'open-sans-bold' }} color={argonTheme.COLORS.ERROR}>
|
||||
${total}
|
||||
</Text>
|
||||
</Text>
|
||||
</Block>
|
||||
<Block center>
|
||||
<Button
|
||||
flex
|
||||
center
|
||||
style={styles.checkout}
|
||||
color="active"
|
||||
onPress={() => navigation.navigate("Account")}
|
||||
fontSize={14}
|
||||
>
|
||||
PROCEED TO CHECKOUT
|
||||
</Button>
|
||||
</Block>
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
renderFooter = () => {
|
||||
const { navigation } = this.props;
|
||||
return (
|
||||
<Block flex style={styles.footer}>
|
||||
{this.renderHorizontalProducts()}
|
||||
<Block style={{ marginHorizontal: theme.SIZES.BASE }}>
|
||||
</Block>
|
||||
<Block center style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
||||
<Button
|
||||
flex
|
||||
center
|
||||
style={styles.checkout}
|
||||
color="active"
|
||||
onPress={() => navigation.navigate("Account")}
|
||||
fontSize={14}
|
||||
>
|
||||
PROCEED TO CHECKOUT
|
||||
</Button>
|
||||
</Block>
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
renderEmpty() {
|
||||
return <Text style={{ fontFamily: 'open-sans-regular' }} color={argonTheme.COLORS.ERROR}>The cart is empty</Text>;
|
||||
}
|
||||
|
||||
renderCheckoutButton() {
|
||||
const { navigation } = this.props;
|
||||
return (
|
||||
<Block center>
|
||||
<Button
|
||||
flex
|
||||
center
|
||||
style={styles.checkout}
|
||||
color="active"
|
||||
onPress={() => navigation.navigate("Account")}
|
||||
fontSize={14}
|
||||
>
|
||||
PROCEED TO CHECKOUT
|
||||
</Button>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Block flex center style={styles.cart}>
|
||||
<FlatList
|
||||
data={this.state.cart}
|
||||
renderItem={this.renderProduct}
|
||||
showsVerticalScrollIndicator={false}
|
||||
keyExtractor={(item, index) => `${index}-${item.title}`}
|
||||
ListEmptyComponent={this.renderEmpty()}
|
||||
ListHeaderComponent={this.renderHeader()}
|
||||
ListFooterComponent={this.renderFooter()}
|
||||
/>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
cart: {
|
||||
width: width
|
||||
},
|
||||
header: {
|
||||
marginTop: theme.SIZES.BASE,
|
||||
marginHorizontal: theme.SIZES.BASE
|
||||
},
|
||||
footer: {
|
||||
marginBottom: theme.SIZES.BASE * 2
|
||||
},
|
||||
divider: {
|
||||
height: 1,
|
||||
backgroundColor: argonTheme.COLORS.INPUT,
|
||||
marginVertical: theme.SIZES.BASE
|
||||
},
|
||||
checkoutWrapper: {
|
||||
paddingTop: theme.SIZES.BASE * 2,
|
||||
margin: theme.SIZES.BASE,
|
||||
borderStyle: "solid",
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: argonTheme.COLORS.INPUT
|
||||
},
|
||||
products: {
|
||||
minHeight: "100%"
|
||||
},
|
||||
product: {
|
||||
width: width * 0.9,
|
||||
borderWidth: 0,
|
||||
marginVertical: theme.SIZES.BASE,
|
||||
marginHorizontal: theme.SIZES.BASE,
|
||||
backgroundColor: theme.COLORS.WHITE,
|
||||
shadowColor: "black",
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowRadius: theme.SIZES.BASE / 4,
|
||||
shadowOpacity: 0.1
|
||||
},
|
||||
productTitle: {
|
||||
fontFamily: 'open-sans-regular',
|
||||
flex: 1,
|
||||
flexWrap: "wrap",
|
||||
paddingBottom: 6
|
||||
},
|
||||
productDescription: {
|
||||
padding: theme.SIZES.BASE / 2
|
||||
},
|
||||
imageHorizontal: {
|
||||
width: theme.SIZES.BASE * 6.25,
|
||||
margin: theme.SIZES.BASE / 2
|
||||
},
|
||||
options: {
|
||||
padding: theme.SIZES.BASE / 2
|
||||
},
|
||||
qty: {
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignContent: "center",
|
||||
width: theme.SIZES.BASE * 6.25,
|
||||
backgroundColor: argonTheme.COLORS.INPUT,
|
||||
paddingHorizontal: theme.SIZES.BASE,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 3,
|
||||
shadowColor: "rgba(0, 0, 0, 0.1)",
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowRadius: 4,
|
||||
shadowOpacity: 1
|
||||
},
|
||||
optionsButtonText: {
|
||||
fontFamily: 'open-sans-bold',
|
||||
fontSize: theme.SIZES.BASE * 0.75,
|
||||
color: theme.COLORS.WHITE,
|
||||
fontWeight: "normal",
|
||||
fontStyle: "normal",
|
||||
letterSpacing: -0.29
|
||||
},
|
||||
optionsButton: {
|
||||
width: "auto",
|
||||
height: 34,
|
||||
paddingHorizontal: theme.SIZES.BASE,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 3,
|
||||
shadowColor: "rgba(0, 0, 0, 0.1)",
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowRadius: 4,
|
||||
shadowOpacity: 1
|
||||
},
|
||||
checkout: {
|
||||
height: theme.SIZES.BASE * 3,
|
||||
width: width - theme.SIZES.BASE * 4,
|
||||
shadowColor: "black",
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowRadius: 8,
|
||||
shadowOpacity: 0.2
|
||||
},
|
||||
similarTitle: {
|
||||
lineHeight: 26,
|
||||
marginBottom: theme.SIZES.BASE,
|
||||
paddingHorizontal: theme.SIZES.BASE
|
||||
},
|
||||
productVertical: {
|
||||
height: theme.SIZES.BASE * 10.75,
|
||||
width: theme.SIZES.BASE * 8.125,
|
||||
overflow: "hidden",
|
||||
borderWidth: 0,
|
||||
borderRadius: 4,
|
||||
marginBottom: theme.SIZES.BASE,
|
||||
backgroundColor: theme.COLORS.WHITE,
|
||||
shadowColor: "rgba(0, 0, 0, 0.1)",
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 2
|
||||
},
|
||||
shadowRadius: theme.SIZES.BASE / 4,
|
||||
shadowOpacity: 1
|
||||
}
|
||||
});
|
||||
159
argon-pro-react-native/screens/Category.js
Normal file
159
argon-pro-react-native/screens/Category.js
Normal file
@@ -0,0 +1,159 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Image,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
Dimensions,
|
||||
TouchableWithoutFeedback
|
||||
} from "react-native";
|
||||
import { Block, Text, theme } from "galio-framework";
|
||||
|
||||
import { Card } from "../components/";
|
||||
import categories from "../constants/categories";
|
||||
import { argonTheme } from "../constants";
|
||||
|
||||
const { width } = Dimensions.get("window");
|
||||
const cardWidth = width - theme.SIZES.BASE * 2;
|
||||
|
||||
export default class Category extends React.Component {
|
||||
renderSuggestions = () => {
|
||||
const { navigation, route } = this.props;
|
||||
// const { params } = navigation && navigation.state;
|
||||
// const category = categories[params.id];
|
||||
// const suggestions = category && category.suggestions;
|
||||
const category = categories[route.params?.id];
|
||||
const suggestions = category && category.suggestions;
|
||||
|
||||
if (!suggestions) return null;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Card item={suggestions[0]} style={{ marginRight: theme.SIZES.BASE }} />
|
||||
<Card item={suggestions[1]} />
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
renderCard = (item, index) => {
|
||||
const { navigation } = this.props;
|
||||
return (
|
||||
<TouchableWithoutFeedback
|
||||
key={`Card-${item.title}`}
|
||||
onPress={() => navigation.navigate("Product", { product: item })}
|
||||
>
|
||||
<Block flex style={styles.Card}>
|
||||
<Image
|
||||
resizeMode="cover"
|
||||
style={styles.image}
|
||||
source={{ uri: item.image }}
|
||||
/>
|
||||
<Block center style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
||||
<Text
|
||||
center
|
||||
size={16}
|
||||
color="#525F7F"
|
||||
style={styles.price}
|
||||
>
|
||||
$125
|
||||
</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.description}
|
||||
>
|
||||
{item.description}
|
||||
</Text>
|
||||
</Block>
|
||||
</Block>
|
||||
</TouchableWithoutFeedback>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { navigation, route } = this.props;
|
||||
// const { params } = navigation && navigation.state;
|
||||
// const category = categories[params.id];
|
||||
const category = categories[route.params?.id];
|
||||
|
||||
return (
|
||||
<Block flex>
|
||||
<ScrollView
|
||||
scrollEventThrottle={16}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<Block flex={3}>
|
||||
<ScrollView
|
||||
horizontal={true}
|
||||
pagingEnabled={true}
|
||||
decelerationRate={0}
|
||||
scrollEventThrottle={16}
|
||||
snapToAlignment="center"
|
||||
showsHorizontalScrollIndicator={false}
|
||||
snapToInterval={cardWidth + theme.SIZES.BASE * 0.375}
|
||||
contentContainerStyle={{ paddingRight: theme.SIZES.BASE }}
|
||||
>
|
||||
{category &&
|
||||
category.images.map((item, index) =>
|
||||
this.renderCard(item, index)
|
||||
)}
|
||||
</ScrollView>
|
||||
</Block>
|
||||
<Block flex row style={{ marginHorizontal: theme.SIZES.BASE }}>
|
||||
{this.renderSuggestions()}
|
||||
</Block>
|
||||
</ScrollView>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
Card: {
|
||||
width: cardWidth - theme.SIZES.BASE * 2,
|
||||
marginHorizontal: theme.SIZES.BASE,
|
||||
marginTop: theme.SIZES.BASE * 2,
|
||||
shadowColor: "black",
|
||||
shadowOffset: { width: 0, height: 7 },
|
||||
shadowRadius: 10,
|
||||
shadowOpacity: 0.2
|
||||
},
|
||||
image: {
|
||||
width: cardWidth - theme.SIZES.BASE,
|
||||
height: cardWidth - theme.SIZES.BASE,
|
||||
borderRadius: 3
|
||||
},
|
||||
imageVertical: {
|
||||
overflow: "hidden",
|
||||
borderTopRightRadius: 4,
|
||||
borderTopLeftRadius: 4
|
||||
},
|
||||
price: {
|
||||
fontFamily: 'open-sans-bold',
|
||||
paddingTop: theme.SIZES.BASE,
|
||||
paddingBottom: theme.SIZES.BASE / 2
|
||||
},
|
||||
description: {
|
||||
fontFamily: 'open-sans-regular',
|
||||
paddingTop: theme.SIZES.BASE,
|
||||
paddingBottom: theme.SIZES.BASE * 2
|
||||
},
|
||||
suggestion: {
|
||||
backgroundColor: theme.COLORS.WHITE,
|
||||
marginBottom: theme.SIZES.BASE,
|
||||
borderWidth: 0,
|
||||
marginLeft: theme.SIZES.BASE / 2,
|
||||
marginRight: theme.SIZES.BASE / 2
|
||||
},
|
||||
suggestionTitle: {
|
||||
flex: 1,
|
||||
flexWrap: "wrap",
|
||||
paddingBottom: 6
|
||||
},
|
||||
suggestionDescription: {
|
||||
padding: theme.SIZES.BASE / 2
|
||||
}
|
||||
});
|
||||
269
argon-pro-react-native/screens/Chat.js
Normal file
269
argon-pro-react-native/screens/Chat.js
Normal file
@@ -0,0 +1,269 @@
|
||||
import React from "react";
|
||||
import {
|
||||
View,
|
||||
Image,
|
||||
StyleSheet,
|
||||
FlatList,
|
||||
KeyboardAvoidingView
|
||||
} from "react-native";
|
||||
|
||||
import { Input, Block, Text, theme } from "galio-framework";
|
||||
import { Icon } from "../components/";
|
||||
|
||||
import Images from "../constants/Images";
|
||||
import argonTheme from "../constants/Theme";
|
||||
|
||||
const messages = [
|
||||
{
|
||||
id: 1,
|
||||
avatar: Images.ProfileChat,
|
||||
message: `Hey there! How are you today? Can we me et and talk? Thanks!`,
|
||||
time: `10:31 PM`
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
message: `Sure, just let me finish something and I’ll call you.`,
|
||||
time: `10:34 PM`
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
avatar: Images.ProfileChat,
|
||||
message: `OK. Cool! See you!`,
|
||||
time: `10:35 PM`
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
message: `Bye bye`,
|
||||
time: `10:36 PM`
|
||||
}
|
||||
];
|
||||
|
||||
export default class Chat extends React.Component {
|
||||
state = {
|
||||
messages: messages,
|
||||
height: 0
|
||||
};
|
||||
|
||||
messagesScroll = React.createRef();
|
||||
|
||||
itemLayout = (data, index) => ({
|
||||
length: this.state.messages.length - 1,
|
||||
offset: 32 * index,
|
||||
index
|
||||
});
|
||||
|
||||
handleScroll = () => {
|
||||
// const totalIndex = this.state.messages.length - 1;
|
||||
// const insetBottom = this.state.messages.length * (theme.SIZES.BASE * 6.5) + 64; // total messages x message height
|
||||
setTimeout(() => {
|
||||
this.messagesScroll.current.scrollToOffset({ offset: this.state.height });
|
||||
}, 1);
|
||||
};
|
||||
|
||||
onContentSizeChange = (width, height) => {
|
||||
this.setState({
|
||||
height
|
||||
});
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
// this.handleScroll();
|
||||
}
|
||||
|
||||
renderMessage = msg => {
|
||||
if (msg.avatar) {
|
||||
return (
|
||||
<Block key={msg.id}>
|
||||
<Block row space={null}>
|
||||
<Image
|
||||
source={{ uri: msg.avatar }}
|
||||
style={[styles.avatar, styles.shadow]}
|
||||
/>
|
||||
<Block style={styles.messageCardWrapper}>
|
||||
<Block style={[styles.messageCard, styles.shadow]}>
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} color={argonTheme.COLORS.TEXT}>{msg.message}</Text>
|
||||
</Block>
|
||||
<Block right>
|
||||
<Text style={styles.time}>{msg.time}</Text>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Block key={msg.id} right>
|
||||
<Block row>
|
||||
<Block style={styles.messageCardWrapper}>
|
||||
<Block style={[styles.messageCardPersonal, styles.shadow]}>
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} color={argonTheme.COLORS.WHITE}>{msg.message}</Text>
|
||||
</Block>
|
||||
<Block right>
|
||||
<Text style={[styles.time, { marginRight: 8 }]}>{msg.time}</Text>
|
||||
</Block>
|
||||
</Block>
|
||||
<Image
|
||||
source={Images.ProfilePicture }
|
||||
style={[styles.avatar, styles.shadow]}
|
||||
/>
|
||||
</Block>
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
renderMessages = () => {
|
||||
const insetBottom =
|
||||
this.state.messages.length * (theme.SIZES.BASE * 6.5) + 64; // total messages x message height
|
||||
return (
|
||||
<FlatList
|
||||
ref={this.messagesScroll}
|
||||
data={this.state.messages}
|
||||
keyExtractor={item => `${item.id}`}
|
||||
showsVerticalScrollIndicator={false}
|
||||
getItemLayout={this.itemLayout}
|
||||
contentContainerStyle={[styles.messagesWrapper]}
|
||||
renderItem={({ item }) => this.renderMessage(item)}
|
||||
onContentSizeChange={this.onContentSizeChange}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
handleMessageChange = (type, text) => {
|
||||
this.setState({ message: text });
|
||||
};
|
||||
|
||||
handleMessage = () => {
|
||||
const { messages, message } = this.state;
|
||||
const date = new Date();
|
||||
|
||||
messages.push({
|
||||
id: messages.length + 1,
|
||||
message: message,
|
||||
time: date.toLocaleString("en-US", { hour: "2-digit", minute: "numeric" })
|
||||
});
|
||||
|
||||
this.setState({ messages, message: "" });
|
||||
this.handleScroll();
|
||||
};
|
||||
|
||||
messageForm = () => {
|
||||
const { navigation } = this.props;
|
||||
|
||||
return (
|
||||
<View style={styles.messageFormContainer}>
|
||||
<Block>
|
||||
<Input
|
||||
borderless
|
||||
color="#9fa5aa"
|
||||
multiline
|
||||
blurOnSubmit
|
||||
style={styles.input}
|
||||
placeholder="Message"
|
||||
autoCapitalize="none"
|
||||
returnKeyType="send"
|
||||
textContentType="none"
|
||||
placeholderTextColor="#9fa5aa"
|
||||
defaultValue={this.state.message}
|
||||
onSubmitEditing={this.handleMessage}
|
||||
onChangeText={text => this.handleMessageChange("message", text)}
|
||||
iconContent={
|
||||
<Icon
|
||||
size={14}
|
||||
name="camera"
|
||||
family="font-awesome"
|
||||
color={argonTheme.COLORS.ICON}
|
||||
style={{ marginRight: 12, marginTop: 5 }}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Block>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Block flex space="between" style={styles.container}>
|
||||
<KeyboardAvoidingView
|
||||
enabled
|
||||
behavior="padding"
|
||||
style={{ flex: 1 }}
|
||||
keyboardVerticalOffset={theme.SIZES.BASE * 5}
|
||||
>
|
||||
{this.renderMessages()}
|
||||
{this.messageForm()}
|
||||
</KeyboardAvoidingView>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {},
|
||||
messageFormContainer: {
|
||||
height: 96,
|
||||
paddingHorizontal: 16,
|
||||
paddingTop: 16,
|
||||
paddingBottom: 32
|
||||
},
|
||||
input: {
|
||||
// width: width * 0.93,
|
||||
height: theme.SIZES.BASE * 3,
|
||||
backgroundColor: theme.COLORS.WHITE,
|
||||
shadowColor: theme.COLORS.BLACK,
|
||||
shadowOffset: { width: 0, height: 0.7 },
|
||||
shadowRadius: 3,
|
||||
shadowOpacity: 0.07,
|
||||
elevation: 2,
|
||||
},
|
||||
iconButton: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
backgroundColor: "transparent"
|
||||
},
|
||||
messagesWrapper: {
|
||||
flexGrow: 1,
|
||||
top: 0,
|
||||
paddingLeft: 8,
|
||||
paddingRight: 8,
|
||||
paddingVertical: 16,
|
||||
paddingBottom: 56
|
||||
},
|
||||
messageCardWrapper: {
|
||||
maxWidth: "85%",
|
||||
marginLeft: 8,
|
||||
marginBottom: 32
|
||||
},
|
||||
messageCard: {
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 16,
|
||||
borderRadius: 6,
|
||||
backgroundColor: theme.COLORS.WHITE
|
||||
},
|
||||
messageCardPersonal: {
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 16,
|
||||
borderRadius: 6,
|
||||
marginRight: 8,
|
||||
backgroundColor: argonTheme.COLORS.PRIMARY
|
||||
},
|
||||
shadow: {
|
||||
shadowColor: "rgba(0, 0, 0, 0.1)",
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowRadius: 3,
|
||||
shadowOpacity: 1
|
||||
},
|
||||
time: {
|
||||
fontFamily: 'open-sans-regular',
|
||||
fontSize: 11,
|
||||
opacity: 0.5,
|
||||
marginTop: 8
|
||||
},
|
||||
avatar: {
|
||||
height: 40,
|
||||
width: 40,
|
||||
borderRadius: 20,
|
||||
marginBottom: theme.SIZES.BASE
|
||||
}
|
||||
});
|
||||
490
argon-pro-react-native/screens/Elements.js
Normal file
490
argon-pro-react-native/screens/Elements.js
Normal file
@@ -0,0 +1,490 @@
|
||||
import React from "react";
|
||||
import {
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Dimensions,
|
||||
TouchableOpacity
|
||||
} from "react-native";
|
||||
// Galio components
|
||||
import { Block, Text, Button as GaButton, theme } from "galio-framework";
|
||||
// Argon themed components
|
||||
import { argonTheme, tabs } from "../constants/";
|
||||
import { Button, Select, Icon, Input, Header, Switch } from "../components/";
|
||||
|
||||
const { width } = Dimensions.get("screen");
|
||||
|
||||
class Elements extends React.Component {
|
||||
state = {
|
||||
"switch-1": true,
|
||||
"switch-2": false
|
||||
};
|
||||
|
||||
toggleSwitch = switchId =>
|
||||
this.setState({ [switchId]: !this.state[switchId] });
|
||||
|
||||
renderButtons = () => {
|
||||
return (
|
||||
<Block flex>
|
||||
<Text size={16} style={styles.title}>
|
||||
Buttons
|
||||
</Text>
|
||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
||||
<Block center>
|
||||
<Button textStyle={{ fontFamily: 'open-sans-bold' }} color="default" style={styles.button}>
|
||||
DEFAULT
|
||||
</Button>
|
||||
</Block>
|
||||
<Block center>
|
||||
<Button
|
||||
color="secondary"
|
||||
textStyle={{ fontFamily: 'open-sans-bold', color: "black" }}
|
||||
style={styles.button}
|
||||
>
|
||||
SECONDARY
|
||||
</Button>
|
||||
</Block>
|
||||
<Block center>
|
||||
<Button textStyle={{ fontFamily: 'open-sans-bold' }} style={styles.button}>PRIMARY</Button>
|
||||
</Block>
|
||||
<Block center>
|
||||
<Button textStyle={{ fontFamily: 'open-sans-bold' }} color="info" style={styles.button}>
|
||||
INFO
|
||||
</Button>
|
||||
</Block>
|
||||
<Block center>
|
||||
<Button textStyle={{ fontFamily: 'open-sans-bold' }} color="success" style={styles.button}>
|
||||
SUCCESS
|
||||
</Button>
|
||||
</Block>
|
||||
<Block center>
|
||||
<Button textStyle={{ fontFamily: 'open-sans-bold' }} color="warning" style={styles.button}>
|
||||
WARNING
|
||||
</Button>
|
||||
</Block>
|
||||
<Block center>
|
||||
<Button textStyle={{ fontFamily: 'open-sans-bold' }} color="error" style={styles.button}>
|
||||
ERROR
|
||||
</Button>
|
||||
</Block>
|
||||
<Block row space="evenly">
|
||||
<Block flex left style={{marginTop: 8}}>
|
||||
<Select
|
||||
defaultIndex={1}
|
||||
options={["01", "02", "03", "04", "05"]}
|
||||
/>
|
||||
</Block>
|
||||
<Block flex center>
|
||||
<Button textStyle={{ fontFamily: 'open-sans-bold', fontSize: 12 }} small center color="default" style={styles.optionsButton}>
|
||||
DELETE
|
||||
</Button>
|
||||
</Block>
|
||||
<Block flex={1.25} right>
|
||||
<Button textStyle={{ fontFamily: 'open-sans-bold', fontSize: 12 }} center color="default" style={styles.optionsButton}>
|
||||
SAVE FOR LATER
|
||||
</Button>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
renderText = () => {
|
||||
return (
|
||||
<Block flex style={styles.group}>
|
||||
<Text size={16} style={styles.title}>
|
||||
Typography
|
||||
</Text>
|
||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
||||
<Text
|
||||
h1
|
||||
style={{ fontFamily: 'open-sans-regular', marginBottom: theme.SIZES.BASE / 2 }}
|
||||
color={argonTheme.COLORS.DEFAULT}
|
||||
>
|
||||
Heading 1
|
||||
</Text>
|
||||
<Text
|
||||
h2
|
||||
style={{ fontFamily: 'open-sans-regular', marginBottom: theme.SIZES.BASE / 2 }}
|
||||
color={argonTheme.COLORS.DEFAULT}
|
||||
>
|
||||
Heading 2
|
||||
</Text>
|
||||
<Text
|
||||
h3
|
||||
style={{ fontFamily: 'open-sans-regular', marginBottom: theme.SIZES.BASE / 2 }}
|
||||
color={argonTheme.COLORS.DEFAULT}
|
||||
>
|
||||
Heading 3
|
||||
</Text>
|
||||
<Text
|
||||
h4
|
||||
style={{ fontFamily: 'open-sans-regular', marginBottom: theme.SIZES.BASE / 2 }}
|
||||
color={argonTheme.COLORS.DEFAULT}
|
||||
>
|
||||
Heading 4
|
||||
</Text>
|
||||
<Text
|
||||
h5
|
||||
style={{ fontFamily: 'open-sans-regular', marginBottom: theme.SIZES.BASE / 2 }}
|
||||
color={argonTheme.COLORS.DEFAULT}
|
||||
>
|
||||
Heading 5
|
||||
</Text>
|
||||
<Text
|
||||
p
|
||||
style={{ fontFamily: 'open-sans-regular', marginBottom: theme.SIZES.BASE / 2 }}
|
||||
color={argonTheme.COLORS.DEFAULT}
|
||||
>
|
||||
Paragraph
|
||||
</Text>
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} muted>This is a muted paragraph.</Text>
|
||||
</Block>
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
renderInputs = () => {
|
||||
return (
|
||||
<Block flex style={styles.group}>
|
||||
<Text size={16} style={styles.title}>
|
||||
Inputs
|
||||
</Text>
|
||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
||||
<Input right placeholder="Regular" iconContent={<Block />} />
|
||||
</Block>
|
||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
||||
<Input
|
||||
right
|
||||
placeholder="Regular Custom"
|
||||
style={{
|
||||
borderColor: argonTheme.COLORS.INFO,
|
||||
borderRadius: 4,
|
||||
backgroundColor: "#fff"
|
||||
}}
|
||||
iconContent={<Block />}
|
||||
/>
|
||||
</Block>
|
||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
||||
<Input
|
||||
placeholder="Icon left"
|
||||
iconContent={
|
||||
<Icon
|
||||
size={11}
|
||||
style={{ marginRight: 10 }}
|
||||
color={argonTheme.COLORS.ICON}
|
||||
name="search-zoom-in"
|
||||
family="ArgonExtra"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Block>
|
||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
||||
<Input
|
||||
right
|
||||
placeholder="Icon Right"
|
||||
iconContent={
|
||||
<Icon
|
||||
size={11}
|
||||
color={argonTheme.COLORS.ICON}
|
||||
name="search-zoom-in"
|
||||
family="ArgonExtra"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Block>
|
||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
||||
<Input
|
||||
success
|
||||
right
|
||||
placeholder="Success"
|
||||
iconContent={
|
||||
<Block
|
||||
middle
|
||||
style={{
|
||||
width: 20,
|
||||
height: 20,
|
||||
borderRadius: 10,
|
||||
backgroundColor: argonTheme.COLORS.INPUT_SUCCESS
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
size={11}
|
||||
color={argonTheme.COLORS.ICON}
|
||||
name="g-check"
|
||||
family="ArgonExtra"
|
||||
/>
|
||||
</Block>
|
||||
}
|
||||
/>
|
||||
</Block>
|
||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
||||
<Input
|
||||
error
|
||||
right
|
||||
placeholder="Error Input"
|
||||
iconContent={
|
||||
<Block
|
||||
middle
|
||||
style={{
|
||||
width: 20,
|
||||
height: 20,
|
||||
borderRadius: 10,
|
||||
backgroundColor: argonTheme.COLORS.INPUT_ERROR
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
size={11}
|
||||
color={argonTheme.COLORS.ICON}
|
||||
name="support"
|
||||
family="ArgonExtra"
|
||||
/>
|
||||
</Block>
|
||||
}
|
||||
/>
|
||||
</Block>
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
renderSwitches = () => {
|
||||
return (
|
||||
<Block flex style={styles.group}>
|
||||
<Text size={16} style={styles.title}>
|
||||
Switches
|
||||
</Text>
|
||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
||||
<Block
|
||||
row
|
||||
middle
|
||||
space="between"
|
||||
style={{ marginBottom: theme.SIZES.BASE }}
|
||||
>
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} size={14} color={argonTheme.COLORS.TEXT}>Switch is ON</Text>
|
||||
<Switch
|
||||
value={this.state["switch-1"]}
|
||||
onValueChange={() => this.toggleSwitch("switch-1")}
|
||||
/>
|
||||
</Block>
|
||||
<Block row middle space="between">
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} size={14} color={argonTheme.COLORS.TEXT}>Switch is OFF</Text>
|
||||
<Switch
|
||||
value={this.state["switch-2"]}
|
||||
onValueChange={() => this.toggleSwitch("switch-2")}
|
||||
/>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
renderTableCell = () => {
|
||||
const { navigation } = this.props;
|
||||
return (
|
||||
<Block flex style={styles.group}>
|
||||
<Text size={16} style={styles.title}>
|
||||
Table Cell
|
||||
</Text>
|
||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
||||
<Block style={styles.rows}>
|
||||
<TouchableOpacity onPress={() => navigation.navigate("Pro")}>
|
||||
<Block row middle space="between" style={{ paddingTop: 7 }}>
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} size={14} color={argonTheme.COLORS.TEXT}>Manage Options</Text>
|
||||
<Icon
|
||||
name="chevron-right"
|
||||
family="entypo"
|
||||
style={{ paddingRight: 5 }}
|
||||
/>
|
||||
</Block>
|
||||
</TouchableOpacity>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
renderSocial = () => {
|
||||
return (
|
||||
<Block flex style={styles.group}>
|
||||
<Text size={16} style={styles.title}>
|
||||
Social
|
||||
</Text>
|
||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
||||
<Block row center space="between">
|
||||
<Block flex middle right>
|
||||
<GaButton
|
||||
round
|
||||
onlyIcon
|
||||
shadowless
|
||||
icon="facebook"
|
||||
iconFamily="Font-Awesome"
|
||||
iconColor={theme.COLORS.WHITE}
|
||||
iconSize={theme.SIZES.BASE * 1.625}
|
||||
color={argonTheme.COLORS.FACEBOOK}
|
||||
style={[styles.social, styles.shadow]}
|
||||
/>
|
||||
</Block>
|
||||
<Block flex middle center>
|
||||
<GaButton
|
||||
round
|
||||
onlyIcon
|
||||
shadowless
|
||||
icon="twitter"
|
||||
iconFamily="Font-Awesome"
|
||||
iconColor={theme.COLORS.WHITE}
|
||||
iconSize={theme.SIZES.BASE * 1.625}
|
||||
color={argonTheme.COLORS.TWITTER}
|
||||
style={[styles.social, styles.shadow]}
|
||||
/>
|
||||
</Block>
|
||||
<Block flex middle left>
|
||||
<GaButton
|
||||
round
|
||||
onlyIcon
|
||||
shadowless
|
||||
icon="dribbble"
|
||||
iconFamily="Font-Awesome"
|
||||
iconColor={theme.COLORS.WHITE}
|
||||
iconSize={theme.SIZES.BASE * 1.625}
|
||||
color={argonTheme.COLORS.DRIBBBLE}
|
||||
style={[styles.social, styles.shadow]}
|
||||
/>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
renderNavigation = () => {
|
||||
return (
|
||||
<Block flex style={styles.group}>
|
||||
<Text size={16} style={styles.title}>
|
||||
Navigation
|
||||
</Text>
|
||||
<Block>
|
||||
<Block style={{ marginBottom: theme.SIZES.BASE }}>
|
||||
<Header back title="Title" navigation={this.props.navigation} />
|
||||
</Block>
|
||||
|
||||
<Block style={{ marginBottom: theme.SIZES.BASE }}>
|
||||
<Header
|
||||
white
|
||||
back
|
||||
title="Title"
|
||||
navigation={this.props.navigation}
|
||||
bgColor={argonTheme.COLORS.ACTIVE}
|
||||
titleColor="white"
|
||||
iconColor="white"
|
||||
/>
|
||||
</Block>
|
||||
|
||||
<Block style={{ marginBottom: theme.SIZES.BASE }}>
|
||||
<Header search title="Title" navigation={this.props.navigation} />
|
||||
</Block>
|
||||
|
||||
<Block style={{ marginBottom: theme.SIZES.BASE }}>
|
||||
<Header
|
||||
tabs={tabs.categories}
|
||||
search
|
||||
title="Title"
|
||||
navigation={this.props.navigation}
|
||||
/>
|
||||
</Block>
|
||||
|
||||
<Block style={{ marginBottom: theme.SIZES.BASE }}>
|
||||
<Header
|
||||
options
|
||||
search
|
||||
title="Title"
|
||||
optionLeft="Option 1"
|
||||
optionRight="Option 2"
|
||||
navigation={this.props.navigation}
|
||||
/>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Block flex center>
|
||||
<ScrollView
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={{ paddingBottom: 30, width }}
|
||||
>
|
||||
{this.renderButtons()}
|
||||
{this.renderText()}
|
||||
{this.renderInputs()}
|
||||
{this.renderSocial()}
|
||||
{this.renderSwitches()}
|
||||
{this.renderNavigation()}
|
||||
{this.renderTableCell()}
|
||||
</ScrollView>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
title: {
|
||||
fontFamily: 'open-sans-bold',
|
||||
paddingBottom: theme.SIZES.BASE,
|
||||
paddingHorizontal: theme.SIZES.BASE * 2,
|
||||
marginTop: 44,
|
||||
color: argonTheme.COLORS.HEADER
|
||||
},
|
||||
group: {
|
||||
paddingTop: theme.SIZES.BASE * 2
|
||||
},
|
||||
shadow: {
|
||||
shadowColor: "black",
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowRadius: 4,
|
||||
shadowOpacity: 0.2,
|
||||
elevation: 2
|
||||
},
|
||||
button: {
|
||||
marginBottom: theme.SIZES.BASE,
|
||||
width: width - theme.SIZES.BASE * 2
|
||||
},
|
||||
optionsButton: {
|
||||
width: "auto",
|
||||
height: 34,
|
||||
paddingHorizontal: theme.SIZES.BASE,
|
||||
paddingVertical: 10
|
||||
},
|
||||
input: {
|
||||
borderBottomWidth: 1
|
||||
},
|
||||
inputDefault: {
|
||||
borderBottomColor: argonTheme.COLORS.PLACEHOLDER
|
||||
},
|
||||
inputTheme: {
|
||||
borderBottomColor: argonTheme.COLORS.PRIMARY
|
||||
},
|
||||
inputTheme: {
|
||||
borderBottomColor: argonTheme.COLORS.PRIMARY
|
||||
},
|
||||
inputInfo: {
|
||||
borderBottomColor: argonTheme.COLORS.INFO
|
||||
},
|
||||
inputSuccess: {
|
||||
borderBottomColor: argonTheme.COLORS.SUCCESS
|
||||
},
|
||||
inputWarning: {
|
||||
borderBottomColor: argonTheme.COLORS.WARNING
|
||||
},
|
||||
inputDanger: {
|
||||
borderBottomColor: argonTheme.COLORS.ERROR
|
||||
},
|
||||
social: {
|
||||
width: theme.SIZES.BASE * 3.5,
|
||||
height: theme.SIZES.BASE * 3.5,
|
||||
borderRadius: theme.SIZES.BASE * 1.75,
|
||||
justifyContent: "center"
|
||||
}
|
||||
});
|
||||
|
||||
export default Elements;
|
||||
58
argon-pro-react-native/screens/Fashion.js
Normal file
58
argon-pro-react-native/screens/Fashion.js
Normal file
@@ -0,0 +1,58 @@
|
||||
import React from "react";
|
||||
import { StyleSheet, Dimensions, ScrollView } from "react-native";
|
||||
import { Block, theme } from "galio-framework";
|
||||
|
||||
import { Card } from "../components/";
|
||||
|
||||
import deals from "../constants/deals";
|
||||
|
||||
const { width } = Dimensions.get("screen");
|
||||
// import products from '../constants/products';
|
||||
|
||||
export default class Deals extends React.Component {
|
||||
renderProducts = () => {
|
||||
const { navigation, route } = this.props;
|
||||
// const tabId = navigation.getParam("tabId");
|
||||
// const products = tabId ? deals[tabId] : deals.shoes;
|
||||
const tabId = route.params?.tabId;
|
||||
const products = tabId ? deals[tabId] : deals.beauty;
|
||||
|
||||
return (
|
||||
<ScrollView
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={styles.products}
|
||||
>
|
||||
<Block flex>
|
||||
<Card item={products[0]} horizontal />
|
||||
<Block flex row>
|
||||
<Card
|
||||
item={products[1]}
|
||||
style={{ marginRight: theme.SIZES.BASE }}
|
||||
/>
|
||||
<Card item={products[2]} />
|
||||
</Block>
|
||||
<Card item={products[3]} horizontal />
|
||||
<Card item={products[4]} full />
|
||||
</Block>
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Block flex center style={styles.deals}>
|
||||
{this.renderProducts()}
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
deals: {
|
||||
width
|
||||
},
|
||||
products: {
|
||||
width: width - theme.SIZES.BASE * 2,
|
||||
paddingVertical: theme.SIZES.BASE
|
||||
}
|
||||
});
|
||||
111
argon-pro-react-native/screens/Gallery.js
Normal file
111
argon-pro-react-native/screens/Gallery.js
Normal file
@@ -0,0 +1,111 @@
|
||||
import React from "react";
|
||||
import {
|
||||
StyleSheet,
|
||||
Dimensions,
|
||||
ScrollView,
|
||||
Image,
|
||||
Animated,
|
||||
Platform
|
||||
} from "react-native";
|
||||
|
||||
import { Block, theme } from "galio-framework";
|
||||
import { HeaderHeight } from "../constants/utils";
|
||||
|
||||
const { width } = Dimensions.get("window");
|
||||
|
||||
export default class Gallery extends React.Component {
|
||||
scrollX = new Animated.Value(0);
|
||||
|
||||
renderGallery = () => {
|
||||
const { navigation, route } = this.props;
|
||||
|
||||
const { images, index } = route.params;
|
||||
|
||||
return (
|
||||
<ScrollView
|
||||
horizontal={true}
|
||||
pagingEnabled={true}
|
||||
decelerationRate={0}
|
||||
scrollEventThrottle={16}
|
||||
showsHorizontalScrollIndicator={false}
|
||||
onScroll={Animated.event([
|
||||
{ nativeEvent: { contentOffset: { x: this.scrollX } } }
|
||||
], {useNativeDriver: false})}
|
||||
>
|
||||
{images.map((image, key) => (
|
||||
<Image
|
||||
key={`gallery-image-${key}`}
|
||||
resizeMode="contain"
|
||||
source={{ uri: image }}
|
||||
style={{ width, height: width }}
|
||||
/>
|
||||
))}
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
|
||||
renderProgress = () => {
|
||||
const { navigation, route } = this.props;
|
||||
|
||||
const { images, index } = route.params;
|
||||
const position = Animated.divide(this.scrollX, width);
|
||||
return (
|
||||
<Block row>
|
||||
{images.map((_, i) => {
|
||||
const opacity = position.interpolate({
|
||||
inputRange: [i - 1, i, i + 1],
|
||||
outputRange: [0.5, 1, 0.5],
|
||||
extrapolate: "clamp"
|
||||
});
|
||||
|
||||
const width = position.interpolate({
|
||||
inputRange: [i - 1, i, i + 1],
|
||||
outputRange: [8, 18, 8],
|
||||
extrapolate: "clamp"
|
||||
});
|
||||
|
||||
return (
|
||||
<Animated.View key={i} style={[styles.dots, { opacity, width }]} />
|
||||
);
|
||||
})}
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Block flex style={styles.gallery}>
|
||||
<Block flex middle style={{ position: "relative" }}>
|
||||
<Block style={styles.galleryImage}>{this.renderGallery()}</Block>
|
||||
|
||||
<Block center style={styles.dotsContainer}>
|
||||
{this.renderProgress()}
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
gallery: {
|
||||
backgroundColor: theme.COLORS.BLACK,
|
||||
marginTop: Platform.OS === "android" ? -HeaderHeight : 0
|
||||
},
|
||||
galleryImage: {
|
||||
width: width,
|
||||
height: "auto"
|
||||
},
|
||||
dots: {
|
||||
height: 8,
|
||||
margin: 8,
|
||||
borderRadius: 4,
|
||||
backgroundColor: "white"
|
||||
},
|
||||
dotsContainer: {
|
||||
position: "absolute",
|
||||
bottom: theme.SIZES.BASE * 3,
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
});
|
||||
52
argon-pro-react-native/screens/Home.js
Normal file
52
argon-pro-react-native/screens/Home.js
Normal file
@@ -0,0 +1,52 @@
|
||||
import React from "react";
|
||||
import { StyleSheet, Dimensions, ScrollView } from "react-native";
|
||||
import { Block, theme, Text } from "galio-framework";
|
||||
|
||||
import { Card } from "../components";
|
||||
import articles from "../constants/articles";
|
||||
const { width } = Dimensions.get("screen");
|
||||
|
||||
class Home extends React.Component {
|
||||
renderArticles = () => {
|
||||
return (
|
||||
<ScrollView
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={styles.articles}
|
||||
>
|
||||
<Block flex>
|
||||
<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[3]} horizontal />
|
||||
<Card item={articles[4]} full />
|
||||
</Block>
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Block flex center style={styles.home}>
|
||||
{this.renderArticles()}
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
home: {
|
||||
width: width
|
||||
},
|
||||
articles: {
|
||||
width: width - theme.SIZES.BASE * 2,
|
||||
paddingVertical: theme.SIZES.BASE,
|
||||
paddingHorizontal: 2
|
||||
}
|
||||
});
|
||||
|
||||
export default Home;
|
||||
66
argon-pro-react-native/screens/Notifications.js
Normal file
66
argon-pro-react-native/screens/Notifications.js
Normal file
@@ -0,0 +1,66 @@
|
||||
import React from "react";
|
||||
import { StyleSheet, FlatList } from "react-native";
|
||||
import { Block, Text, theme } from "galio-framework";
|
||||
import { Switch } from "../components";
|
||||
|
||||
import argonTheme from "../constants/Theme";
|
||||
|
||||
export default class Notifications extends React.Component {
|
||||
state = {};
|
||||
|
||||
toggleSwitch = switchNumber =>
|
||||
this.setState({ [switchNumber]: !this.state[switchNumber] });
|
||||
|
||||
renderItem = ({ item }) => (
|
||||
<Block row middle space="between" style={styles.rows}>
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} size={theme.SIZES.FONT} color="#525F7F" size={15}>{item.title}</Text>
|
||||
<Switch
|
||||
onValueChange={() => this.toggleSwitch(item.id)}
|
||||
value={this.state[item.id]}
|
||||
/>
|
||||
</Block>
|
||||
);
|
||||
|
||||
render() {
|
||||
const notifications = [
|
||||
{ title: "Someone mentions me", id: "mentions" },
|
||||
{ title: "Anyone follows me", id: "follows" },
|
||||
{ title: "Someone comments me", id: "comments" },
|
||||
{ title: "A seller follows me", id: "seller" }
|
||||
];
|
||||
|
||||
return (
|
||||
<Block flex style={styles.notification}>
|
||||
<FlatList
|
||||
data={notifications}
|
||||
keyExtractor={(item, index) => item.id}
|
||||
renderItem={this.renderItem}
|
||||
ListHeaderComponent={
|
||||
<Block style={styles.title}>
|
||||
<Text style={{ fontFamily: 'open-sans-bold', paddingBottom: 5 }} center size={16} color={argonTheme.COLORS.TEXT}>
|
||||
Recommended Settings
|
||||
</Text>
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} center size={12} color={argonTheme.COLORS.TEXT}>
|
||||
These are the most important settings
|
||||
</Text>
|
||||
</Block>
|
||||
}
|
||||
/>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
notification: {
|
||||
paddingVertical: theme.SIZES.BASE / 3
|
||||
},
|
||||
title: {
|
||||
paddingTop: theme.SIZES.BASE / 2,
|
||||
paddingBottom: theme.SIZES.BASE * 1.5
|
||||
},
|
||||
rows: {
|
||||
paddingHorizontal: theme.SIZES.BASE,
|
||||
marginBottom: theme.SIZES.BASE * 1.25
|
||||
}
|
||||
});
|
||||
114
argon-pro-react-native/screens/Onboarding.js
Normal file
114
argon-pro-react-native/screens/Onboarding.js
Normal file
@@ -0,0 +1,114 @@
|
||||
import React from "react";
|
||||
import {
|
||||
ImageBackground,
|
||||
Image,
|
||||
StyleSheet,
|
||||
StatusBar,
|
||||
Dimensions,
|
||||
SafeAreaView
|
||||
} from "react-native";
|
||||
import { Block, Button, Text, theme } from "galio-framework";
|
||||
|
||||
const { height, width } = Dimensions.get("screen");
|
||||
|
||||
import argonTheme from "../constants/Theme";
|
||||
import Images from "../constants/Images";
|
||||
|
||||
class Onboarding extends React.Component {
|
||||
render() {
|
||||
const { navigation } = this.props;
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<StatusBar hidden />
|
||||
<Block flex center>
|
||||
<ImageBackground
|
||||
source={Images.Onboarding}
|
||||
style={{ height, width, zIndex: 1 }}
|
||||
/>
|
||||
</Block>
|
||||
<Block center>
|
||||
<Image source={Images.LogoOnboarding} style={styles.logo} />
|
||||
</Block>
|
||||
<Block flex space="between" style={styles.padded}>
|
||||
<Block flex space="around" style={{ zIndex: 2 }}>
|
||||
<Block style={styles.title}>
|
||||
<Block>
|
||||
<Text color="white" size={60}>
|
||||
Design
|
||||
</Text>
|
||||
</Block>
|
||||
<Block row>
|
||||
<Text color="white" size={60}>
|
||||
System
|
||||
</Text>
|
||||
<Block middle style={styles.pro}>
|
||||
<Text size={16} color="white">
|
||||
PRO
|
||||
</Text>
|
||||
</Block>
|
||||
</Block>
|
||||
<Block style={styles.subTitle}>
|
||||
<Text color="white" size={16}>
|
||||
Fully coded React Native components.
|
||||
</Text>
|
||||
</Block>
|
||||
</Block>
|
||||
<Block center>
|
||||
<Button
|
||||
style={styles.button}
|
||||
color={argonTheme.COLORS.SECONDARY}
|
||||
onPress={() => navigation.navigate("Home")}
|
||||
textStyle={{ color: argonTheme.COLORS.BLACK }}
|
||||
>
|
||||
Get Started
|
||||
</Button>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
backgroundColor: theme.COLORS.BLACK,
|
||||
flex: 1,
|
||||
},
|
||||
padded: {
|
||||
paddingHorizontal: theme.SIZES.BASE * 2,
|
||||
position: "relative",
|
||||
bottom: theme.SIZES.BASE,
|
||||
zIndex: 2
|
||||
},
|
||||
button: {
|
||||
width: width - theme.SIZES.BASE * 4,
|
||||
height: theme.SIZES.BASE * 3,
|
||||
shadowRadius: 0,
|
||||
shadowOpacity: 0
|
||||
},
|
||||
logo: {
|
||||
width: 200,
|
||||
height: 60,
|
||||
zIndex: 2,
|
||||
position: "relative",
|
||||
marginTop: "-50%"
|
||||
},
|
||||
title: {
|
||||
marginTop: "-5%"
|
||||
},
|
||||
subTitle: {
|
||||
marginTop: 20
|
||||
},
|
||||
pro: {
|
||||
backgroundColor: argonTheme.COLORS.INFO,
|
||||
paddingHorizontal: 8,
|
||||
marginLeft: 3,
|
||||
borderRadius: 4,
|
||||
height: 22,
|
||||
marginTop: 15
|
||||
},
|
||||
});
|
||||
|
||||
export default Onboarding;
|
||||
54
argon-pro-react-native/screens/PersonalNotifications.js
Normal file
54
argon-pro-react-native/screens/PersonalNotifications.js
Normal file
@@ -0,0 +1,54 @@
|
||||
import React from "react";
|
||||
import { ScrollView, Alert } from "react-native";
|
||||
import { Block } from "galio-framework";
|
||||
import { Notification } from "../components";
|
||||
import { argonTheme } from "../constants";
|
||||
|
||||
export default class PersonalNotifications extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<Block middle flex>
|
||||
<Block flex style={{ width: "90%" }}>
|
||||
<ScrollView showsVerticalScrollIndicator={false}>
|
||||
<Notification
|
||||
time="15:30"
|
||||
body="About your order #45C23B Wifey made the best Father's Day meal ever. So thankful so happy."
|
||||
iconName="ship"
|
||||
iconFamily="font-awesome"
|
||||
style={{ marginTop: 15 }}
|
||||
onPress={() => Alert.alert('Yes, you can use the notifications as buttons so you could send your customers to anything you want.')}
|
||||
/>
|
||||
<Notification
|
||||
time="12:10"
|
||||
body="Customize our products. Now you can make the best and perfect clothes just for you."
|
||||
iconName="ship"
|
||||
iconFamily="font-awesome"
|
||||
color={argonTheme.COLORS.INFO}
|
||||
style={{ marginTop: 15 }}
|
||||
onPress={() => Alert.alert('Yes, you can use the notifications as buttons so you could send your customers to anything you want.')}
|
||||
/>
|
||||
<Notification
|
||||
time="11:30"
|
||||
body="Breaking News! We have new methods to payment. Learn how to pay off debt fast using the stack method."
|
||||
iconName="ship"
|
||||
iconFamily="font-awesome"
|
||||
color={argonTheme.COLORS.WARNING}
|
||||
style={{ marginTop: 15 }}
|
||||
onPress={() => Alert.alert('Yes, you can use the notifications as buttons so you could send your customers to anything you want.')}
|
||||
/>
|
||||
<Notification
|
||||
time="04:23"
|
||||
body="Congratulations! Someone just ordered a pair of Yamaha HS8 speakers through your app! Hurry up and ship them!"
|
||||
iconName="ship"
|
||||
iconFamily="font-awesome"
|
||||
color={argonTheme.COLORS.SUCCESS}
|
||||
style={{ marginTop: 15 }}
|
||||
onPress={() => Alert.alert('Yes, you can use the notifications as buttons so you could send your customers to anything you want.')}
|
||||
/>
|
||||
<Block style={{ marginBottom: 20 }} />
|
||||
</ScrollView>
|
||||
</Block>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
126
argon-pro-react-native/screens/Privacy.js
Normal file
126
argon-pro-react-native/screens/Privacy.js
Normal file
@@ -0,0 +1,126 @@
|
||||
import React from "react";
|
||||
import { ScrollView, StyleSheet } from "react-native";
|
||||
|
||||
import { LinearGradient } from "expo-linear-gradient";
|
||||
import { Block, Button, Text, theme } from "galio-framework";
|
||||
|
||||
import argonTheme from "../constants/Theme";
|
||||
|
||||
export default class Privacy extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<Block flex>
|
||||
<ScrollView
|
||||
overScrollMode="always"
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={styles.privacy}
|
||||
>
|
||||
<Text style={{ fontFamily: 'open-sans-bold' }} size={16} color={argonTheme.COLORS.TEXT}>
|
||||
In recent months, Facebook, Google, IBM, Microsoft and others have
|
||||
aggressively lobbied officials in the Trump administration and
|
||||
elsewhere to start outlining a federal privacy law, according to
|
||||
administration officials and the companies. The law would have a
|
||||
dual purpose, they said: It would overrule the California law and
|
||||
instead put into place a kinder set of rules that would give the
|
||||
companies wide leeway over how personal digital information was
|
||||
handled.
|
||||
</Text>
|
||||
<Text
|
||||
style={{ fontFamily: 'open-sans-regular' }}
|
||||
size={16}
|
||||
color={argonTheme.COLORS.TEXT}
|
||||
style={{ paddingTop: 9 }}
|
||||
>
|
||||
“We are committed to being part of the process and a constructive
|
||||
part of the process,” said Dean Garfield, president of a leading
|
||||
tech industry lobbying group, the Information Technology Industry
|
||||
Council, which is working on proposals for the federal law. “The
|
||||
best way is to work toward developing our own blueprint.”
|
||||
</Text>
|
||||
<Text
|
||||
style={{ fontFamily: 'open-sans-regular' }}
|
||||
size={16}
|
||||
color={argonTheme.COLORS.TEXT}
|
||||
style={{ paddingTop: 9 }}
|
||||
>
|
||||
The efforts could set up a big fight with consumer and privacy
|
||||
groups, especially as companies like Facebook face scrutiny for
|
||||
mishandling users’ personal data. Many of the internet companies
|
||||
depend on the collection and analysis of such data to help them
|
||||
target the online ads that generate the bulk of their revenue.
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
style={{ fontFamily: 'open-sans-regular' }}
|
||||
size={16}
|
||||
color={argonTheme.COLORS.TEXT}
|
||||
style={{ paddingTop: 9 }}
|
||||
>
|
||||
At a board meeting for the Information Technology Industry Council
|
||||
in May, Joel Kaplan, Facebook’s top lobbyist, warned that an early
|
||||
proposal for privacy in California posed a threat to the industry
|
||||
and that the trade group needed to make the issue of privacy a
|
||||
priority, according to two people briefed on the meeting, who were
|
||||
not authorized to speak publicly.
|
||||
</Text>
|
||||
</ScrollView>
|
||||
<Block flex row space="between" style={styles.buttonsWrapper}>
|
||||
<Button
|
||||
color={argonTheme.COLORS.PRIMARY}
|
||||
style={styles.privacyButton}
|
||||
>
|
||||
<Text style={{ fontFamily: 'open-sans-bold' }} size={16} color={argonTheme.COLORS.WHITE}>
|
||||
ACCEPT
|
||||
</Text>
|
||||
</Button>
|
||||
<Button
|
||||
color={argonTheme.COLORS.SECONDARY}
|
||||
textStyle={{ color: theme.COLORS.MUTED }}
|
||||
style={styles.privacyButton}
|
||||
>
|
||||
<Text style={{ fontFamily: 'open-sans-bold' }} size={16} color={argonTheme.COLORS.MUTED}>
|
||||
DECLINE
|
||||
</Text>
|
||||
</Button>
|
||||
</Block>
|
||||
<LinearGradient
|
||||
colors={["rgba(255,255,255,0)", "rgba(255,255,255,1)"]}
|
||||
style={styles.gradient}
|
||||
/>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
privacy: {
|
||||
padding: theme.SIZES.BASE,
|
||||
paddingBottom: theme.SIZES.BASE * 5
|
||||
},
|
||||
buttonsWrapper: {
|
||||
zIndex: 2,
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
paddingHorizontal: theme.SIZES.BASE,
|
||||
paddingVertical: theme.SIZES.BASE * 1.75
|
||||
},
|
||||
privacyButton: {
|
||||
width: "48%",
|
||||
height: theme.SIZES.BASE * 3,
|
||||
alignItems: "center",
|
||||
shadowColor: "rgba(0, 0, 0, 0.2)",
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowRadius: 8,
|
||||
shadowOpacity: 1
|
||||
},
|
||||
gradient: {
|
||||
zIndex: 1,
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: "30%"
|
||||
}
|
||||
});
|
||||
172
argon-pro-react-native/screens/Pro.js
Normal file
172
argon-pro-react-native/screens/Pro.js
Normal file
@@ -0,0 +1,172 @@
|
||||
/**
|
||||
* 价值前沿 - 启动页
|
||||
* 黑金主题设计
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import {
|
||||
View,
|
||||
Image,
|
||||
StyleSheet,
|
||||
StatusBar,
|
||||
Dimensions,
|
||||
Platform,
|
||||
Pressable,
|
||||
} from "react-native";
|
||||
import { Box, VStack, HStack, Text, Center } from "native-base";
|
||||
import { LinearGradient } from "expo-linear-gradient";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
|
||||
const { height, width } = Dimensions.get("screen");
|
||||
|
||||
// 金色渐变
|
||||
const GOLD_GRADIENT = ['#D4AF37', '#F5D77A', '#D4AF37'];
|
||||
const GOLD_DARK = '#B8962E';
|
||||
const GOLD_LIGHT = '#F5D77A';
|
||||
const GOLD_PRIMARY = '#D4AF37';
|
||||
|
||||
const Pro = ({ navigation }) => {
|
||||
const insets = useSafeAreaInsets();
|
||||
|
||||
return (
|
||||
<Box flex={1} bg="#000000">
|
||||
<StatusBar barStyle="light-content" backgroundColor="#000000" />
|
||||
|
||||
{/* 背景装饰 */}
|
||||
<Box position="absolute" top={0} left={0} right={0} bottom={0}>
|
||||
{/* 顶部金色光晕 */}
|
||||
<LinearGradient
|
||||
colors={['rgba(212, 175, 55, 0.15)', 'rgba(212, 175, 55, 0.05)', 'transparent']}
|
||||
start={{ x: 0.5, y: 0 }}
|
||||
end={{ x: 0.5, y: 0.5 }}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
{/* 底部深色渐变 */}
|
||||
<LinearGradient
|
||||
colors={['transparent', 'rgba(0, 0, 0, 0.8)', '#000000']}
|
||||
start={{ x: 0.5, y: 0.5 }}
|
||||
end={{ x: 0.5, y: 1 }}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* 主内容 */}
|
||||
<VStack flex={1} justifyContent="space-between" style={{ paddingTop: insets.top }}>
|
||||
{/* 上部空间 */}
|
||||
<Box flex={1} />
|
||||
|
||||
{/* Logo 区域 */}
|
||||
<Center flex={2}>
|
||||
<Box
|
||||
bg="rgba(212, 175, 55, 0.08)"
|
||||
borderWidth={1}
|
||||
borderColor="rgba(212, 175, 55, 0.2)"
|
||||
rounded="3xl"
|
||||
p={6}
|
||||
style={styles.logoContainer}
|
||||
>
|
||||
<Image
|
||||
source={require("../assets/logo.jpg")}
|
||||
style={styles.logo}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* 品牌名称 */}
|
||||
<VStack alignItems="center" mt={8} space={2}>
|
||||
<Text
|
||||
fontSize="4xl"
|
||||
fontWeight="bold"
|
||||
letterSpacing="xl"
|
||||
style={styles.brandText}
|
||||
>
|
||||
价值前沿
|
||||
</Text>
|
||||
<Text
|
||||
fontSize="md"
|
||||
letterSpacing="lg"
|
||||
color="rgba(212, 175, 55, 0.7)"
|
||||
>
|
||||
VALUE FRONTIER
|
||||
</Text>
|
||||
</VStack>
|
||||
</Center>
|
||||
|
||||
{/* 特性描述 */}
|
||||
<Center flex={1} px={8}>
|
||||
<Text
|
||||
fontSize="md"
|
||||
color="rgba(255, 255, 255, 0.6)"
|
||||
textAlign="center"
|
||||
lineHeight="xl"
|
||||
>
|
||||
智能投资决策平台{"\n"}
|
||||
发现市场热点，把握投资机会
|
||||
</Text>
|
||||
</Center>
|
||||
|
||||
{/* 底部按钮区域 */}
|
||||
<VStack space={4} px={6} style={{ paddingBottom: insets.bottom + 30 }}>
|
||||
{/* 开始使用按钮 */}
|
||||
<Pressable onPress={() => navigation.navigate("App")}>
|
||||
{({ isPressed }) => (
|
||||
<LinearGradient
|
||||
colors={isPressed ? [GOLD_DARK, GOLD_PRIMARY] : GOLD_GRADIENT}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 0 }}
|
||||
style={[
|
||||
styles.primaryButton,
|
||||
{ opacity: isPressed ? 0.9 : 1, transform: [{ scale: isPressed ? 0.98 : 1 }] }
|
||||
]}
|
||||
>
|
||||
<Text fontSize="lg" fontWeight="bold" color="#000000">
|
||||
开始使用
|
||||
</Text>
|
||||
</LinearGradient>
|
||||
)}
|
||||
</Pressable>
|
||||
|
||||
{/* 版本信息 */}
|
||||
<Center>
|
||||
<Text fontSize="xs" color="rgba(255, 255, 255, 0.3)">
|
||||
Version 1.0.0
|
||||
</Text>
|
||||
</Center>
|
||||
</VStack>
|
||||
</VStack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
logoContainer: {
|
||||
shadowColor: '#D4AF37',
|
||||
shadowOffset: { width: 0, height: 0 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 30,
|
||||
elevation: 10,
|
||||
},
|
||||
logo: {
|
||||
width: 160,
|
||||
height: 160,
|
||||
},
|
||||
brandText: {
|
||||
color: '#D4AF37',
|
||||
textShadowColor: 'rgba(212, 175, 55, 0.5)',
|
||||
textShadowOffset: { width: 0, height: 0 },
|
||||
textShadowRadius: 20,
|
||||
},
|
||||
primaryButton: {
|
||||
height: 56,
|
||||
borderRadius: 16,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
shadowColor: '#D4AF37',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.4,
|
||||
shadowRadius: 12,
|
||||
elevation: 8,
|
||||
},
|
||||
});
|
||||
|
||||
export default Pro;
|
||||
380
argon-pro-react-native/screens/Product.js
Normal file
380
argon-pro-react-native/screens/Product.js
Normal file
@@ -0,0 +1,380 @@
|
||||
import React from "react";
|
||||
import {
|
||||
StyleSheet,
|
||||
Dimensions,
|
||||
ScrollView,
|
||||
TouchableHighlight,
|
||||
TouchableWithoutFeedback,
|
||||
Image,
|
||||
Animated,
|
||||
Platform
|
||||
} from "react-native";
|
||||
|
||||
import { Block, Text, Button, theme } from "galio-framework";
|
||||
import { Icon } from "../components";
|
||||
import argonTheme from "../constants/Theme";
|
||||
import Images from "../constants/Images";
|
||||
import { iPhoneX, HeaderHeight } from "../constants/utils";
|
||||
|
||||
const { height, width } = Dimensions.get("window");
|
||||
|
||||
export default class Product extends React.Component {
|
||||
state = {
|
||||
selectedSize: null
|
||||
};
|
||||
|
||||
scrollX = new Animated.Value(0);
|
||||
|
||||
renderGallery = () => {
|
||||
const { navigation, route } = this.props;
|
||||
// const { params } = navigation && navigation.state;
|
||||
// const product = params.product;
|
||||
const product = route.params?.product;
|
||||
const productImages = [
|
||||
product.image,
|
||||
product.image,
|
||||
product.image,
|
||||
product.image
|
||||
];
|
||||
|
||||
return (
|
||||
<ScrollView
|
||||
horizontal={true}
|
||||
pagingEnabled={true}
|
||||
decelerationRate={0}
|
||||
scrollEventThrottle={16}
|
||||
showsHorizontalScrollIndicator={false}
|
||||
onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: this.scrollX }}}],
|
||||
{useNativeDriver: false}
|
||||
)}
|
||||
>
|
||||
{productImages.map((image, index) => (
|
||||
<TouchableWithoutFeedback
|
||||
key={`product-image-${index}`}
|
||||
onPress={() =>
|
||||
navigation.navigate("Gallery", { images: productImages, index })
|
||||
}
|
||||
>
|
||||
<Image
|
||||
resizeMode="cover"
|
||||
source={{ uri: image }}
|
||||
style={{ width, height: iPhoneX ? width + 32 : width }}
|
||||
/>
|
||||
</TouchableWithoutFeedback>
|
||||
))}
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
|
||||
renderProgress = () => {
|
||||
const { navigation, route } = this.props;
|
||||
// const { params } = navigation && navigation.state;
|
||||
// const product = params.product;
|
||||
const product = route.params?.product;
|
||||
const productImages = [
|
||||
product.image,
|
||||
product.image,
|
||||
product.image,
|
||||
product.image
|
||||
];
|
||||
|
||||
const position = Animated.divide(this.scrollX, width);
|
||||
|
||||
return (
|
||||
<Block row>
|
||||
{productImages.map((_, i) => {
|
||||
const opacity = position.interpolate({
|
||||
inputRange: [i - 1, i, i + 1],
|
||||
outputRange: [0.5, 1, 0.5],
|
||||
extrapolate: "clamp"
|
||||
});
|
||||
|
||||
const width = position.interpolate({
|
||||
inputRange: [i - 1, i, i + 1],
|
||||
outputRange: [8, 18, 8],
|
||||
extrapolate: "clamp"
|
||||
});
|
||||
|
||||
return (
|
||||
<Animated.View key={i} style={[styles.dots, { opacity, width }]} />
|
||||
);
|
||||
})}
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
renderSize = label => {
|
||||
const active = this.state.selectedSize === label;
|
||||
|
||||
return (
|
||||
<TouchableHighlight
|
||||
style={styles.sizeButton}
|
||||
underlayColor={argonTheme.COLORS.PRICE_COLOR}
|
||||
onPress={() => this.setState({ selectedSize: label })}
|
||||
>
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} color={active ? theme.COLORS.PRIMARY : argonTheme.COLORS.TEXT}>{label}</Text>
|
||||
</TouchableHighlight>
|
||||
);
|
||||
};
|
||||
|
||||
renderChatButton = () => {
|
||||
const { navigation } = this.props;
|
||||
return (
|
||||
<Block style={styles.chatContainer}>
|
||||
<Button
|
||||
radius={28}
|
||||
opacity={0.9}
|
||||
style={styles.chat}
|
||||
color={argonTheme.COLORS.PRIMARY}
|
||||
onPress={() => navigation.navigate("Chat")}
|
||||
>
|
||||
<Icon
|
||||
size={18}
|
||||
family="materialicon"
|
||||
name="chat-bubble"
|
||||
color="white"
|
||||
/>
|
||||
</Button>
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { selectedSize } = this.state;
|
||||
const { navigation, route } = this.props;
|
||||
// const { params } = navigation && navigation.state;
|
||||
// const product = params.product;
|
||||
const product = route.params?.product;
|
||||
|
||||
return (
|
||||
<Block flex style={styles.product}>
|
||||
<Block flex style={{ position: "relative" }}>
|
||||
{this.renderGallery()}
|
||||
<Block center style={styles.dotsContainer}>
|
||||
{this.renderProgress()}
|
||||
</Block>
|
||||
</Block>
|
||||
<Block flex style={styles.options}>
|
||||
{this.renderChatButton()}
|
||||
<ScrollView vertical={true} showsVerticalScrollIndicator={false}>
|
||||
<Block
|
||||
style={{
|
||||
paddingHorizontal: theme.SIZES.BASE,
|
||||
paddingTop: theme.SIZES.BASE * 2
|
||||
}}
|
||||
>
|
||||
<Text size={28} style={{ paddingBottom: 24, fontFamily: 'open-sans-regular' }} color={argonTheme.COLORS.TEXT}>
|
||||
{product.title}
|
||||
</Text>
|
||||
<Block row space="between">
|
||||
<Block row>
|
||||
<Image
|
||||
source={Images.ProfilePicture }
|
||||
style={styles.avatar}
|
||||
/>
|
||||
<Block style={{ marginTop: 2 }}>
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} size={14} color={argonTheme.COLORS.TEXT}>Jessica Jones</Text>
|
||||
<Text style={{ fontFamily: 'open-sans-light' }} size={14} color={argonTheme.COLORS.TEXT} style={{ fontWeight: '100' }}>
|
||||
Pro Seller
|
||||
</Text>
|
||||
</Block>
|
||||
</Block>
|
||||
<Text style={{ fontFamily: 'open-sans-bold' }} size={18} color={argonTheme.COLORS.TEXT}>
|
||||
$899
|
||||
</Text>
|
||||
</Block>
|
||||
</Block>
|
||||
<Block style={{ padding: theme.SIZES.BASE }}>
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} size={16} color={argonTheme.COLORS.TEXT}>Size</Text>
|
||||
<Block card style={{ marginTop: 16 }}>
|
||||
<Block row>
|
||||
<Block
|
||||
flex
|
||||
middle
|
||||
style={[
|
||||
styles.size,
|
||||
styles.roundTopLeft,
|
||||
selectedSize === "XS" ? styles.active : null
|
||||
]}
|
||||
>
|
||||
{this.renderSize("XS")}
|
||||
</Block>
|
||||
<Block
|
||||
flex
|
||||
middle
|
||||
style={[
|
||||
styles.size,
|
||||
selectedSize === "S" ? styles.active : null
|
||||
]}
|
||||
>
|
||||
{this.renderSize("S")}
|
||||
</Block>
|
||||
<Block
|
||||
flex
|
||||
middle
|
||||
style={[
|
||||
styles.size,
|
||||
styles.roundTopRight,
|
||||
selectedSize === "M" ? styles.active : null
|
||||
]}
|
||||
>
|
||||
{this.renderSize("M")}
|
||||
</Block>
|
||||
</Block>
|
||||
<Block row>
|
||||
<Block
|
||||
flex
|
||||
middle
|
||||
style={[
|
||||
styles.size,
|
||||
styles.roundBottomLeft,
|
||||
selectedSize === "L" ? styles.active : null
|
||||
]}
|
||||
>
|
||||
{this.renderSize("L")}
|
||||
</Block>
|
||||
<Block
|
||||
flex
|
||||
middle
|
||||
style={[
|
||||
styles.size,
|
||||
{ borderBottomWidth: 0 },
|
||||
selectedSize === "XL" ? styles.active : null
|
||||
]}
|
||||
>
|
||||
{this.renderSize("XL")}
|
||||
</Block>
|
||||
<Block
|
||||
flex
|
||||
middle
|
||||
style={[
|
||||
styles.size,
|
||||
styles.roundBottomRight,
|
||||
selectedSize === "2XL" ? styles.active : null
|
||||
]}
|
||||
>
|
||||
{this.renderSize("2XL")}
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
<Button
|
||||
shadowless
|
||||
style={styles.addToCart}
|
||||
color={argonTheme.COLORS.PRIMARY}
|
||||
onPress={() => navigation.navigate("Cart")}
|
||||
|
||||
>
|
||||
<Text style={{ fontFamily: 'open-sans-bold' }} color={argonTheme.COLORS.WHITE}>ADD TO CART</Text>
|
||||
</Button>
|
||||
</Block>
|
||||
</ScrollView>
|
||||
</Block>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
product: {
|
||||
marginTop: Platform.OS === "android" ? -HeaderHeight : 0
|
||||
},
|
||||
options: {
|
||||
position: "relative",
|
||||
marginHorizontal: theme.SIZES.BASE,
|
||||
marginTop: -theme.SIZES.BASE * 2,
|
||||
marginBottom: 0,
|
||||
borderTopLeftRadius: 13,
|
||||
borderTopRightRadius: 13,
|
||||
backgroundColor: theme.COLORS.WHITE,
|
||||
shadowColor: "black",
|
||||
shadowOffset: { width: 0, height: 0 },
|
||||
shadowRadius: 8,
|
||||
shadowOpacity: 0.2
|
||||
},
|
||||
galleryImage: {
|
||||
width: width,
|
||||
height: "auto"
|
||||
},
|
||||
dots: {
|
||||
height: theme.SIZES.BASE / 2,
|
||||
margin: theme.SIZES.BASE / 2,
|
||||
borderRadius: 4,
|
||||
backgroundColor: "white"
|
||||
},
|
||||
dotsContainer: {
|
||||
position: "absolute",
|
||||
bottom: theme.SIZES.BASE,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: height / 10
|
||||
},
|
||||
addToCart: {
|
||||
width: width - theme.SIZES.BASE * 4,
|
||||
marginTop: theme.SIZES.BASE * 2,
|
||||
shadowColor: "rgba(0, 0, 0, 0.2)",
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowRadius: 8,
|
||||
shadowOpacity: 1
|
||||
},
|
||||
avatar: {
|
||||
height: 40,
|
||||
width: 40,
|
||||
borderRadius: 20,
|
||||
marginBottom: theme.SIZES.BASE,
|
||||
marginRight: 8
|
||||
},
|
||||
chat: {
|
||||
width: 56,
|
||||
height: 56,
|
||||
padding: 20,
|
||||
borderRadius: 28,
|
||||
shadowColor: "rgba(0, 0, 0, 0.2)",
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowRadius: 8,
|
||||
shadowOpacity: 1
|
||||
},
|
||||
chatContainer: {
|
||||
top: -32,
|
||||
right: theme.SIZES.BASE,
|
||||
zIndex: 2,
|
||||
position: "absolute"
|
||||
},
|
||||
size: {
|
||||
height: theme.SIZES.BASE * 3,
|
||||
width: (width - theme.SIZES.BASE * 2) / 3,
|
||||
borderBottomWidth: 0.5,
|
||||
borderBottomColor: argonTheme.COLORS.BORDER_COLOR,
|
||||
overflow: "hidden"
|
||||
},
|
||||
sizeButton: {
|
||||
height: theme.SIZES.BASE * 3,
|
||||
width: "100%",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
},
|
||||
active: {
|
||||
backgroundColor: argonTheme.COLORS.PRICE_COLOR
|
||||
},
|
||||
roundTopLeft: {
|
||||
borderTopLeftRadius: 4,
|
||||
borderRightColor: argonTheme.COLORS.BORDER_COLOR,
|
||||
borderRightWidth: 0.5
|
||||
},
|
||||
roundBottomLeft: {
|
||||
borderBottomLeftRadius: 4,
|
||||
borderRightColor: argonTheme.COLORS.BORDER_COLOR,
|
||||
borderRightWidth: 0.5,
|
||||
borderBottomWidth: 0
|
||||
},
|
||||
roundTopRight: {
|
||||
borderTopRightRadius: 4,
|
||||
borderLeftColor: argonTheme.COLORS.BORDER_COLOR,
|
||||
borderLeftWidth: 0.5
|
||||
},
|
||||
roundBottomRight: {
|
||||
borderBottomRightRadius: 4,
|
||||
borderLeftColor: argonTheme.COLORS.BORDER_COLOR,
|
||||
borderLeftWidth: 0.5,
|
||||
borderBottomWidth: 0
|
||||
}
|
||||
});
|
||||
226
argon-pro-react-native/screens/Profile.js
Normal file
226
argon-pro-react-native/screens/Profile.js
Normal file
@@ -0,0 +1,226 @@
|
||||
import React from "react";
|
||||
import {
|
||||
StyleSheet,
|
||||
Dimensions,
|
||||
ScrollView,
|
||||
Image,
|
||||
ImageBackground,
|
||||
Platform
|
||||
} from "react-native";
|
||||
import { Block, Text, theme } from "galio-framework";
|
||||
|
||||
import { Button } from "../components";
|
||||
import { Images, argonTheme } from "../constants";
|
||||
import { HeaderHeight } from "../constants/utils";
|
||||
|
||||
const { width, height } = Dimensions.get("screen");
|
||||
|
||||
const thumbMeasure = (width - 48 - 32) / 3;
|
||||
|
||||
class Profile extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<Block flex style={styles.profile}>
|
||||
<Block flex>
|
||||
<ImageBackground
|
||||
source={Images.ProfileBackground}
|
||||
style={styles.profileContainer}
|
||||
imageStyle={styles.profileBackground}
|
||||
>
|
||||
<ScrollView
|
||||
showsVerticalScrollIndicator={false}
|
||||
style={{ width, marginTop: "25%" }}
|
||||
>
|
||||
<Block flex style={styles.profileCard}>
|
||||
<Block middle style={styles.avatarContainer}>
|
||||
<Image
|
||||
source={ Images.ProfilePicture }
|
||||
style={styles.avatar}
|
||||
/>
|
||||
</Block>
|
||||
<Block style={styles.info}>
|
||||
<Block
|
||||
middle
|
||||
row
|
||||
space="evenly"
|
||||
style={{ marginTop: 20, paddingBottom: 24 }}
|
||||
>
|
||||
<Button
|
||||
small
|
||||
style={{ backgroundColor: argonTheme.COLORS.INFO }}
|
||||
>
|
||||
CONNECT
|
||||
</Button>
|
||||
<Button
|
||||
small
|
||||
style={{ backgroundColor: argonTheme.COLORS.DEFAULT }}
|
||||
>
|
||||
MESSAGE
|
||||
</Button>
|
||||
</Block>
|
||||
<Block row space="between">
|
||||
<Block middle>
|
||||
<Text
|
||||
size={18}
|
||||
color="#525F7F"
|
||||
style={{ marginBottom: 4, fontFamily: 'open-sans-bold' }}
|
||||
>
|
||||
2K
|
||||
</Text>
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} size={12} color={argonTheme.COLORS.TEXT}>Orders</Text>
|
||||
</Block>
|
||||
<Block middle>
|
||||
<Text
|
||||
color="#525F7F"
|
||||
size={18}
|
||||
style={{ marginBottom: 4, fontFamily: 'open-sans-bold' }}
|
||||
>
|
||||
10
|
||||
</Text>
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} size={12} color={argonTheme.COLORS.TEXT}>Photos</Text>
|
||||
</Block>
|
||||
<Block middle>
|
||||
<Text
|
||||
color="#525F7F"
|
||||
size={18}
|
||||
style={{ marginBottom: 4, fontFamily: 'open-sans-bold' }}
|
||||
>
|
||||
89
|
||||
</Text>
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} size={12} color={argonTheme.COLORS.TEXT}>Comments</Text>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
<Block flex>
|
||||
<Block middle style={styles.nameInfo}>
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} size={28} color="#32325D">
|
||||
Jessica Jones, 27
|
||||
</Text>
|
||||
<Text size={16} color="#32325D" style={{ marginTop: 10, fontFamily: 'open-sans-light' }}>
|
||||
San Francisco, USA
|
||||
</Text>
|
||||
</Block>
|
||||
<Block middle style={{ marginTop: 30, marginBottom: 16 }}>
|
||||
<Block style={styles.divider} />
|
||||
</Block>
|
||||
<Block middle>
|
||||
<Text
|
||||
size={16}
|
||||
color="#525F7F"
|
||||
style={{ textAlign: "center", fontFamily: 'open-sans-regular' }}
|
||||
>
|
||||
An artist of considerable range, Jessica name taken by
|
||||
Melbourne …
|
||||
</Text>
|
||||
<Button
|
||||
color="transparent"
|
||||
textStyle={{
|
||||
color: "#233DD2",
|
||||
fontWeight: "500",
|
||||
fontSize: 16,
|
||||
fontFamily: 'open-sans-regular'
|
||||
}}
|
||||
>
|
||||
Show more
|
||||
</Button>
|
||||
</Block>
|
||||
<Block
|
||||
row
|
||||
style={{ paddingVertical: 14 }}
|
||||
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 style={{ paddingBottom: -HeaderHeight * 2 }}>
|
||||
<Block row space="between" style={{ flexWrap: "wrap" }}>
|
||||
{Images.Viewed.map((img, imgIndex) => (
|
||||
<Image
|
||||
source={{ uri: img }}
|
||||
key={`viewed-${img}`}
|
||||
resizeMode="cover"
|
||||
style={styles.thumb}
|
||||
/>
|
||||
))}
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
<Block style={{ marginBottom: 25 }}/>
|
||||
</ScrollView>
|
||||
</ImageBackground>
|
||||
</Block>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
profile: {
|
||||
marginTop: Platform.OS === "android" ? -HeaderHeight : 0,
|
||||
// marginBottom: -HeaderHeight * 2,
|
||||
flex: 1
|
||||
},
|
||||
profileContainer: {
|
||||
width: width,
|
||||
height: height,
|
||||
padding: 0,
|
||||
zIndex: 1
|
||||
},
|
||||
profileBackground: {
|
||||
width: width,
|
||||
height: height / 2
|
||||
},
|
||||
profileCard: {
|
||||
// position: "relative",
|
||||
padding: theme.SIZES.BASE,
|
||||
marginHorizontal: theme.SIZES.BASE,
|
||||
marginTop: 65,
|
||||
borderTopLeftRadius: 6,
|
||||
borderTopRightRadius: 6,
|
||||
backgroundColor: theme.COLORS.WHITE,
|
||||
shadowColor: "black",
|
||||
shadowOffset: { width: 0, height: 0 },
|
||||
shadowRadius: 8,
|
||||
shadowOpacity: 0.2,
|
||||
zIndex: 2
|
||||
},
|
||||
info: {
|
||||
paddingHorizontal: 40
|
||||
},
|
||||
avatarContainer: {
|
||||
position: "relative",
|
||||
marginTop: -80
|
||||
},
|
||||
avatar: {
|
||||
width: 124,
|
||||
height: 124,
|
||||
borderRadius: 62,
|
||||
borderWidth: 0
|
||||
},
|
||||
nameInfo: {
|
||||
marginTop: 35
|
||||
},
|
||||
divider: {
|
||||
width: "90%",
|
||||
borderWidth: 1,
|
||||
borderColor: "#E9ECEF"
|
||||
},
|
||||
thumb: {
|
||||
borderRadius: 4,
|
||||
marginVertical: 4,
|
||||
alignSelf: "center",
|
||||
width: thumbMeasure,
|
||||
height: thumbMeasure
|
||||
}
|
||||
});
|
||||
|
||||
export default Profile;
|
||||
260
argon-pro-react-native/screens/Register.js
Normal file
260
argon-pro-react-native/screens/Register.js
Normal file
@@ -0,0 +1,260 @@
|
||||
import React from "react";
|
||||
import {
|
||||
StyleSheet,
|
||||
ImageBackground,
|
||||
Dimensions,
|
||||
StatusBar,
|
||||
TouchableWithoutFeedback,
|
||||
Keyboard
|
||||
} from "react-native";
|
||||
import { Block, Checkbox, Text } from "galio-framework";
|
||||
|
||||
import { Button, Icon, Input } from "../components";
|
||||
import { Images, argonTheme } from "../constants";
|
||||
|
||||
const { width, height } = Dimensions.get("screen");
|
||||
|
||||
const DismissKeyboard = ({ children }) => (
|
||||
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
|
||||
{children}
|
||||
</TouchableWithoutFeedback>
|
||||
);
|
||||
|
||||
class Register extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<DismissKeyboard>
|
||||
<Block flex middle>
|
||||
<StatusBar hidden />
|
||||
<ImageBackground
|
||||
source={Images.RegisterBackground}
|
||||
style={{ width, height, zIndex: 1 }}
|
||||
>
|
||||
<Block flex middle>
|
||||
<Block style={styles.registerContainer}>
|
||||
<Block flex space="between">
|
||||
<Block flex={0.2} middle style={styles.socialConnect}>
|
||||
<Block flex={0.6} middle>
|
||||
<Text color="#8898AA" size={12}>
|
||||
Sign up with
|
||||
</Text>
|
||||
</Block>
|
||||
<Block flex={0.4} row style={{ marginBottom: 18 }}>
|
||||
<Button
|
||||
style={{ ...styles.socialButtons, marginRight: 30 }}
|
||||
>
|
||||
<Block row>
|
||||
<Icon
|
||||
name="logo-github"
|
||||
family="Ionicon"
|
||||
size={14}
|
||||
color={"black"}
|
||||
style={{ marginTop: 2, marginRight: 5 }}
|
||||
/>
|
||||
<Text style={styles.socialTextButtons}>GITHUB</Text>
|
||||
</Block>
|
||||
</Button>
|
||||
<Button style={styles.socialButtons}>
|
||||
<Block row>
|
||||
<Icon
|
||||
name="facebook-square"
|
||||
family="font-awesome"
|
||||
size={14}
|
||||
color={"black"}
|
||||
style={{ marginTop: 2, marginRight: 5 }}
|
||||
/>
|
||||
<Text style={styles.socialTextButtons}>FACEBOOK</Text>
|
||||
</Block>
|
||||
</Button>
|
||||
</Block>
|
||||
</Block>
|
||||
<Block flex={0.8} middle space="between">
|
||||
<Block flex={0.2} middle>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: "open-sans-regular",
|
||||
textAlign: "center"
|
||||
}}
|
||||
color="#8898AA"
|
||||
size={12}
|
||||
>
|
||||
Or sign up the classic way
|
||||
</Text>
|
||||
</Block>
|
||||
<Block center flex={0.9}>
|
||||
<Block flex space="between">
|
||||
<Block>
|
||||
<Block
|
||||
width={width * 0.8}
|
||||
style={{ marginBottom: 5 }}
|
||||
>
|
||||
<Input
|
||||
borderless
|
||||
placeholder="Name"
|
||||
iconContent={
|
||||
<Icon
|
||||
size={16}
|
||||
color="#ADB5BD"
|
||||
name="hat-3"
|
||||
family="ArgonExtra"
|
||||
style={styles.inputIcons}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Block>
|
||||
<Block
|
||||
width={width * 0.8}
|
||||
style={{ marginBottom: 5 }}
|
||||
>
|
||||
<Input
|
||||
borderless
|
||||
placeholder="Email"
|
||||
iconContent={
|
||||
<Icon
|
||||
size={16}
|
||||
color="#ADB5BD"
|
||||
name="ic_mail_24px"
|
||||
family="ArgonExtra"
|
||||
style={styles.inputIcons}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Block>
|
||||
<Block width={width * 0.8}>
|
||||
<Input
|
||||
password
|
||||
borderless
|
||||
placeholder="Password"
|
||||
iconContent={
|
||||
<Icon
|
||||
size={16}
|
||||
color="#ADB5BD"
|
||||
name="padlock-unlocked"
|
||||
family="ArgonExtra"
|
||||
style={styles.inputIcons}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Block row style={styles.passwordCheck}>
|
||||
<Text
|
||||
style={{ fontFamily: "open-sans-regular" }}
|
||||
size={12}
|
||||
color={argonTheme.COLORS.MUTED}
|
||||
>
|
||||
password strength:
|
||||
</Text>
|
||||
<Text
|
||||
style={{ fontFamily: "open-sans-bold" }}
|
||||
size={12}
|
||||
color={argonTheme.COLORS.SUCCESS}
|
||||
>
|
||||
{" "}
|
||||
strong
|
||||
</Text>
|
||||
</Block>
|
||||
</Block>
|
||||
<Block row width={width * 0.75}>
|
||||
<Checkbox
|
||||
checkboxStyle={{
|
||||
borderWidth: 1
|
||||
}}
|
||||
color={argonTheme.COLORS.PRIMARY}
|
||||
labelStyle={{
|
||||
color: argonTheme.COLORS.TEXT,
|
||||
fontFamily: "open-sans-regular"
|
||||
}}
|
||||
label="I agree with the"
|
||||
/>
|
||||
<Button
|
||||
style={{ width: 100 }}
|
||||
color="transparent"
|
||||
textStyle={{
|
||||
color: argonTheme.COLORS.PRIMARY,
|
||||
fontSize: 14,
|
||||
fontFamily: "open-sans-regular",
|
||||
marginRight: 5
|
||||
}}
|
||||
>
|
||||
Privacy Policy
|
||||
</Button>
|
||||
</Block>
|
||||
</Block>
|
||||
<Block center>
|
||||
<Button color="primary" style={styles.createButton}>
|
||||
<Text
|
||||
style={{ fontFamily: "open-sans-bold" }}
|
||||
size={14}
|
||||
color={argonTheme.COLORS.WHITE}
|
||||
>
|
||||
CREATE ACCOUNT
|
||||
</Text>
|
||||
</Button>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
</ImageBackground>
|
||||
</Block>
|
||||
</DismissKeyboard>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
registerContainer: {
|
||||
width: width * 0.9,
|
||||
height: height < 812 ? height * 0.9 : height * 0.8,
|
||||
backgroundColor: "#F4F5F7",
|
||||
borderRadius: 4,
|
||||
shadowColor: argonTheme.COLORS.BLACK,
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 4
|
||||
},
|
||||
shadowRadius: 8,
|
||||
shadowOpacity: 0.1,
|
||||
elevation: 1,
|
||||
overflow: "hidden"
|
||||
},
|
||||
socialConnect: {
|
||||
backgroundColor: argonTheme.COLORS.WHITE,
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
borderColor: "rgba(136, 152, 170, 0.3)"
|
||||
},
|
||||
socialButtons: {
|
||||
width: 120,
|
||||
height: 40,
|
||||
backgroundColor: "#fff",
|
||||
shadowColor: argonTheme.COLORS.BLACK,
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 4
|
||||
},
|
||||
shadowRadius: 8,
|
||||
shadowOpacity: 0.1,
|
||||
elevation: 1
|
||||
},
|
||||
socialTextButtons: {
|
||||
color: argonTheme.COLORS.PRIMARY,
|
||||
fontWeight: "800",
|
||||
fontSize: 14
|
||||
},
|
||||
inputIcons: {
|
||||
marginRight: 12
|
||||
},
|
||||
passwordCheck: {
|
||||
paddingLeft: 2,
|
||||
paddingTop: 6,
|
||||
paddingBottom: 15
|
||||
},
|
||||
createButton: {
|
||||
width: width * 0.5,
|
||||
marginTop: 25,
|
||||
marginBottom: 40
|
||||
}
|
||||
});
|
||||
|
||||
export default Register;
|
||||
282
argon-pro-react-native/screens/Search.js
Normal file
282
argon-pro-react-native/screens/Search.js
Normal file
@@ -0,0 +1,282 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Animated,
|
||||
FlatList,
|
||||
Dimensions,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
TouchableWithoutFeedback
|
||||
} from "react-native";
|
||||
import { Block, Text, Input, theme } from "galio-framework";
|
||||
|
||||
const { width } = Dimensions.get("screen");
|
||||
|
||||
import { articles, categories, argonTheme } from "../constants/";
|
||||
import { Icon, Card } from "../components/";
|
||||
|
||||
const suggestions = [
|
||||
{ id: "DJs", title: "DJs", image: categories["DJs"] },
|
||||
{ id: "artists", title: "Artists", image: categories["artists"] },
|
||||
{ id: "accessory", title: "Accessories", image: categories["accessory"] }
|
||||
];
|
||||
|
||||
export default class Search extends React.Component {
|
||||
state = {
|
||||
results: [],
|
||||
search: "",
|
||||
active: false
|
||||
};
|
||||
|
||||
animatedValue = new Animated.Value(0);
|
||||
|
||||
animate() {
|
||||
this.animatedValue.setValue(0);
|
||||
|
||||
Animated.timing(this.animatedValue, {
|
||||
toValue: 1,
|
||||
duration: 300,
|
||||
useNativeDriver: true
|
||||
}).start();
|
||||
}
|
||||
|
||||
handleSearchChange = search => {
|
||||
const results = articles.filter(
|
||||
item => search && item.title.toLowerCase().includes(search)
|
||||
);
|
||||
this.setState({ results, search });
|
||||
this.animate();
|
||||
};
|
||||
|
||||
renderSearch = () => {
|
||||
const { search } = this.state;
|
||||
const iconSearch = search ? (
|
||||
<TouchableWithoutFeedback onPress={() => this.setState({ search: "" })}>
|
||||
<Icon
|
||||
size={16}
|
||||
color={theme.COLORS.MUTED}
|
||||
name="magnifying-glass"
|
||||
family="entypo"
|
||||
/>
|
||||
</TouchableWithoutFeedback>
|
||||
) : (
|
||||
<Icon
|
||||
size={16}
|
||||
color={theme.COLORS.MUTED}
|
||||
name="magnifying-glass"
|
||||
family="entypo"
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<Input
|
||||
right
|
||||
color="black"
|
||||
autoFocus={true}
|
||||
autoCorrect={false}
|
||||
autoCapitalize="none"
|
||||
iconContent={iconSearch}
|
||||
defaultValue={search}
|
||||
style={[styles.search, this.state.active ? styles.shadow : null]}
|
||||
placeholder="What are you looking for?"
|
||||
onFocus={() => this.setState({ active: true })}
|
||||
onBlur={() => this.setState({ active: false })}
|
||||
onChangeText={this.handleSearchChange}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
renderNotFound = () => {
|
||||
return (
|
||||
<Block style={styles.notfound}>
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} size={18} color={argonTheme.COLORS.TEXT}>
|
||||
We didn’t find "<Text bold>{this.state.search}</Text>" in our store.
|
||||
</Text>
|
||||
|
||||
<Text size={18} style={{ marginTop: theme.SIZES.BASE, fontFamily: 'open-sans-regular' }} color={argonTheme.COLORS.TEXT}>
|
||||
You can see more products from other categories.
|
||||
</Text>
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
renderSuggestions = () => {
|
||||
const { navigation } = this.props;
|
||||
|
||||
return (
|
||||
<FlatList
|
||||
data={suggestions}
|
||||
keyExtractor={(item, index) => item.id}
|
||||
renderItem={({ item }) => (
|
||||
<TouchableOpacity
|
||||
style={styles.suggestion}
|
||||
onPress={() => navigation.navigate("Category", { ...item })}
|
||||
>
|
||||
<Block flex row middle space="between">
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} size={14} color={argonTheme.COLORS.TEXT}>{item.title}</Text>
|
||||
<Icon
|
||||
name="chevron-right"
|
||||
family="evilicon"
|
||||
style={{ paddingRight: 5 }}
|
||||
/>
|
||||
</Block>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
renderDeals = () => {
|
||||
return (
|
||||
<ScrollView
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={styles.dealsContainer}
|
||||
>
|
||||
<Block flex>
|
||||
<Block flex row>
|
||||
<Card
|
||||
item={articles[1]}
|
||||
style={{ marginRight: theme.SIZES.BASE }}
|
||||
/>
|
||||
<Card item={articles[2]} />
|
||||
</Block>
|
||||
<Card item={articles[0]} horizontal />
|
||||
</Block>
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
|
||||
renderResult = result => {
|
||||
const opacity = this.animatedValue.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [0.8, 1],
|
||||
extrapolate: "clamp"
|
||||
});
|
||||
|
||||
return (
|
||||
<Animated.View
|
||||
style={{ width: width - theme.SIZES.BASE * 2, opacity }}
|
||||
key={`result-${result.title}`}
|
||||
>
|
||||
<Card item={result} horizontal />
|
||||
</Animated.View>
|
||||
);
|
||||
};
|
||||
|
||||
renderResults = () => {
|
||||
const { results, search } = this.state;
|
||||
|
||||
if (results.length === 0 && search) {
|
||||
return (
|
||||
<Block style={{ width: width - 40 }}>
|
||||
{this.renderNotFound()}
|
||||
{this.renderSuggestions()}
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} size={18} color={argonTheme.COLORS.TEXT}>Daily Deals</Text>
|
||||
{this.renderDeals()}
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Block style={{ paddingTop: theme.SIZES.BASE * 2 }}>
|
||||
{results.map(result => this.renderResult(result))}
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Block flex center style={styles.searchContainer}>
|
||||
<Block center style={styles.header}>
|
||||
{this.renderSearch()}
|
||||
</Block>
|
||||
<ScrollView showsVerticalScrollIndicator={false}>
|
||||
{this.renderResults()}
|
||||
</ScrollView>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
searchContainer: {
|
||||
width: width,
|
||||
paddingHorizontal: theme.SIZES.BASE
|
||||
},
|
||||
search: {
|
||||
height: 48,
|
||||
width: width - 32,
|
||||
marginHorizontal: theme.SIZES.BASE,
|
||||
marginBottom: theme.SIZES.BASE,
|
||||
borderWidth: 1,
|
||||
borderRadius: 3
|
||||
},
|
||||
shadow: {
|
||||
shadowColor: "black",
|
||||
shadowOffset: { width: 0, height: 3 },
|
||||
shadowRadius: 4,
|
||||
shadowOpacity: 0.1,
|
||||
elevation: 2
|
||||
},
|
||||
header: {
|
||||
backgroundColor: theme.COLORS.WHITE,
|
||||
shadowColor: "rgba(0, 0, 0, 0.2)",
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowRadius: 8,
|
||||
shadowOpacity: 1,
|
||||
elevation: 2,
|
||||
zIndex: 2
|
||||
},
|
||||
notfound: {
|
||||
marginVertical: theme.SIZES.BASE * 2
|
||||
},
|
||||
suggestion: {
|
||||
height: theme.SIZES.BASE * 1.5,
|
||||
marginBottom: theme.SIZES.BASE
|
||||
},
|
||||
result: {
|
||||
backgroundColor: theme.COLORS.WHITE,
|
||||
marginBottom: theme.SIZES.BASE,
|
||||
borderWidth: 0
|
||||
},
|
||||
resultTitle: {
|
||||
flex: 1,
|
||||
flexWrap: "wrap",
|
||||
paddingBottom: 6
|
||||
},
|
||||
resultDescription: {
|
||||
padding: theme.SIZES.BASE / 2
|
||||
},
|
||||
image: {
|
||||
overflow: "hidden",
|
||||
borderBottomLeftRadius: 4,
|
||||
borderTopLeftRadius: 4
|
||||
},
|
||||
dealsContainer: {
|
||||
justifyContent: "center",
|
||||
paddingTop: theme.SIZES.BASE
|
||||
},
|
||||
deals: {
|
||||
backgroundColor: theme.COLORS.WHITE,
|
||||
marginBottom: theme.SIZES.BASE,
|
||||
borderWidth: 0
|
||||
},
|
||||
dealsTitle: {
|
||||
flex: 1,
|
||||
flexWrap: "wrap",
|
||||
paddingBottom: 6
|
||||
},
|
||||
dealsDescription: {
|
||||
padding: theme.SIZES.BASE / 2
|
||||
},
|
||||
imageHorizontal: {
|
||||
overflow: "hidden",
|
||||
borderBottomLeftRadius: 4,
|
||||
borderTopLeftRadius: 4
|
||||
},
|
||||
imageVertical: {
|
||||
overflow: "hidden",
|
||||
borderTopRightRadius: 4,
|
||||
borderTopLeftRadius: 4
|
||||
}
|
||||
});
|
||||
137
argon-pro-react-native/screens/Settings.js
Normal file
137
argon-pro-react-native/screens/Settings.js
Normal file
@@ -0,0 +1,137 @@
|
||||
import React from "react";
|
||||
import {
|
||||
StyleSheet,
|
||||
FlatList,
|
||||
TouchableOpacity,
|
||||
View
|
||||
} from "react-native";
|
||||
import { Block, Text, theme, Icon } from "galio-framework";
|
||||
import { Switch } from "../components";
|
||||
|
||||
import argonTheme from "../constants/Theme";
|
||||
|
||||
export default class Settings extends React.Component {
|
||||
state = {};
|
||||
|
||||
toggleSwitch = switchNumber =>
|
||||
this.setState({ [switchNumber]: !this.state[switchNumber] });
|
||||
|
||||
renderItem = ({ item }) => {
|
||||
const { navigate } = this.props.navigation;
|
||||
|
||||
switch (item.type) {
|
||||
case "switch":
|
||||
return (
|
||||
<Block row middle space="between" style={styles.rows}>
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} size={14} color="#525F7F">{item.title}</Text>
|
||||
<Switch
|
||||
onValueChange={() => this.toggleSwitch(item.id)}
|
||||
value={this.state[item.id]}
|
||||
/>
|
||||
</Block>
|
||||
);
|
||||
case "button":
|
||||
return (
|
||||
<Block style={styles.rows}>
|
||||
<TouchableOpacity onPress={() => (item.id !== 'Payment' && item.id !== 'gift') && navigate(item.id)}>
|
||||
<Block row middle space="between" style={{ paddingTop: 7 }}>
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} size={14} color="#525F7F">{item.title}</Text>
|
||||
<Icon
|
||||
name="angle-right"
|
||||
family="font-awesome"
|
||||
style={{ paddingRight: 5 }}
|
||||
/>
|
||||
</Block>
|
||||
</TouchableOpacity>
|
||||
</Block>
|
||||
);
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const recommended = [
|
||||
{ title: "Use FaceID to sign in", id: "face", type: "switch" },
|
||||
{ title: "Auto-Lock security", id: "autolock", type: "switch" },
|
||||
{ title: "Notifications", id: "NotificationsSettings", type: "button" }
|
||||
];
|
||||
|
||||
const payment = [
|
||||
{ title: "Manage Payment Options", id: "Payment", type: "button" },
|
||||
{ title: "Manage Gift Cards", id: "gift", type: "button" }
|
||||
];
|
||||
|
||||
const privacy = [
|
||||
{ title: "User Agreement", id: "Agreement", type: "button" },
|
||||
{ title: "Privacy", id: "Privacy", type: "button" },
|
||||
{ title: "About", id: "About", type: "button" }
|
||||
];
|
||||
|
||||
return (
|
||||
<View
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={styles.settings}
|
||||
>
|
||||
<FlatList
|
||||
data={recommended}
|
||||
keyExtractor={(item, index) => item.id}
|
||||
renderItem={this.renderItem}
|
||||
ListHeaderComponent={
|
||||
<Block center style={styles.title}>
|
||||
<Text style={{ fontFamily: 'open-sans-bold', paddingBottom: 5 }} size={theme.SIZES.BASE} color={argonTheme.COLORS.TEXT}>
|
||||
Recommended Settings
|
||||
</Text>
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} size={12} color={argonTheme.COLORS.CAPTION} color={argonTheme.COLORS.TEXT}>
|
||||
These are the most important settings
|
||||
</Text>
|
||||
</Block>
|
||||
}
|
||||
/>
|
||||
<Block center style={styles.title}>
|
||||
<Text style={{ fontFamily: 'open-sans-bold', paddingBottom: 5 }} size={theme.SIZES.BASE} color={argonTheme.COLORS.TEXT}>
|
||||
Payment Settings
|
||||
</Text>
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} size={12} color={argonTheme.COLORS.CAPTION} color={argonTheme.COLORS.TEXT}>
|
||||
These are also important settings
|
||||
</Text>
|
||||
</Block>
|
||||
|
||||
<FlatList
|
||||
data={payment}
|
||||
keyExtractor={(item, index) => item.id}
|
||||
renderItem={this.renderItem}
|
||||
/>
|
||||
|
||||
<Block center style={styles.title}>
|
||||
<Text style={{ fontFamily: 'open-sans-bold', paddingBottom: 5 }} size={theme.SIZES.BASE} color={argonTheme.COLORS.TEXT}>
|
||||
Privacy Settings
|
||||
</Text>
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} size={12} color={argonTheme.COLORS.CAPTION} color={argonTheme.COLORS.TEXT}>
|
||||
Third most important settings
|
||||
</Text>
|
||||
</Block>
|
||||
<FlatList
|
||||
data={privacy}
|
||||
keyExtractor={(item, index) => item.id}
|
||||
renderItem={this.renderItem}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
settings: {
|
||||
paddingVertical: theme.SIZES.BASE / 3
|
||||
},
|
||||
title: {
|
||||
paddingTop: theme.SIZES.BASE,
|
||||
paddingBottom: theme.SIZES.BASE / 2
|
||||
},
|
||||
rows: {
|
||||
height: theme.SIZES.BASE * 2,
|
||||
paddingHorizontal: theme.SIZES.BASE,
|
||||
marginBottom: theme.SIZES.BASE / 2
|
||||
}
|
||||
});
|
||||
116
argon-pro-react-native/screens/SystemNotifications.js
Normal file
116
argon-pro-react-native/screens/SystemNotifications.js
Normal file
@@ -0,0 +1,116 @@
|
||||
import React from "react";
|
||||
import { StyleSheet, ScrollView, Alert } from "react-native";
|
||||
import { Block, Text } from "galio-framework";
|
||||
import { Notification } from "../components";
|
||||
import { argonTheme } from "../constants";
|
||||
|
||||
export default class SystemNotifications extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<Block flex>
|
||||
<ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
|
||||
<Block center style={{ width: "90%" }}>
|
||||
<Block style={styles.card}>
|
||||
<Block style={styles.cardHeader}>
|
||||
<Text
|
||||
size={18}
|
||||
style={{ fontFamily: "open-sans-bold" }}
|
||||
color={argonTheme.COLORS.TEXT}
|
||||
>
|
||||
Unread notifications
|
||||
</Text>
|
||||
</Block>
|
||||
<Block>
|
||||
<Notification
|
||||
transparent
|
||||
system
|
||||
title="New message"
|
||||
time="2 hrs ago"
|
||||
body="The new message from the author."
|
||||
iconName="bell"
|
||||
iconFamily="font-awesome"
|
||||
color={"#B0EED3"}
|
||||
style={{ marginBottom: 10 }}
|
||||
/>
|
||||
<Notification
|
||||
transparent
|
||||
system
|
||||
title="New order"
|
||||
time="3 hrs ago"
|
||||
body="A confirmed request by one party."
|
||||
iconName="bell"
|
||||
iconFamily="font-awesome"
|
||||
color={"#B0EED3"}
|
||||
style={{ marginBottom: 10 }}
|
||||
/>
|
||||
</Block>
|
||||
</Block>
|
||||
<Block style={styles.card}>
|
||||
<Block style={styles.cardHeader}>
|
||||
<Text
|
||||
size={18}
|
||||
style={{ fontFamily: "open-sans-bold" }}
|
||||
color={argonTheme.COLORS.TEXT}
|
||||
>
|
||||
Read notifications
|
||||
</Text>
|
||||
</Block>
|
||||
<Block>
|
||||
<Notification
|
||||
transparent
|
||||
system
|
||||
title="Last message"
|
||||
time="1 day ago"
|
||||
body="Let's meet at Starbucks at 11:30. Wdyt?"
|
||||
iconName="like1"
|
||||
iconFamily="antdesign"
|
||||
color={"#AAEDF9"}
|
||||
style={{ marginBottom: 10 }}
|
||||
/>
|
||||
<Notification
|
||||
transparent
|
||||
system
|
||||
title="Product issue"
|
||||
time="2 day ago"
|
||||
body="A new issue has been reported for Argon."
|
||||
iconName="html5"
|
||||
iconFamily="font-awesome"
|
||||
color={"#FDD1DA"}
|
||||
style={{ marginBottom: 10 }}
|
||||
/>
|
||||
<Notification
|
||||
transparent
|
||||
system
|
||||
title="New likes"
|
||||
time="4 days ago"
|
||||
body="Your posts have been liked a lot."
|
||||
iconName="like1"
|
||||
iconFamily="antdesign"
|
||||
color={"#AAEDF9"}
|
||||
style={{ marginBottom: 10 }}
|
||||
/>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
<Block style={{ marginBottom: 20 }} />
|
||||
</ScrollView>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
width: '100%',
|
||||
backgroundColor: argonTheme.COLORS.WHITE,
|
||||
marginTop: 25,
|
||||
borderRadius: 6
|
||||
},
|
||||
cardHeader: {
|
||||
paddingTop: 20,
|
||||
paddingBottom: 20,
|
||||
paddingLeft: 20,
|
||||
borderColor: 'rgba(0,0,0,0.2)',
|
||||
borderBottomWidth: StyleSheet.hairlineWidth
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user