Skip to content

I
InvestCustomer
Commit bbe2f7ac by Giang Tran
Options

custom drawer

parent b3dca354
Showing with 123 additions and 56 deletions
src/Screens/Account/AccountView.js
...@@ -43,7 +43,7 @@ export default AccountView; ...@@ -43,7 +43,7 @@ export default AccountView;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flexDirection: 'row', flexDirection: 'row',
paddingHorizontal: 20, paddingHorizontal: 30,
marginTop: 20, marginTop: 20,
justifyContent: 'space-between', justifyContent: 'space-between',
flexWrap: 'wrap', flexWrap: 'wrap',
...@@ -69,5 +69,6 @@ const styles = StyleSheet.create({ ...@@ -69,5 +69,6 @@ const styles = StyleSheet.create({
width: WIDTHXD(216), width: WIDTHXD(216),
height: HEIGHTXD(216), height: HEIGHTXD(216),
marginBottom: 10, marginBottom: 10,
resizeMode: 'contain',
}, },
}); });
src/components/Header/Drawer.js 0 → 100644
import React from 'react';
import {View, Text} from 'react-native';
const Drawer = (props) => {
return (
<View>
<Text>Drawer view</Text>
</View>
);
};
export default Drawer;
src/components/Header/HeaderDrawer.js
import React, {useEffect} from 'react'; import React, {useState} from 'react';
import { import {
View, View,
Text, Text,
...@@ -9,23 +9,56 @@ import { ...@@ -9,23 +9,56 @@ import {
ImageBackground, ImageBackground,
TouchableOpacity, TouchableOpacity,
Platform, Platform,
Button,
TouchableWithoutFeedback,
} from 'react-native'; } from 'react-native';
import R from '../../assets/R'; import R from '../../assets/R';
import {getFontXD, HEIGHT, WIDTHXD} from '../../Config/Functions'; 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} from '../../Config/Functions';
import Icon from 'react-native-vector-icons/AntDesign'; import Modal from 'react-native-modal';
import Drawer from './Drawer';
const HeaderHome = (props) => { const HeaderHome = (props) => {
const [isModalVisible, setModalVisible] = useState(false);
const toggleModal = () => {
setModalVisible(!isModalVisible);
};
return ( return (
<ImageBackground style={styles.img} source={R.images.bgHeader}> <ImageBackground style={styles.img} source={R.images.bgHeader}>
<StatusBar backgroundColor="transparent" translucent={true} /> <StatusBar backgroundColor="transparent" translucent={true} />
<View style={styles.headerContainer}> <View style={styles.headerContainer}>
<Image source={R.images.iconMenu} style={styles.imgIcon} /> <TouchableOpacity onPress={toggleModal}>
<Image source={R.images.iconMenu} style={styles.imgIcon} />
</TouchableOpacity>
<Text style={styles.txtTitle}>Tài khoản</Text> <Text style={styles.txtTitle}>Tài khoản</Text>
<View /> <View />
</View> </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 />
</View>
<TouchableWithoutFeedback onPress={toggleModal}>
<View
style={{
flex: 1,
}}></View>
</TouchableWithoutFeedback>
</View>
</Modal>
</ImageBackground> </ImageBackground>
); );
}; };
...@@ -64,4 +97,10 @@ const styles = StyleSheet.create({ ...@@ -64,4 +97,10 @@ const styles = StyleSheet.create({
color: R.colors.white, color: R.colors.white,
fontWeight: 'bold', fontWeight: 'bold',
}, },
container: {
backgroundColor: 'white',
height: '100%',
width: 300,
borderRadius: 20,
},
}); });
src/routers/TabNavigation.js
...@@ -25,60 +25,66 @@ const PayScreenComponent = () => { ...@@ -25,60 +25,66 @@ const PayScreenComponent = () => {
const TabNavigator = (props) => { const TabNavigator = (props) => {
return ( return (
<Tab.Navigator <View style={{flex: 1}}>
initialRouteName="Screen1" <Tab.Navigator
tabBarOptions={{activeTintColor: R.colors.main}}> initialRouteName="Screen1"
<Tab.Screen tabBarOptions={{activeTintColor: R.colors.main}}>
name="Screen1" <Tab.Screen
component={Home} name="Screen1"
options={{ component={Home}
tabBarLabel: 'Overview', options={{
tabBarIcon: ({color, size}) => ( tabBarLabel: 'Overview',
<Icon name="landmark" size={size} color={color} /> tabBarIcon: ({color, size}) => (
), <Icon name="landmark" size={size} color={color} />
}} ),
/> }}
/>
<Tab.Screen <Tab.Screen
name="Screen2" name="Screen2"
component={Account} component={Account}
options={{ options={{
tabBarLabel: 'Tài khoản', tabBarLabel: 'Tài khoản',
tabBarIcon: ({color, size}) => ( tabBarIcon: ({color, size}) => (
<Icon name="user-tie" size={size} color={color} /> <Icon name="user-tie" size={size} color={color} />
), ),
}} }}
/> />
<Tab.Screen <Tab.Screen
name="Pay" name="Pay"
component={PayScreenComponent} component={PayScreenComponent}
options={{ options={{
tabBarButton: () => <PlussModal />, tabBarButton: () => <PlussModal />,
}} }}
/> />
<Tab.Screen <Tab.Screen
name="Screen3" name="Screen3"
component={Exchange} component={Exchange}
options={{ options={{
tabBarLabel: 'Giao dịch', tabBarLabel: 'Giao dịch',
tabBarIcon: ({color, size}) => ( tabBarIcon: ({color, size}) => (
<Icon name="chart-line" size={size} color={color} /> <Icon name="chart-line" size={size} color={color} />
), ),
}} }}
/> />
<Tab.Screen <Tab.Screen
name="Screen4" name="Screen4"
component={Notification} component={Notification}
options={{ options={{
tabBarLabel: 'Thông báo', tabBarLabel: 'Thông báo',
tabBarIcon: ({color, size}) => ( tabBarIcon: ({color, size}) => (
<MaterialIcons name="notifications-on" size={size} color={color} /> <MaterialIcons
), name="notifications-on"
}} size={size}
/> color={color}
</Tab.Navigator> />
),
}}
/>
</Tab.Navigator>
</View>
); );
}; };
......
yarn.lock
...@@ -1207,6 +1207,14 @@ ...@@ -1207,6 +1207,14 @@
query-string "^6.13.6" query-string "^6.13.6"
react-is "^16.13.0" react-is "^16.13.0"
"@react-navigation/drawer@^5.12.4":
version "5.12.4"
resolved "https://registry.yarnpkg.com/@react-navigation/drawer/-/drawer-5.12.4.tgz#0e0f8e0f0b6b67b45ca276212a1c80b05dc3b008"
integrity sha512-0O6OCTgCVnThx0XFsHd/48i6FeV7vxNvJYxeucantcdCwQMWJb46cVMsYGFYt49VwE8VX4Yg/KMZXMPfPxn7Pg==
dependencies:
color "^3.1.3"
react-native-iphone-x-helper "^1.3.0"
"@react-navigation/native@^5.9.2": "@react-navigation/native@^5.9.2":
version "5.9.3" version "5.9.3"
resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-5.9.3.tgz#3859f439adc9a744b79a98fbc7606bdd459574d5" resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-5.9.3.tgz#3859f439adc9a744b79a98fbc7606bdd459574d5"
......
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