Skip to content

I
InvestCustomer
Commit 4fd75d6e by Nguyễn Thị Thúy
Options

complete price UI

parent 72e51c6d
Showing with 50 additions and 50 deletions
src/Screens/Home/Home.js
...@@ -10,25 +10,25 @@ import {getListCategoryProduct} from '../../apis/Functions/Transaction'; ...@@ -10,25 +10,25 @@ import {getListCategoryProduct} from '../../apis/Functions/Transaction';
const Home = (props) => { const Home = (props) => {
const [data, setData] = useState({total_deposit: 0, total_withdraw: 0}); const [data, setData] = useState({total_deposit: 0, total_withdraw: 0});
const [dataPrice, setDataPrice] = useState([ const [dataPrice, setDataPrice] = useState([
{name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'}, {name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021', isUp: false},
{name: 'GCEM21', change: 0.5, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'}, {name: 'GCEM21', change: 0.5, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021', isUp: true},
{name: 'GCEM21', change: 0.1, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'}, {name: 'GCEM21', change: 0.1, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021', isUp: false},
{name: 'GCEM21', change: 0.6, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'}, {name: 'GCEM21', change: 0.6, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021', isUp: true},
{name: 'GCEM21', change: 0.3, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'}, {name: 'GCEM21', change: 0.3, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021', isUp: false},
{name: 'GCEM21', change: 0.9, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'}, {name: 'GCEM21', change: 0.9, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021', isUp: false},
{name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'}, {name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021', isUp: false},
{name: 'GCEM21', change: 0.3, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'}, {name: 'GCEM21', change: 0.3, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021', isUp: true},
{name: 'GCEM21', change: 0.5, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'}, {name: 'GCEM21', change: 0.5, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021', isUp: true},
{name: 'GCEM21', change: 0.1, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'}, {name: 'GCEM21', change: 0.1, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021', isUp: false},
{name: 'GCEM21', change: 0.7, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'}, {name: 'GCEM21', change: 0.7, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021', isUp: true},
{name: 'GCEM21', change: 0.4, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'}, {name: 'GCEM21', change: 0.4, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021', isUp: true},
{name: 'GCEM21', change: 0.5, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'}, {name: 'GCEM21', change: 0.5, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021', isUp: false},
{name: 'GCEM21', change: 0.5, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'}, {name: 'GCEM21', change: 0.5, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021', isUp: false},
{name: 'GCEM21', change: 0.8, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'}, {name: 'GCEM21', change: 0.8, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021', isUp: false},
{name: 'GCEM21', change: 0.3, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'}, {name: 'GCEM21', change: 0.3, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021', isUp: true},
{name: 'GCEM21', change: 0.4, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'}, {name: 'GCEM21', change: 0.4, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021', isUp: false},
{name: 'GCEM21', change: 0.5, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'}, {name: 'GCEM21', change: 0.5, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021', isUp: true},
{name: 'GCEM21', change: 0.4, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'}, {name: 'GCEM21', change: 0.4, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021', isUp: false},
]); ]);
const [listImage, setListImage] = useState([]); const [listImage, setListImage] = useState([]);
const [filters, setFilters] = useState([]); const [filters, setFilters] = useState([]);
......
src/Screens/Home/ItemPrice.js
...@@ -3,9 +3,7 @@ import { ...@@ -3,9 +3,7 @@ import {
View, View,
Text, Text,
StyleSheet, StyleSheet,
TouchableOpacity,
Image, Image,
Alert,
} from 'react-native'; } from 'react-native';
import { import {
getFontXD, getFontXD,
...@@ -14,7 +12,6 @@ import { ...@@ -14,7 +12,6 @@ import {
} from '../../Config/Functions'; } from '../../Config/Functions';
import R from '../../assets/R'; import R from '../../assets/R';
import Block from '../../components/Block'; import Block from '../../components/Block';
import AntDesign from 'react-native-vector-icons/AntDesign';
import * as Progress from 'react-native-progress'; import * as Progress from 'react-native-progress';
const ItemPrice = (props) => { const ItemPrice = (props) => {
...@@ -50,16 +47,12 @@ const ItemPrice = (props) => { ...@@ -50,16 +47,12 @@ const ItemPrice = (props) => {
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
}}> }}>
<AntDesign <Image source={item.isUp ? R.images.iconTriangleUp : R.images.iconTriangleDown} style={styles.imgIcon} />
name="caretup" <Text style={[styles.txtBlack, {flexWrap: 'wrap', color: item.isUp ? R.colors.green : R.colors.red2}]}>
size={WIDTHXD(25)}
color={R.colors.green}
/>
<Text style={[styles.txtBlack, {flexWrap: 'wrap', color: R.colors.green}]}>
{item.change} {item.change}
</Text> </Text>
</View> </View>
<Text style={[styles.txtMoney, {color: R.colors.green}]}>{`${item.change}%`}</Text> <Text style={[styles.txtMoney, {color: item.isUp ? R.colors.green : R.colors.red2}]}>{`${item.change}%`}</Text>
</View> </View>
</Block> </Block>
<Block padding={[0, 0]} space={'between'} flex={1}> <Block padding={[0, 0]} space={'between'} flex={1}>
...@@ -82,11 +75,7 @@ const ItemPrice = (props) => { ...@@ -82,11 +75,7 @@ const ItemPrice = (props) => {
ellipsizeMode='tail'> ellipsizeMode='tail'>
{item.openPrice} {item.openPrice}
</Text> </Text>
<AntDesign <Image source={item.isUp ? R.images.iconTriangleUp : R.images.iconTriangleDown} style={styles.imgIcon} />
name="caretup"
size={WIDTHXD(25)}
color={R.colors.green}
/>
</View> </View>
<View <View
style={{ style={{
...@@ -96,11 +85,7 @@ const ItemPrice = (props) => { ...@@ -96,11 +85,7 @@ const ItemPrice = (props) => {
alignItems: 'center', alignItems: 'center',
}}> }}>
<Text style={[styles.txtMoney, {color: R.colors.gray}]}>{item.closePrice}</Text> <Text style={[styles.txtMoney, {color: R.colors.gray}]}>{item.closePrice}</Text>
<AntDesign <Image source={R.images.iconCheck2} style={styles.imgIcon} />
name="check"
size={WIDTHXD(25)}
color={R.colors.gray}
/>
</View> </View>
</View> </View>
</Block> </Block>
...@@ -190,13 +175,12 @@ const styles = StyleSheet.create({ ...@@ -190,13 +175,12 @@ const styles = StyleSheet.create({
fontSize: getFontXD(32), fontSize: getFontXD(32),
color: 'black', color: 'black',
}, },
imgIcon: {
width: WIDTHXD(150),
height: WIDTHXD(150),
resizeMode: 'cover',
marginLeft: WIDTHXD(35),
},
txtMoney: { txtMoney: {
fontSize: getFontXD(34), fontSize: getFontXD(34),
}, },
imgIcon: {
width: WIDTHXD(20),
height: WIDTHXD(20),
resizeMode: 'contain',
}
}); });
src/Screens/Home/PriceListView.js
...@@ -5,7 +5,7 @@ import { ...@@ -5,7 +5,7 @@ import {
FlatList, FlatList,
StyleSheet, StyleSheet,
TouchableOpacity, TouchableOpacity,
ScrollView, ScrollView, Image,
} from 'react-native'; } from 'react-native';
import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions'; import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
...@@ -41,17 +41,21 @@ const PriceListView = (props) => { ...@@ -41,17 +41,21 @@ const PriceListView = (props) => {
data={dataPrice} data={dataPrice}
ListHeaderComponent={() => ListHeaderComponent={() =>
<View style={[styles.container]}> <View style={[styles.container]}>
<View style={[styles.headerContent, {flex: 0.8, justifyContent: 'flex-start'}]}> <View style={[styles.headerContent, {flex: 0.3, justifyContent: 'flex-start', alignItems: 'center',}]}>
<Text>Tên</Text> <Text>Tên</Text>
<Image source={R.images.iconSort} style={styles.imgIcon} />
</View> </View>
<View style={[styles.headerContent]}> <View style={[styles.headerContent, {flex: 1.5}]}>
<Text>Tỷ lệ thay đổi</Text> <Text>Tỷ lệ thay đổi</Text>
<Image source={R.images.iconSort} style={styles.imgIcon} />
</View> </View>
<View style={[styles.headerContent]}> <View style={[styles.headerContent]}>
<Text>Giá mở/đóng</Text> <Text>Giá mở/đóng</Text>
<Image source={R.images.iconSort} style={styles.imgIcon} />
</View> </View>
<View style={[styles.headerContent]}> <View style={[styles.headerContent]}>
<Text>Giá cao/thấp</Text> <Text>Giá cao/thấp</Text>
<Image source={R.images.iconSort} style={styles.imgIcon} />
</View> </View>
</View>} </View>}
renderItem={({item}) => <ItemPrice item={item}/>} renderItem={({item}) => <ItemPrice item={item}/>}
...@@ -98,6 +102,12 @@ const styles = StyleSheet.create({ ...@@ -98,6 +102,12 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'flex-end', justifyContent: 'flex-end',
alignItems: 'center',
},
imgIcon: {
width: WIDTHXD(30),
height: WIDTHXD(35),
resizeMode: 'contain',
}, },
}); });
......
src/assets/colors.js
...@@ -54,6 +54,7 @@ const colors = { ...@@ -54,6 +54,7 @@ const colors = {
yellow: '#e6e600', yellow: '#e6e600',
red: '#A60014', red: '#A60014',
red1: '#e2e8eb', red1: '#e2e8eb',
red2: '#E3434F',
}; };
export default colors; export default colors;
src/assets/images.js
...@@ -81,11 +81,16 @@ const images = { ...@@ -81,11 +81,16 @@ const images = {
iconRoseMenu: require('./images/iconRoseMenu.png'), iconRoseMenu: require('./images/iconRoseMenu.png'),
iconTransaction: require('./images/iconTransaction.png'), iconTransaction: require('./images/iconTransaction.png'),
iconTransaction2: require('./images/iconTransaction2.png'),
iconChartMenu: require('./images/iconChartMenu.png'), iconChartMenu: require('./images/iconChartMenu.png'),
iconHistoryMenu: require('./images/iconHistoryMenu1.png'), iconHistoryMenu: require('./images/iconHistoryMenu1.png'),
iconProfileMenu: require('./images/iconProfileMenu.png'), iconProfileMenu: require('./images/iconProfileMenu.png'),
iconUpgrade: require('./images/iconUpgrade.png'), iconUpgrade: require('./images/iconUpgrade.png'),
iconCheck2: require('./images/iconCheck2.png'),
iconTriangleUp: require('./images/iconTriangleUp.png'),
iconTriangleDown: require('./images/iconTriangleDown.png'),
iconSort: require('./images/iconSort.png'),
}; };
export default images; export default images;
src/routers/TabNavigation.js
import React, {useEffect} from 'react'; import React, {useEffect} from 'react';
import {View, Text, Linking} from 'react-native'; import {View, Text, Linking, Image} from 'react-native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/FontAwesome5'; import Icon from 'react-native-vector-icons/FontAwesome5';
import Ionicons from 'react-native-vector-icons/Ionicons'; import Ionicons from 'react-native-vector-icons/Ionicons';
...@@ -112,7 +112,7 @@ const TabNavigator = (props) => { ...@@ -112,7 +112,7 @@ const TabNavigator = (props) => {
options={{ options={{
tabBarLabel: I18n.t('Tradding'), tabBarLabel: I18n.t('Tradding'),
tabBarIcon: ({color, size}) => ( tabBarIcon: ({color, size}) => (
<FontAwesome name="line-chart" size={size} color={color} /> <Image source={R.images.iconTransaction2} style={{width: size, height: size, tintColor: color}} />
), ),
}} }}
/> />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment