Commit 9c2fced6 by Giang Tran

edit ui

parent 87e84ba1
......@@ -41,23 +41,25 @@ const HistoryView = (props) => {
<HeaderBack isWhite={true} title={'LỊCH SỬ'} />
<View style={{flex: 1}}>
<View style={styles.headerContainer}>
{Fillters.map((e) => (
<TouchableOpacity
key={e.value}
onPress={() => setSelected(e.value)}
style={[
styles.itemFillter,
selected == e.value ? {borderColor: '#1473E6'} : null,
]}>
<Text
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
{Fillters.map((e) => (
<TouchableOpacity
key={e.value}
onPress={() => setSelected(e.value)}
style={[
styles.txtFillter,
selected == e.value ? {color: '#1473E6'} : {},
styles.itemFillter,
selected == e.value ? {borderColor: '#1473E6'} : null,
]}>
{e.name}
</Text>
</TouchableOpacity>
))}
<Text
style={[
styles.txtFillter,
selected == e.value ? {color: '#1473E6'} : {},
]}>
{e.name}
</Text>
</TouchableOpacity>
))}
</ScrollView>
</View>
{data.length == 0 ? (
......@@ -80,7 +82,7 @@ const HistoryView = (props) => {
onEndReached={(info) => {
onLoadMore();
}}
keyExtractor={(item) => item.id}
keyExtractor={(item) => item.id + 'a'}
data={data}
renderItem={({item}) => <Item item={item} />}
/>
......@@ -106,6 +108,7 @@ const styles = StyleSheet.create({
borderWidth: 1,
borderColor: '#929292',
minWidth: 70,
marginRight: 10,
},
txtFillter: {
fontSize: getFontXD(36),
......
......@@ -16,42 +16,38 @@ const Item = (props) => {
const {item} = props;
const navigate = useNavigation();
return (
<TouchableOpacity onPress={() => console.log('hello')}>
<View style={styles.container}>
<Block flex={1} row>
{/* <View style={[styles.wrapLeft, {backgroundColor: item.color}]} />
<View style={styles.container}>
<Block flex={1} row>
{/* <View style={[styles.wrapLeft, {backgroundColor: item.color}]} />
<View style={styles.wrapDate}>
<Text style={styles.txt}>T{item.month}</Text>
<Text style={styles.txtTitle}>{item.day}</Text>
</View> */}
<Block
style={styles.wrapRight}
padding={[10, 10]}
space={'between'}
flex={1}>
<View style={styles.rowBet}>
<Text style={styles.txtTitle}>
{converType(item.transection_category)}
</Text>
<Text
style={{
fontSize: getFontXD(42),
fontWeight: 'bold',
color: '#FFB721',
}}>
{toPriceVnd(item.amount)}
</Text>
</View>
<Text numberOfLines={2} style={styles.txt}>
{item.comments}
<Block
style={styles.wrapRight}
padding={[10, 10]}
space={'between'}
flex={1}>
<View style={styles.rowBet}>
<Text style={styles.txtTitle}>
{converType(item.transection_category)}
</Text>
<Text style={styles.txtDate}>
{item.transection_date_timestamp}
<Text
style={{
fontSize: getFontXD(42),
fontWeight: 'bold',
color: '#FFB721',
}}>
{toPriceVnd(item.amount)}
</Text>
</Block>
</View>
<Text numberOfLines={2} style={styles.txt}>
{item.comments}
</Text>
<Text style={styles.txtDate}>{item.transection_date_timestamp}</Text>
</Block>
</View>
</TouchableOpacity>
</Block>
</View>
);
};
......@@ -88,7 +84,7 @@ const styles = StyleSheet.create({
paddingHorizontal: 10,
},
txtTitle: {
fontSize: getFontXD(48),
fontSize: getFontXD(42),
color: R.colors.black,
fontWeight: '700',
},
......
......@@ -13,57 +13,51 @@ import R from '../../assets/R';
const HomeView = (props) => {
const {total_deposit, total_withdraw} = props.data;
return (
<View style={{flex: 1}}>
<HeaderHome />
<View style={styles.body}>
<ScrollView
showsVerticalScrollIndicator={false}
style={styles.containerBody}>
<View style={{height: 10}} />
<View style={styles.containerMenu}>
<View style={styles.row}>
<View style={styles.row}>
<View style={styles.itemMenu}>
<Text style={styles.txtTitle}>Np tin</Text>
<Text style={styles.txtMoney}>
{' '}
{total_deposit == 0 ? 0 : toPriceVnd(total_deposit)} Đ{' '}
</Text>
</View>
<View
style={{width: 0.5, backgroundColor: R.colors.borderGray}}
/>
<View style={styles.itemMenu}>
<Text style={styles.txtTitle}>Rút tin</Text>
<Text style={styles.txtMoney}>
{' '}
{total_withdraw == 0
? 0
: toPriceVnd(total_withdraw)} Đ{' '}
</Text>
</View>
</View>
</View>
<View style={{height: 0.5, backgroundColor: R.colors.borderGray}} />
<ImageBackground
source={R.images.bgHome}
resizeMode={'stretch'}
style={{width: '100%', height: '100%'}}>
<ScrollView showsVerticalScrollIndicator={false}>
<HeaderHome />
<View style={styles.containerMenu}>
<View style={styles.row}>
<View style={styles.row}>
<View style={styles.itemMenu}>
<Text style={styles.txtTitle}>Hoa hng</Text>
<Text style={styles.txtMoney1}>+ 0 Đ </Text>
<Text style={styles.txtTitle}>Np tin</Text>
<Text style={styles.txtMoney}>
{' '}
{total_deposit == 0 ? 0 : toPriceVnd(total_deposit)} Đ{' '}
</Text>
</View>
<View
style={{width: 0.5, backgroundColor: R.colors.borderGray}}
/>
<View style={styles.itemMenu}>
<Text style={styles.txtTitle}>Li nhun</Text>
<Text style={styles.txtMoney1}>0 Đ</Text>
<Text style={styles.txtTitle}>Rút tin</Text>
<Text style={styles.txtMoney}>
{' '}
{total_withdraw == 0 ? 0 : toPriceVnd(total_withdraw)} Đ{' '}
</Text>
</View>
</View>
</View>
<View style={{height: 0.5, backgroundColor: R.colors.borderGray}} />
<View style={styles.row}>
<View style={styles.itemMenu}>
<Text style={styles.txtTitle}>Hoa hng</Text>
<Text style={styles.txtMoney1}>+ 0 Đ </Text>
</View>
<View style={{width: 0.5, backgroundColor: R.colors.borderGray}} />
<View style={styles.itemMenu}>
<Text style={styles.txtTitle}>Li nhun</Text>
<Text style={styles.txtMoney1}>0 Đ</Text>
</View>
</View>
</View>
<Footer />
</ScrollView>
</View>
</View>
<Footer />
</ScrollView>
</ImageBackground>
);
};
......@@ -82,7 +76,8 @@ const styles = StyleSheet.create({
containerMenu: {
height: 160,
backgroundColor: 'white',
marginVertical: 10,
marginTop: 20,
marginBottom: 10,
marginHorizontal: 20,
borderRadius: 10,
shadowColor: '#000',
......
import React, {useState} from 'react';
import {View, Text, FlatList, StyleSheet, TouchableOpacity} from 'react-native';
import {
View,
Text,
FlatList,
StyleSheet,
TouchableOpacity,
ScrollView,
} from 'react-native';
import HeaderDrawer from '../../components/Header/HeaderDrawer';
import Item from './Item';
......@@ -34,25 +41,29 @@ const NotificaitonView = (props) => {
return (
<View style={{flex: 1}}>
<HeaderDrawer isWhite={true} title={'Thông báo'} />
<View style={styles.headerContainer}>
{Fillters.map((e) => (
<TouchableOpacity
key={e.value}
onPress={() => setFillters(e.value)}
style={[
styles.itemFillter,
fillter == e.value ? {borderColor: '#1473E6'} : null,
]}>
<Text
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
{Fillters.map((e) => (
<TouchableOpacity
key={e.value}
onPress={() => setFillters(e.value)}
style={[
styles.txtFillter,
fillter == e.value ? {color: '#1473E6'} : {},
styles.itemFillter,
fillter == e.value ? {borderColor: '#1473E6'} : null,
]}>
{e.name}
</Text>
</TouchableOpacity>
))}
<Text
style={[
styles.txtFillter,
fillter == e.value ? {color: '#1473E6'} : {},
]}>
{e.name}
</Text>
</TouchableOpacity>
))}
</ScrollView>
</View>
{data.length == 0 ? (
<View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
<Text
......@@ -85,7 +96,6 @@ const styles = StyleSheet.create({
paddingVertical: 10,
backgroundColor: 'white',
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
paddingHorizontal: 10,
},
......@@ -95,9 +105,9 @@ const styles = StyleSheet.create({
paddingHorizontal: 10,
borderWidth: 1,
borderColor: '#929292',
minWidth: 80,
justifyContent: 'center',
alignItems: 'center',
marginRight: 10,
},
txtFillter: {
fontSize: getFontXD(36),
......
......@@ -12,8 +12,9 @@ const images = {
moneyinvest: require('./images/moneyinvest.png'),
moneysupport: require('./images/moneysupport.png'),
moneyteam: require('./images/moneyteam.png'),
bgHeader: require('./images/bgHeader1.png'),
bgHeader: require('./images/bgheader5.png'),
iconMenu: require('./images/iconmenu.png'),
bgHome: require('./images/bgHome5.png'),
iconUser: require('./images/iconUser1.png'),
iconUserAccuracy: require('./images/iconUserAccuracy.png'),
......
......@@ -48,15 +48,12 @@ export default connect(mapStateToProps, {})(HeaderHome);
const styles = StyleSheet.create({
img: {
height: 110,
height: 95,
width: '100%',
justifyContent: 'center',
alignItems: 'center',
paddingTop: 30,
},
headerContainer: {
height: 55,
paddingTop: 10,
height: 40,
width: '100%',
alignItems: 'center',
flexDirection: 'row',
......
......@@ -77,11 +77,10 @@ export default connect(mapStateToProps, {})(HeaderDrawer);
const styles = StyleSheet.create({
img: {
height: 110,
height: 95,
width: '100%',
justifyContent: 'center',
alignItems: 'center',
paddingTop: 30,
},
headerContainer: {
height: 55,
......
......@@ -117,9 +117,7 @@ const HeaderHome = (props) => {
return (
<View style={styles.container}>
<ImageBackground style={styles.img} source={R.images.headerHome}>
<StatusBar backgroundColor="transparent" translucent={true} />
</ImageBackground>
<StatusBar backgroundColor="transparent" translucent={true} />
<View
style={{
justifyContent: 'center',
......@@ -230,7 +228,7 @@ const styles = StyleSheet.create({
shadowOpacity: 0.25,
shadowRadius: 2.84,
elevation: 3,
marginTop: -180,
marginTop: HEIGHTXD(150),
},
containerMenu: {
justifyContent: 'space-between',
......
......@@ -74,11 +74,10 @@ export default connect(mapStateToProps, {})(HeaderHome);
const styles = StyleSheet.create({
img: {
height: 110,
height: 95,
width: '100%',
justifyContent: 'center',
alignItems: 'center',
paddingTop: 30,
},
headerContainer: {
height: 55,
......
......@@ -75,11 +75,10 @@ export default connect(mapStateToProps, {})(HeaderSearch);
const styles = StyleSheet.create({
img: {
height: 110,
height: 95,
width: '100%',
justifyContent: 'center',
alignItems: 'center',
paddingTop: 30,
},
headerContainer: {
height: 55,
......
......@@ -100,11 +100,9 @@ export default connect(mapStateToProps, {})(HeaderSearch);
const styles = StyleSheet.create({
img: {
height: 110,
height: 95,
width: '100%',
justifyContent: 'center',
alignItems: 'center',
paddingTop: 30,
},
headerContainer: {
height: 55,
......
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