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';
const Home = (props) => {
const [data, setData] = useState({total_deposit: 0, total_withdraw: 0});
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.5, 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'},
{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.3, 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'},
{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.3, 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'},
{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.7, 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'},
{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'},
{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.3, 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'},
{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.4, 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', isUp: false},
]);
const [listImage, setListImage] = useState([]);
const [filters, setFilters] = useState([]);
......
src/Screens/Home/ItemPrice.js
......@@ -3,9 +3,7 @@ import {
View,
Text,
StyleSheet,
TouchableOpacity,
Image,
Alert,
} from 'react-native';
import {
getFontXD,
......@@ -14,7 +12,6 @@ import {
} from '../../Config/Functions';
import R from '../../assets/R';
import Block from '../../components/Block';
import AntDesign from 'react-native-vector-icons/AntDesign';
import * as Progress from 'react-native-progress';
const ItemPrice = (props) => {
......@@ -50,16 +47,12 @@ const ItemPrice = (props) => {
justifyContent: 'space-between',
alignItems: 'center',
}}>
<AntDesign
name="caretup"
size={WIDTHXD(25)}
color={R.colors.green}
/>
<Text style={[styles.txtBlack, {flexWrap: 'wrap', color: R.colors.green}]}>
<Image source={item.isUp ? R.images.iconTriangleUp : R.images.iconTriangleDown} style={styles.imgIcon} />
<Text style={[styles.txtBlack, {flexWrap: 'wrap', color: item.isUp ? R.colors.green : R.colors.red2}]}>
{item.change}
</Text>
</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>
</Block>
<Block padding={[0, 0]} space={'between'} flex={1}>
......@@ -82,11 +75,7 @@ const ItemPrice = (props) => {
ellipsizeMode='tail'>
{item.openPrice}
</Text>
<AntDesign
name="caretup"
size={WIDTHXD(25)}
color={R.colors.green}
/>
<Image source={item.isUp ? R.images.iconTriangleUp : R.images.iconTriangleDown} style={styles.imgIcon} />
</View>
<View
style={{
......@@ -96,11 +85,7 @@ const ItemPrice = (props) => {
alignItems: 'center',
}}>
<Text style={[styles.txtMoney, {color: R.colors.gray}]}>{item.closePrice}</Text>
<AntDesign
name="check"
size={WIDTHXD(25)}
color={R.colors.gray}
/>
<Image source={R.images.iconCheck2} style={styles.imgIcon} />
</View>
</View>
</Block>
......@@ -190,13 +175,12 @@ const styles = StyleSheet.create({
fontSize: getFontXD(32),
color: 'black',
},
imgIcon: {
width: WIDTHXD(150),
height: WIDTHXD(150),
resizeMode: 'cover',
marginLeft: WIDTHXD(35),
},
txtMoney: {
fontSize: getFontXD(34),
},
imgIcon: {
width: WIDTHXD(20),
height: WIDTHXD(20),
resizeMode: 'contain',
}
});
src/Screens/Home/PriceListView.js
......@@ -5,7 +5,7 @@ import {
FlatList,
StyleSheet,
TouchableOpacity,
ScrollView,
ScrollView, Image,
} from 'react-native';
import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
......@@ -41,17 +41,21 @@ const PriceListView = (props) => {
data={dataPrice}
ListHeaderComponent={() =>
<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>
<Image source={R.images.iconSort} style={styles.imgIcon} />
</View>
<View style={[styles.headerContent]}>
<View style={[styles.headerContent, {flex: 1.5}]}>
<Text>Tỷ lệ thay đổi</Text>
<Image source={R.images.iconSort} style={styles.imgIcon} />
</View>
<View style={[styles.headerContent]}>
<Text>Giá mở/đóng</Text>
<Image source={R.images.iconSort} style={styles.imgIcon} />
</View>
<View style={[styles.headerContent]}>
<Text>Giá cao/thấp</Text>
<Image source={R.images.iconSort} style={styles.imgIcon} />
</View>
</View>}
renderItem={({item}) => <ItemPrice item={item}/>}
......@@ -98,6 +102,12 @@ const styles = StyleSheet.create({
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
},
imgIcon: {
width: WIDTHXD(30),
height: WIDTHXD(35),
resizeMode: 'contain',
},
});
......
src/assets/colors.js
......@@ -54,6 +54,7 @@ const colors = {
yellow: '#e6e600',
red: '#A60014',
red1: '#e2e8eb',
red2: '#E3434F',
};
export default colors;
src/assets/images.js
......@@ -81,11 +81,16 @@ const images = {
iconRoseMenu: require('./images/iconRoseMenu.png'),
iconTransaction: require('./images/iconTransaction.png'),
iconTransaction2: require('./images/iconTransaction2.png'),
iconChartMenu: require('./images/iconChartMenu.png'),
iconHistoryMenu: require('./images/iconHistoryMenu1.png'),
iconProfileMenu: require('./images/iconProfileMenu.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;
src/routers/TabNavigation.js
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 Icon from 'react-native-vector-icons/FontAwesome5';
import Ionicons from 'react-native-vector-icons/Ionicons';
......@@ -112,7 +112,7 @@ const TabNavigator = (props) => {
options={{
tabBarLabel: I18n.t('Tradding'),
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