Skip to content

I
InvestCustomer
Commit 4e39bbcc by Giang Tran
Options

update code

parent f60e93c2
Showing with 798 additions and 37 deletions
src/Screens/Account/AccountView.js
import React from 'react'; import React from 'react';
import {View, Text, StyleSheet, Image} from 'react-native'; import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
import HeaderDrawer from '../../components/Header/HeaderDrawer'; import HeaderDrawer from '../../components/Header/HeaderDrawer';
import {WIDTHXD, HEIGHTXD} from '../../Config/Functions'; import {WIDTHXD, HEIGHTXD} from '../../Config/Functions';
import R from '../../assets/R'; import R from '../../assets/R';
import {useNavigation} from '@react-navigation/native';
import {
USERINFOR,
PAYMENTS,
ROSE,
BONUSTEAM,
MYGROUP,
AccountVerification,
} from '../../routers/ScreenNames';
const AccountView = (props) => { const AccountView = (props) => {
const navigate = useNavigation();
return ( return (
<View> <View>
<HeaderDrawer /> <HeaderDrawer />
<View style={styles.container}> <View style={styles.container}>
<View style={styles.containerItem}> <TouchableOpacity
onPress={() => navigate.navigate(USERINFOR)}
style={styles.containerItem}>
<Image source={R.images.iconUser} style={styles.imgIcon} /> <Image source={R.images.iconUser} style={styles.imgIcon} />
<Text>Thông tin cá nhân</Text> <Text>Thông tin cá nhân</Text>
</View> </TouchableOpacity>
<View style={styles.containerItem}> <TouchableOpacity
onPress={() => navigate.navigate(AccountVerification)}
style={styles.containerItem}>
<Image source={R.images.iconUserAccuracy} style={styles.imgIcon} /> <Image source={R.images.iconUserAccuracy} style={styles.imgIcon} />
<Text>Xác thực tài khoản</Text> <Text>Xác thực tài khoản</Text>
</View> </TouchableOpacity>
<View style={styles.containerItem}>
<TouchableOpacity
onPress={() => navigate.navigate(PAYMENTS)}
style={styles.containerItem}>
<Image source={R.images.iconList} style={styles.imgIcon} /> <Image source={R.images.iconList} style={styles.imgIcon} />
<Text>Các khoản thanh toán</Text> <Text>Các khoản thanh toán</Text>
</View> </TouchableOpacity>
<View style={styles.containerItem}>
<TouchableOpacity
onPress={() => navigate.navigate(ROSE)}
style={styles.containerItem}>
<Image source={R.images.iconRose} style={styles.imgIcon} /> <Image source={R.images.iconRose} style={styles.imgIcon} />
<Text>Hoa hồng</Text> <Text>Hoa hồng</Text>
</View> </TouchableOpacity>
<View style={styles.containerItem}>
<TouchableOpacity
onPress={() => navigate.navigate(BONUSTEAM)}
style={styles.containerItem}>
<Image source={R.images.iconWallet} style={styles.imgIcon} /> <Image source={R.images.iconWallet} style={styles.imgIcon} />
<Text>Tiền thưởng đội nhóm</Text> <Text>Tiền thưởng đội nhóm</Text>
</View> </TouchableOpacity>
<View style={styles.containerItem}>
<TouchableOpacity
onPress={() => navigate.navigate(MYGROUP)}
style={styles.containerItem}>
<Image source={R.images.moneyteam} style={styles.imgIcon} /> <Image source={R.images.moneyteam} style={styles.imgIcon} />
<Text>Đối tác của tôi</Text> <Text>Đối tác của tôi</Text>
</View> </TouchableOpacity>
</View> </View>
</View> </View>
); );
......
src/Screens/Action/Deposit/Deposit.js 0 → 100644
import React from 'react';
import DepositView from './DepositView';
const Deposit = (props) => {
return <DepositView />;
};
export default Deposit;
src/Screens/Action/Deposit/DepositView.js 0 → 100644
import React from 'react';
import {View, Text} from 'react-native';
const DepositView = (props) => {
return (
<View>
<Text>DepositView screen</Text>
</View>
);
};
export default DepositView;
src/Screens/Action/History/History.js 0 → 100644
import React from 'react';
import HistoryView from './HistoryView';
const History = (props) => {
return <HistoryView />;
};
export default History;
src/Screens/Action/History/HistoryView.js 0 → 100644
import React from 'react';
import {View, Text} from 'react-native';
const HistoryView = (props) => {
return (
<View>
<Text>HistoryView screen</Text>
</View>
);
};
export default HistoryView;
src/Screens/Action/Transfer/Transfer.js 0 → 100644
import React from 'react';
import TransferView from './TransferView';
const Transfer = (props) => {
return <TransferView />;
};
export default Transfer;
src/Screens/Action/Transfer/TransferView.js 0 → 100644
import React from 'react';
import {View, Text} from 'react-native';
const TransferView = (props) => {
return (
<View>
<Text>TransferView screen</Text>
</View>
);
};
export default TransferView;
src/Screens/Action/Withdraw/Withdraw.js 0 → 100644
import React from 'react';
import WithdrawView from './WithdrawView';
const Withdraw = (props) => {
return <WithdrawView />;
};
export default Withdraw;
src/Screens/Action/Withdraw/WithdrawView.js 0 → 100644
import React from 'react';
import {View, Text} from 'react-native';
const WithdrawView = (props) => {
return (
<View>
<Text>WithdrawView screen</Text>
</View>
);
};
export default WithdrawView;
src/Screens/Exchange/ExchangeView.js
import React from 'react'; import React, {useState} from 'react';
import {View, Text} from 'react-native'; import {View, Text, StyleSheet, FlatList, TouchableOpacity} from 'react-native';
import HeaderSearch from '../../components/Header/HeaderSearch';
import {getFontXD} from '../../Config/Functions';
import Item from './Item';
const Fillters = [
{
id: '1',
name: 'Tất cả',
value: 'all',
},
{
id: '2',
name: 'Nạp tiền',
value: 'deposit',
},
{
id: '3',
name: 'Rút tiền',
value: 'withdraw',
},
{
id: '4',
name: 'Chuyển khoản',
value: 'exchange',
},
];
const data = [
{
id: '1',
month: 2,
day: '20',
name: 'Nạp tiền',
money: 10000000,
note: 'Ghi chú nap tiền để đầu tư',
status: 1,
date: '20/02/2021',
},
{
id: '2',
month: 2,
day: '20',
name: 'Nạp tiền',
money: 2000000,
note: 'Ghi chú nap tiền để đầu tư',
status: 1,
date: '20/02/2021',
},
{
id: '3',
month: 2,
day: '20',
name: 'Nạp tiền',
money: 3000000,
note: 'Ghi chú nap tiền để đầu tư',
status: 1,
date: '20/02/2021',
},
{
id: '4',
month: 2,
day: '20',
name: 'Nạp tiền',
money: 4000000,
note: 'Ghi chú nap tiền để đầu tư',
status: 1,
date: '20/02/2021',
},
{
id: '5',
month: 2,
day: '20',
name: 'Nạp tiền',
money: 9000000,
note: 'Ghi chú nap tiền để đầu tư',
status: 1,
date: '20/02/2021',
},
];
const ExchangeView = (props) => { const ExchangeView = (props) => {
const [selected, setSelected] = useState('1');
return ( return (
<View> <View style={{flex: 1}}>
<Text>ExchangeView screen</Text> <HeaderSearch isWhite={true} title={'Giao dịch'} />
<View style={styles.headerContainer}>
<FlatList
showsHorizontalScrollIndicator={false}
horizontal
data={Fillters}
keyExtractor={(item) => item.id}
renderItem={({item}) => (
<TouchableOpacity
onPress={() => setSelected(item.id)}
style={[
styles.itemFillter,
selected == item.id ? {borderColor: '#1473E6'} : null,
]}>
<Text
style={[
styles.txtFillter,
selected == item.id ? {color: '#1473E6'} : {},
]}>
{item.name}
</Text>
</TouchableOpacity>
)}
/>
</View>
<View style={{flex: 1}}>
<FlatList
keyExtractor={(item) => item.id}
data={data}
renderItem={({item}) => <Item item={item} />}
/>
</View>
</View> </View>
); );
}; };
const styles = StyleSheet.create({
headerContainer: {
paddingVertical: 10,
backgroundColor: 'white',
},
itemFillter: {
borderRadius: 10,
paddingVertical: 5,
paddingHorizontal: 10,
borderWidth: 1,
borderColor: '#929292',
marginLeft: 15,
minWidth: 70,
},
txtFillter: {
fontSize: getFontXD(36),
color: '#929292',
},
});
export default ExchangeView; export default ExchangeView;
src/Screens/Exchange/Item.js 0 → 100644
import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
import {getFontXD, HEIGHTXD, WIDTHXD, toPriceVnd} from '../../Config/Functions';
import R from '../../assets/R';
import Block from '../../components/Block';
import {useNavigation} from '@react-navigation/native';
import {DETAIL_REQUIRE_MONEY} from '../../routers/ScreenNames';
const Item = (props) => {
const {item} = props;
const navigate = useNavigation();
return (
<TouchableOpacity onPress={() => navigate.navigate(DETAIL_REQUIRE_MONEY)}>
<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={[5, 10]}
space={'between'}
flex={1}>
<View style={styles.rowBet}>
<Text style={styles.txt}>{item.name}</Text>
<Text
style={{
fontSize: getFontXD(42),
fontWeight: 'bold',
color: '#FFB721',
}}>
{toPriceVnd(item.money)}
</Text>
</View>
<Text numberOfLines={1} style={styles.txtTitle}>
{item.note}
</Text>
<Text style={styles.txtDate}>Ngày {item.date}</Text>
</Block>
</Block>
</View>
</TouchableOpacity>
);
};
export default Item;
const styles = StyleSheet.create({
container: {
height: HEIGHTXD(280),
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
marginHorizontal: 10,
backgroundColor: R.colors.white,
marginTop: 5,
borderRadius: HEIGHTXD(30),
marginBottom: 5,
},
wrapRight: {
borderLeftColor: R.colors.borderGray,
borderLeftWidth: 0.7,
},
wrapLeft: {
width: WIDTHXD(16),
borderTopLeftRadius: HEIGHTXD(30),
borderBottomStartRadius: HEIGHTXD(30),
},
wrapDate: {
justifyContent: 'center',
paddingHorizontal: 10,
},
txtTitle: {
fontSize: getFontXD(48),
color: R.colors.black,
fontWeight: '700',
},
txt: {
fontSize: getFontXD(36),
color: '#363636',
},
txtDate: {
fontSize: getFontXD(39),
color: '#363636',
fontStyle: 'italic',
},
rowBet: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
});
src/Screens/Menu/BonusTeam/BonusTeam.js 0 → 100644
import React from 'react';
import {View, Text} from 'react-native';
const BonusTeam = (props) => {
return (
<View>
<Text>BonusTeam screen</Text>
</View>
);
};
export default BonusTeam;
src/Screens/Menu/MyGroup/MyGroup.js 0 → 100644
import React from 'react';
import {View, Text} from 'react-native';
const MyGroup = (props) => {
return (
<View>
<Text>MyGroup screen</Text>
</View>
);
};
export default MyGroup;
src/Screens/Menu/Payments/Payments.js 0 → 100644
import React from 'react';
import {View, Text} from 'react-native';
const Payments = (props) => {
return (
<View>
<Text>Payments screen</Text>
</View>
);
};
export default Payments;
src/Screens/Menu/Rose/Rose.js 0 → 100644
import React from 'react';
import {View, Text} from 'react-native';
const Rose = (props) => {
return (
<View>
<Text>Rose screen</Text>
</View>
);
};
export default Rose;
src/Screens/Menu/UserInfor/UserInfor.js 0 → 100644
import React from 'react';
import {View, Text} from 'react-native';
const UserInfor = (props) => {
return (
<View>
<Text>UserInfor screen</Text>
</View>
);
};
export default UserInfor;
src/Screens/Notification/Item.js 0 → 100644
import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity, Image} from 'react-native';
import {getFontXD, HEIGHTXD, WIDTHXD, toPriceVnd} from '../../Config/Functions';
import R from '../../assets/R';
import Block from '../../components/Block';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
const Item = (props) => {
const {item} = props;
return (
<TouchableOpacity onPress={() => console.log('HEllo')}>
<View style={styles.container}>
<Block flex={1} row>
<View style={styles.wrapLeft} />
<View style={styles.wrapDate}>
<Image source={R.images.iconDepositNoti} style={styles.imgIcon} />
</View>
<Block padding={[5, 10]} space={'between'} flex={1}>
<View style={{justifyContent: 'center', flex: 1}}>
<Text style={styles.txtBlack}>{item.content}</Text>
</View>
<Text style={styles.txt}>Ngày {item.time}</Text>
</Block>
</Block>
</View>
</TouchableOpacity>
);
};
export default Item;
const styles = StyleSheet.create({
container: {
marginTop: 10,
height: HEIGHTXD(250),
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
marginHorizontal: 10,
backgroundColor: R.colors.white,
marginBottom: 10,
borderRadius: HEIGHTXD(30),
},
wrapLeft: {
width: WIDTHXD(16),
borderTopLeftRadius: HEIGHTXD(30),
borderBottomStartRadius: HEIGHTXD(30),
},
wrapDate: {
justifyContent: 'center',
paddingHorizontal: 10,
},
txtTitle: {
fontSize: getFontXD(42),
color: R.colors.black,
fontWeight: 'bold',
},
txt: {
fontSize: getFontXD(39),
color: '#929292',
fontStyle: 'italic',
},
rowBet: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
txtBlack: {
fontSize: getFontXD(42),
color: 'black',
},
imgIcon: {
width: WIDTHXD(178),
height: HEIGHTXD(178),
resizeMode: 'contain',
},
});
src/Screens/Notification/NotificaitonView.js
import React from 'react'; import React from 'react';
import {View, Text} from 'react-native'; import {View, Text, FlatList} from 'react-native';
import HeaderSearch from '../../components/Header/HeaderSearch';
import Item from './Item';
const data = [
{
id: '1',
time: '20/02/2021',
content: 'Yêu cầu nạp tiền của bạn đã đươc xác nhận',
},
{
id: '2',
time: '20/02/2021',
content: 'Yêu cầu nạp tiền của bạn đã đươc xác nhận',
},
{
id: '3',
time: '20/02/2021',
content: 'Yêu cầu nạp tiền của bạn đã đươc xác nhận',
},
{
id: '4',
time: '20/02/2021',
content: 'Yêu cầu nạp tiền của bạn đã đươc xác nhận',
},
];
const NotificaitonView = (props) => { const NotificaitonView = (props) => {
return ( return (
<View> <View style={{flex: 1}}>
<Text>NotificaitonView screen</Text> <HeaderSearch isWhite={false} title={'Thông báo'} />
<FlatList
keyExtractor={(item) => item.id}
data={data}
renderItem={({item}) => <Item item={item} />}
/>
</View> </View>
); );
}; };
......
src/assets/colors.js
...@@ -36,7 +36,7 @@ const colors = { ...@@ -36,7 +36,7 @@ const colors = {
primary: '#0AC4BA', primary: '#0AC4BA',
secondary: '#00b33c', secondary: '#00b33c',
tertiary: '#FFE358', tertiary: '#FFE358',
black: '#000000', black: '#363636',
white: '#FFFFFF', white: '#FFFFFF',
gray: '#9DA3B4', gray: '#9DA3B4',
gray3: '#C5CCD6', gray3: '#C5CCD6',
......
src/assets/images.js
...@@ -27,6 +27,8 @@ const images = { ...@@ -27,6 +27,8 @@ const images = {
iconSetting: require('./images/iconSetting.png'), iconSetting: require('./images/iconSetting.png'),
iconMess: require('./images/iconMess.png'), iconMess: require('./images/iconMess.png'),
iconMethodPay: require('./images/iconMethodPay.png'), iconMethodPay: require('./images/iconMethodPay.png'),
iconDepositNoti: require('./images/iconDeposit.png'),
}; };
export default images; export default images;
src/components/Header/HeaderHome.js
...@@ -15,7 +15,12 @@ import {getFontXD, HEIGHT, WIDTHXD} from '../../Config/Functions'; ...@@ -15,7 +15,12 @@ import {getFontXD, HEIGHT, WIDTHXD} from '../../Config/Functions';
import LinearGradient from 'react-native-linear-gradient'; import LinearGradient from 'react-native-linear-gradient';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {HEIGHTXD, toPriceVnd} from '../../Config/Functions'; import {HEIGHTXD, toPriceVnd} from '../../Config/Functions';
import {useNavigation} from '@react-navigation/native';
import {WITHDRAW, DEPOSIT, TRANSFER, HISTORY} from '../../routers/ScreenNames';
const HeaderHome = (props) => { const HeaderHome = (props) => {
const navigate = useNavigation();
return ( return (
<View style={styles.container}> <View style={styles.container}>
<ImageBackground style={styles.img} source={R.images.headerHome}> <ImageBackground style={styles.img} source={R.images.headerHome}>
...@@ -35,26 +40,26 @@ const HeaderHome = (props) => { ...@@ -35,26 +40,26 @@ const HeaderHome = (props) => {
</View> </View>
<View style={styles.containerMenu}> <View style={styles.containerMenu}>
<TouchableOpacity <TouchableOpacity
onPress={() => console.log('hello')} onPress={() => navigate.navigate(DEPOSIT)}
style={styles.wraper}> style={styles.wraper}>
<Image style={styles.imgIcon} source={R.images.iconDeposit} /> <Image style={styles.imgIcon} source={R.images.iconDeposit} />
<Text style={styles.txt}>Nạp tiền</Text> <Text style={styles.txt}>Nạp tiền</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
onPress={() => console.log('hello')} onPress={() => navigate.navigate(WITHDRAW)}
style={styles.wraper}> style={styles.wraper}>
<Image style={styles.imgIcon} source={R.images.iconWithdraw} /> <Image style={styles.imgIcon} source={R.images.iconWithdraw} />
<Text style={styles.txt}>Rút tiền</Text> <Text style={styles.txt}>Rút tiền</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
onPress={() => console.log('hello')} onPress={() => navigate.navigate(TRANSFER)}
style={styles.wraper}> style={styles.wraper}>
<Image style={styles.imgIcon} source={R.images.iconTransfer} /> <Image style={styles.imgIcon} source={R.images.iconTransfer} />
<Text style={styles.txt}>Chuyển khoản</Text> <Text style={styles.txt}>Chuyển khoản</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
onPress={() => console.log('hello')} onPress={() => navigate.navigate(HISTORY)}
style={styles.wraper}> style={styles.wraper}>
<Image style={styles.imgIcon} source={R.images.iconHistory} /> <Image style={styles.imgIcon} source={R.images.iconHistory} />
<Text style={styles.txt}>Lịch sử</Text> <Text style={styles.txt}>Lịch sử</Text>
......
src/components/Header/HeaderSearch.js 0 → 100644
import React, {useState} from 'react';
import {
View,
Text,
Image,
StatusBar,
StyleSheet,
SafeAreaView,
ImageBackground,
TouchableOpacity,
Platform,
Button,
TouchableWithoutFeedback,
TextInput,
} from 'react-native';
import R from '../../assets/R';
import {getFontXD, HEIGHT, WIDTHXD} from '../../Config/Functions';
import LinearGradient from 'react-native-linear-gradient';
import {connect} from 'react-redux';
import {HEIGHTXD} from '../../Config/Functions';
import Modal from 'react-native-modal';
import Drawer from './Drawer';
import Icon from 'react-native-vector-icons/Ionicons';
const HeaderSearch = (props) => {
const {title, isWhite} = props;
const [isModalVisible, setModalVisible] = useState(false);
const [openSearch, setOpenSearch] = useState(false);
const [txtSearch, setTxtSearch] = useState('');
const toggleSearch = () => {
setTxtSearch('');
setOpenSearch(!openSearch);
};
const toggleModal = () => {
setModalVisible(!isModalVisible);
};
return (
<ImageBackground
style={[styles.img, isWhite ? {backgroundColor: 'white'} : {}]}
source={R.images.bgHeader}>
<StatusBar backgroundColor="transparent" translucent={true} />
<View style={styles.headerContainer}>
<TouchableOpacity onPress={toggleModal}>
<Image source={R.images.iconMenu} style={styles.imgIcon} />
</TouchableOpacity>
{openSearch ? (
<TextInput
style={styles.txtInput}
onChangeText={(val) => setTxtSearch(val)}
value={txtSearch}
/>
) : (
<Text style={styles.txtTitle}>{title ? title : ''} </Text>
)}
<TouchableOpacity onPress={toggleSearch}>
{openSearch ? (
<Icon name={'refresh-outline'} size={28} color={R.colors.white} />
) : (
<Icon name={'search-sharp'} size={28} color={R.colors.white} />
)}
</TouchableOpacity>
</View>
<Modal
animationIn={'fadeInLeft'}
animationOut={'fadeOutLeft'}
isVisible={isModalVisible}
backdropOpacity={0.5}>
<View
style={[
{flex: 1, flexDirection: 'row'},
Platform.OS == 'ios' ? {paddingVertical: 15} : {},
]}>
<View style={styles.container}>
<Drawer toggleModal={toggleModal} />
</View>
<TouchableWithoutFeedback onPress={toggleModal}>
<View
style={{
flex: 1,
}}></View>
</TouchableWithoutFeedback>
</View>
</Modal>
</ImageBackground>
);
};
const mapStateToProps = (state) => {
return {
user: state.userReducer,
};
};
export default connect(mapStateToProps, {})(HeaderSearch);
const styles = StyleSheet.create({
img: {
height: Platform.OS == 'ios' ? HEIGHTXD(330) : HEIGHTXD(400),
width: '100%',
justifyContent: 'center',
alignItems: 'center',
},
headerContainer: {
height: 55,
width: '100%',
alignItems: 'center',
flexDirection: 'row',
paddingHorizontal: 20,
justifyContent: 'space-between',
},
imgIcon: {
width: 25,
height: 20,
},
txtTitle: {
fontSize: getFontXD(52),
color: R.colors.white,
fontWeight: 'bold',
},
container: {
backgroundColor: 'white',
height: '100%',
width: 300,
borderRadius: 20,
},
txtInput: {
backgroundColor: R.colors.white,
flex: 1,
padding: 2,
height: HEIGHTXD(100),
fontSize: getFontXD(42),
borderRadius: 10,
marginHorizontal: 10,
paddingHorizontal: 10,
},
btnIcon: {
backgroundColor: R.colors.lightBlue2,
padding: 5,
},
});
src/routers/PlussModal.js
import React, {Component, useState} from 'react'; import React, {Component, useState} from 'react';
import {View, Text, TouchableOpacity, StyleSheet, Button} from 'react-native'; import {
View,
Text,
TouchableOpacity,
StyleSheet,
Button,
TouchableWithoutFeedback,
Image,
} from 'react-native';
import Icon from 'react-native-vector-icons/Entypo'; import Icon from 'react-native-vector-icons/Entypo';
import R from '../assets/R'; import R from '../assets/R';
import {WIDTHXD} from '../Config/Functions'; import {HEIGHTXD, WIDTHXD, getFontXD} from '../Config/Functions';
import Modal from 'react-native-modal'; import Modal from 'react-native-modal';
import {useNavigation} from '@react-navigation/native';
import {WITHDRAW, DEPOSIT, TRANSFER} from '../routers/ScreenNames';
const PlussModal = (props) => { const PlussModal = (props) => {
const [isModalVisible, setModalVisible] = useState(false); const [isModalVisible, setModalVisible] = useState(false);
const navigate = useNavigation();
const toggleModal = () => { const toggleModal = () => {
setModalVisible(!isModalVisible); setModalVisible(!isModalVisible);
}; };
...@@ -20,11 +33,41 @@ const PlussModal = (props) => { ...@@ -20,11 +33,41 @@ const PlussModal = (props) => {
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<Modal isVisible={isModalVisible}> <Modal style={{margin: 0}} isVisible={isModalVisible}>
<View style={{flex: 1}}> <View style={{flex: 1}}>
<Text>Hello!</Text> <TouchableWithoutFeedback onPress={toggleModal}>
<View style={{flex: 1}}></View>
</TouchableWithoutFeedback>
<View style={styles.footer}>
<TouchableOpacity
onPress={() => {
navigate.navigate(DEPOSIT);
toggleModal();
}}
style={styles.wraper1}>
<Image style={styles.imgIcon} source={R.images.iconDeposit} />
<Text style={styles.txt}>Nạp tiền</Text>
</TouchableOpacity>
<Button title="Hide modal" onPress={toggleModal} /> <TouchableOpacity
onPress={() => {
navigate.navigate(WITHDRAW);
toggleModal();
}}
style={styles.wraper1}>
<Image style={styles.imgIcon} source={R.images.iconWithdraw} />
<Text style={styles.txt}>Rút tiền</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
navigate.navigate(TRANSFER);
toggleModal();
}}
style={styles.wraper1}>
<Image style={styles.imgIcon} source={R.images.iconTransfer} />
<Text style={styles.txt}>Chuyển khoản</Text>
</TouchableOpacity>
</View>
</View> </View>
</Modal> </Modal>
</View> </View>
...@@ -64,4 +107,27 @@ const styles = StyleSheet.create({ ...@@ -64,4 +107,27 @@ const styles = StyleSheet.create({
left: 15, left: 15,
borderRadius: WIDTHXD(90), borderRadius: WIDTHXD(90),
}, },
footer: {
backgroundColor: 'white',
height: HEIGHTXD(400),
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
justifyContent: 'space-around',
alignItems: 'center',
flexDirection: 'row',
},
imgIcon: {
width: WIDTHXD(150),
height: HEIGHTXD(150),
resizeMode: 'contain',
},
wraper1: {
justifyContent: 'center',
alignItems: 'center',
},
txt: {
fontSize: getFontXD(36),
color: R.colors.txtMain,
marginTop: 5,
},
}); });
src/routers/ScreenNames.js
...@@ -21,3 +21,13 @@ export const METHODPAY = 'METHODPAY'; ...@@ -21,3 +21,13 @@ export const METHODPAY = 'METHODPAY';
export const SERVICECUSTOMER = 'SERVICECUSTOMER'; export const SERVICECUSTOMER = 'SERVICECUSTOMER';
export const SETTING = 'SETTING'; export const SETTING = 'SETTING';
//
export const USERINFOR = 'USERINFOR';
export const PAYMENTS = 'PAYMENTS';
export const ROSE = 'ROSE';
export const BONUSTEAM = 'BONUSTEAM';
export const MYGROUP = 'MYGROUP';
export const DEPOSIT = 'DEPOSIT';
export const TRANSFER = 'TRANSFER';
export const HISTORY = 'HISTORY';
src/routers/StackNavigation.js
...@@ -12,6 +12,17 @@ import MethodPay from '../Screens/MethodPay/MethodPay'; ...@@ -12,6 +12,17 @@ import MethodPay from '../Screens/MethodPay/MethodPay';
import ServiceCustomer from '../Screens/ServiceCustomer/ServiceCustomer'; import ServiceCustomer from '../Screens/ServiceCustomer/ServiceCustomer';
import Setting from '../Screens/Setting/Setting'; import Setting from '../Screens/Setting/Setting';
import BonusTeam from '../Screens/Menu/BonusTeam/BonusTeam';
import MyGroup from '../Screens/Menu/MyGroup/MyGroup';
import Payments from '../Screens/Menu/Payments/Payments';
import Rose from '../Screens/Menu/Rose/Rose';
import UserInfor from '../Screens/Menu/UserInfor/UserInfor';
import Withdraw from '../Screens/Action/Withdraw/Withdraw';
import Transfer from '../Screens/Action/Transfer/Transfer';
import Deposit from '../Screens/Action/Deposit/Deposit';
import History from '../Screens/Action/History/History';
import * as ScreenName from './ScreenNames'; import * as ScreenName from './ScreenNames';
const Stack = createStackNavigator(); const Stack = createStackNavigator();
...@@ -23,7 +34,6 @@ function MyStack(props) { ...@@ -23,7 +34,6 @@ function MyStack(props) {
initialRouteName={ScreenName.TABNAVIGATOR}> initialRouteName={ScreenName.TABNAVIGATOR}>
<Stack.Screen name={ScreenName.LOGINSCREEN} component={Login} /> <Stack.Screen name={ScreenName.LOGINSCREEN} component={Login} />
<Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} /> <Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} />
<Stack.Screen <Stack.Screen
name={ScreenName.AccountVerification} name={ScreenName.AccountVerification}
component={AccountVerificaiton} component={AccountVerificaiton}
...@@ -34,7 +44,17 @@ function MyStack(props) { ...@@ -34,7 +44,17 @@ function MyStack(props) {
name={ScreenName.SERVICECUSTOMER} name={ScreenName.SERVICECUSTOMER}
component={ServiceCustomer} component={ServiceCustomer}
/> />
<Stack.Screen name={ScreenName.BONUSTEAM} component={BonusTeam} />
<Stack.Screen name={ScreenName.MYGROUP} component={MyGroup} />
<Stack.Screen name={ScreenName.PAYMENTS} component={Payments} />
<Stack.Screen name={ScreenName.ROSE} component={Rose} />
<Stack.Screen name={ScreenName.USERINFOR} component={UserInfor} />
<Stack.Screen name={ScreenName.SETTING} component={Setting} /> <Stack.Screen name={ScreenName.SETTING} component={Setting} />
<Stack.Screen name={ScreenName.WITHDRAW} component={Withdraw} />
<Stack.Screen name={ScreenName.DEPOSIT} component={Deposit} />
<Stack.Screen name={ScreenName.TRANSFER} component={Transfer} />
<Stack.Screen name={ScreenName.HISTORY} component={History} />
</Stack.Navigator> </Stack.Navigator>
); );
} }
......
src/routers/TabNavigation.js
...@@ -17,12 +17,6 @@ const PayScreenComponent = () => { ...@@ -17,12 +17,6 @@ const PayScreenComponent = () => {
return null; return null;
}; };
{
/* <ImageBackground style={styles.img} source={R.images.headerHome}>
<StatusBar backgroundColor="transparent" translucent={true} />
</ImageBackground> */
}
const TabNavigator = (props) => { const TabNavigator = (props) => {
return ( return (
<View style={{flex: 1}}> <View style={{flex: 1}}>
......
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