Commit b7b38036 by Giang Tran

setup header home

parent 8daa8ee8
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>IDEDidComputeMac32BitWarning</key>
<true/>
</dict>
</plist>
import React, {useEffect} from 'react'; import React, {useEffect} from 'react';
import {View, Text} from 'react-native'; import {View, Text, ImageBackground, StyleSheet, StatusBar} from 'react-native';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import StackNavigation from './routers/StackNavigation'; import StackNavigation from './routers/StackNavigation';
import Modal from 'react-native-modal'; import Modal from 'react-native-modal';
import {SkypeIndicator} from 'react-native-indicators'; import {SkypeIndicator} from 'react-native-indicators';
import {HEIGHT, HEIGHTXD} from './Config/Functions';
import R from './assets/R';
const RootView = (props) => { const RootView = (props) => {
return ( return (
<View style={{flex: 1}}> <View style={{flex: 1}}>
...@@ -21,5 +23,20 @@ const mapStateToProps = (state) => { ...@@ -21,5 +23,20 @@ const mapStateToProps = (state) => {
loadingModal: state.ModalLoadingReducer, loadingModal: state.ModalLoadingReducer,
}; };
}; };
const styles = StyleSheet.create({
container: {
height: HEIGHT(65),
paddingHorizontal: 10,
flexDirection: 'row',
paddingTop: 15,
backgroundColor: R.colors.red,
},
img: {
height: HEIGHTXD(788),
width: '100%',
justifyContent: 'center',
},
});
export default connect(mapStateToProps, {})(RootView); export default connect(mapStateToProps, {})(RootView);
import React from 'react';
import AccountView from './AccountView';
const Account = (props) => {
return <AccountView />;
};
export default Account;
import React from 'react';
import {View, Text} from 'react-native';
const AccountView = (props) => {
return (
<View>
<Text>Account screen</Text>
</View>
);
};
export default AccountView;
import React from 'react';
import ExchangeView from './ExchangeView';
const Exchange = (props) => {
return <ExchangeView />;
};
export default Exchange;
import React from 'react';
import {View, Text} from 'react-native';
const ExchangeView = (props) => {
return (
<View>
<Text>ExchangeView screen</Text>
</View>
);
};
export default ExchangeView;
import React from 'react'; import React from 'react';
import {View, Text} from 'react-native'; import {View, Text, ImageBackground, StyleSheet, StatusBar} from 'react-native';
import HeaderHome from '../../components/Header/HeaderHome';
const HomeView = props => { import {HEIGHT, HEIGHTXD} from '../../Config/Functions';
import R from '../../assets/R';
const HomeView = (props) => {
return ( return (
<View> <View>
<Text>Home screen</Text> <HeaderHome />
</View> </View>
); );
}; };
export default HomeView; export default HomeView;
const styles = StyleSheet.create({});
import React from 'react';
import {View, Text} from 'react-native';
const NotificaitonView = (props) => {
return (
<View>
<Text>NotificaitonView screen</Text>
</View>
);
};
export default NotificaitonView;
import React from 'react';
import NotificationView from './NotificaitonView';
const Notifcation = (props) => {
return <NotificationView />;
};
export default Notifcation;
...@@ -3,9 +3,10 @@ const images = { ...@@ -3,9 +3,10 @@ const images = {
avartar: require('./images/avatar.jpg'), avartar: require('./images/avatar.jpg'),
cmtnd: require('./images/cmntnd.jpg'), cmtnd: require('./images/cmntnd.jpg'),
sign: require('./images/sign.jpg'), sign: require('./images/sign.jpg'),
iconWithdraw:require('./images/withdraw.png'), iconWithdraw: require('./images/withdraw.png'),
iconDeposit:require('./images/deposit.png'), iconDeposit: require('./images/deposit.png'),
iconAddUser:require('./images/addUser.png'), iconAddUser: require('./images/addUser.png'),
headerHome: require('./images/Headerhome.png'),
}; };
export default images; export default images;
import React, {useEffect} from 'react'; import React, {useEffect} from 'react';
import {View, Text, Image, StatusBar, StyleSheet} from 'react-native'; import {
View,
Text,
Image,
StatusBar,
StyleSheet,
SafeAreaView,
ImageBackground,
} from 'react-native';
import R from '../../assets/R'; import R from '../../assets/R';
import {getFontXD, HEIGHT} from '../../config/Functions'; import {getFontXD, HEIGHT} from '../../Config/Functions';
import LinearGradient from 'react-native-linear-gradient'; import LinearGradient from 'react-native-linear-gradient';
import SnackBar from '../SnackBar' import {connect} from 'react-redux';
import { connect } from "react-redux"; import {HEIGHTXD} from '../../Config/Functions';
const HeaderHome = (props) => { const HeaderHome = (props) => {
const {fullname}=props.user
return ( return (
<LinearGradient <ImageBackground style={styles.img} source={R.images.headerHome}>
start={{x: 0, y: 0}} <StatusBar backgroundColor="transparent" translucent={true} />
end={{x: 0, y: 1}} </ImageBackground>
colors={['#0062E1', '#22AEFB']}>
<StatusBar barStyle="light-content" backgroundColor={'#0062E1'} />
<SnackBar />
<View style={styles.container}>
<Image source={R.images.avartar} style={styles.img} />
<View style={{marginLeft: 10}}>
<Text style={styles.txtTitle}>{fullname}</Text>
<Text style={styles.txt}>Nhân viên kinh doanh</Text>
</View>
</View>
</LinearGradient>
); );
}; };
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
return { return {
user: state.userReducer, user: state.userReducer,
...@@ -38,26 +29,18 @@ const mapStateToProps = (state) => { ...@@ -38,26 +29,18 @@ const mapStateToProps = (state) => {
export default connect(mapStateToProps, {})(HeaderHome); export default connect(mapStateToProps, {})(HeaderHome);
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
height: HEIGHT(65), height: HEIGHT(65),
paddingHorizontal: 10, paddingHorizontal: 10,
flexDirection: 'row', flexDirection: 'row',
paddingTop: 15, paddingTop: 15,
backgroundColor: R.colors.red,
}, },
txtTitle: {
marginTop:2,
fontSize: getFontXD(42),
color: R.colors.white,
fontWeight: 'bold',
},
txt: {fontSize: getFontXD(36), color: R.colors.white},
img: { img: {
width: 50, height: HEIGHTXD(788),
height: 50, width: '100%',
borderRadius: 50,
borderWidth: 1, justifyContent: 'center',
borderColor: R.colors.white,
}, },
}); });
...@@ -24,7 +24,6 @@ function MyStack(props) { ...@@ -24,7 +24,6 @@ function MyStack(props) {
export default function App() { export default function App() {
return ( return (
<Fragment> <Fragment>
<SafeAreaView />
<NavigationContainer independent={true}> <NavigationContainer independent={true}>
<MyStack /> <MyStack />
</NavigationContainer> </NavigationContainer>
......
...@@ -7,6 +7,9 @@ import Home from '../Screens/Home/Home'; ...@@ -7,6 +7,9 @@ import Home from '../Screens/Home/Home';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import R from '../assets/R'; import R from '../assets/R';
import PlussModal from './PlussModal'; import PlussModal from './PlussModal';
import Notification from '../Screens/Notification/Notification';
import Account from '../Screens/Account/Account';
import Exchange from '../Screens/Exchange/Exchange';
const Tab = createBottomTabNavigator(); const Tab = createBottomTabNavigator();
...@@ -14,6 +17,12 @@ const PayScreenComponent = () => { ...@@ -14,6 +17,12 @@ 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 (
<Tab.Navigator <Tab.Navigator
...@@ -32,7 +41,7 @@ const TabNavigator = (props) => { ...@@ -32,7 +41,7 @@ const TabNavigator = (props) => {
<Tab.Screen <Tab.Screen
name="Screen2" name="Screen2"
component={Home} component={Account}
options={{ options={{
tabBarLabel: 'Tài khoản', tabBarLabel: 'Tài khoản',
tabBarIcon: ({color, size}) => ( tabBarIcon: ({color, size}) => (
...@@ -51,7 +60,7 @@ const TabNavigator = (props) => { ...@@ -51,7 +60,7 @@ const TabNavigator = (props) => {
<Tab.Screen <Tab.Screen
name="Screen3" name="Screen3"
component={Home} component={Exchange}
options={{ options={{
tabBarLabel: 'Giao dịch', tabBarLabel: 'Giao dịch',
tabBarIcon: ({color, size}) => ( tabBarIcon: ({color, size}) => (
...@@ -61,7 +70,7 @@ const TabNavigator = (props) => { ...@@ -61,7 +70,7 @@ const TabNavigator = (props) => {
/> />
<Tab.Screen <Tab.Screen
name="Screen4" name="Screen4"
component={Home} component={Notification}
options={{ options={{
tabBarLabel: 'Thông báo', tabBarLabel: 'Thông báo',
tabBarIcon: ({color, size}) => ( tabBarIcon: ({color, size}) => (
......
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