Skip to content

A
AppUms_Student
Commit 03cfc11f by tungnq
Options

TODO: Đã tối ưu hoá lại phần màn hình home và thêm chức năng tìm kiếm cho màn hình home

parent 9fe8ccd6
Showing with 248 additions and 204 deletions
src/assets/fonts.js
...@@ -4,3 +4,4 @@ const fonts = { ...@@ -4,3 +4,4 @@ const fonts = {
InterSemiBold:'Inter_18pt-SemiBold', InterSemiBold:'Inter_18pt-SemiBold',
}; };
export default fonts; export default fonts;
src/screens/home/header.js
import { Image, SafeAreaView, StatusBar, StyleSheet, TextInput, View } from "react-native"; import {
import React from "react"; Image,
import R from "../../assets/R"; SafeAreaView,
const customHeader = (props) => { StatusBar,
StyleSheet,
TextInput,
View,
} from 'react-native';
import React from 'react';
import R from '../../assets/R';
import styles from './style';
const customHeader = props => {
const { const {
pathLogo, pathLogo,
width, width,
...@@ -13,24 +21,17 @@ const customHeader = (props) => { ...@@ -13,24 +21,17 @@ const customHeader = (props) => {
} = props; } = props;
const SearchIcon = R.images.icSearch; const SearchIcon = R.images.icSearch;
return ( return (
<View style={[styles.container_header, styles.spacing_header]}>
<View style={[styles.container ,{justifyContent: 'center',marginTop:20}]}> <Image source={pathLogo} style={{width: width, height: height}} />
<Image
source={pathLogo}
style={{ width: width, height: height }}
/>
<View style={styles.size_box}></View> <View style={styles.size_box}></View>
<View <View style={styles.search_box}>
style={styles.search_box}
>
<SearchIcon <SearchIcon
width={25} width={20}
height={25} height={20}
stroke={R.colors.white} stroke={R.colors.white}
stroke-width={2} stroke-width={2}
/> />
<View style={styles.size_box_2}></View> <View style={styles.size_box_2}></View>
<TextInput <TextInput
value={value} value={value}
onChangeText={onChangeText} onChangeText={onChangeText}
...@@ -44,37 +45,3 @@ const customHeader = (props) => { ...@@ -44,37 +45,3 @@ const customHeader = (props) => {
}; };
export default customHeader; export default customHeader;
const styles = StyleSheet.create({
container: {
flexDirection: "row",
marginHorizontal: 15,
},
size_box:{
width: '20%',
},
size_box_2:{
width: '2.5%',
},
search_box: {
flex: 3,
flexDirection: "row",
backgroundColor: R.colors.black250,
alignItems: "center",
borderColor: R.colors.gray280,
borderRadius: 100,
borderWidth: 1,
maxHeight:40,
paddingHorizontal: 14,
paddingVertical: 5
},
input: {
fontSize: R.fontsize.fontsSize12,
color: R.colors.white,
margin:0,
padding:0,
fontFamily: R.fonts.InterRegular,
fontWeight: '400',
},
});
src/screens/home/index.js
...@@ -72,17 +72,25 @@ const Home = (props) => { ...@@ -72,17 +72,25 @@ const Home = (props) => {
const handleSearchChange = (text) => { const handleSearchChange = (text) => {
setSearchText(text); setSearchText(text);
}; };
const handleNavigationProfile = () => {
navigation.navigate(SCREENNAME.PROFILE);
};
const filterMenuData = (menuData) =>{
return menuData.filter(item => item.title.toLowerCase().includes(searchText.toLowerCase()));
}
return ( return (
<Homeview <Homeview
menuDataStudy={menuDataStudy} menuDataStudy={filterMenuData(menuDataStudy) || menuDataStudy}
menuDataIndividual={menuDataIndividual} menuDataIndividual={filterMenuData(menuDataIndividual) || menuDataIndividual}
menuDataOnlineSer={menuDataOnlineSer} menuDataOnlineSer={filterMenuData(menuDataOnlineSer) || menuDataOnlineSer}
selectedMenuItem={selectedMenuItem} selectedMenuItem={selectedMenuItem}
searchText={searchText} searchText={searchText}
userProfile={userProfile} userProfile={userProfile}
onMenuItemPress={handleMenuItemPress} onMenuItemPress={handleMenuItemPress}
onSearchChange={handleSearchChange} onSearchChange={handleSearchChange}
onNavigationProfile={handleNavigationProfile}
/> />
); );
}; };
......
src/screens/home/item.js
import React from "react"; import React from "react";
import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native"; import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native";
import R from "../../assets/R"; import styles from "./style";
const ItemGrid = ({ item ,onPress }) => { const ItemGrid = ({ item ,onPress }) => {
const IconComponent = item.icon; const IconComponent = item.icon;
return ( return (
...@@ -21,27 +21,3 @@ const ItemGrid = ({ item ,onPress }) => { ...@@ -21,27 +21,3 @@ const ItemGrid = ({ item ,onPress }) => {
export default ItemGrid; export default ItemGrid;
const styles = StyleSheet.create({
menu_item: {
alignItems: "center",
paddingVertical: 10,
paddingHorizontal: 5,
marginHorizontal: 5,
marginVertical: 5,
flex: 1,
maxWidth: "30%",
minHeight:"30%"
},
icon_container: {
width: 35,
height: 35,
backgroundColor:R.colors.white,
},
menu_text: {
fontSize: R.fontsize.fontsSize12,
fontWeight: "600",
color: R.colors.black,
fontFamily: R.fonts.InterMedium,
textAlign: "center",
},
});
src/screens/home/style.js
import { StyleSheet } from "react-native"; import {StyleSheet} from 'react-native';
import R from "../../assets/R"; import R from '../../assets/R';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container_body: { container_header: {
flex: 1, flexDirection: 'row',
backgroundColor: R.colors.white, marginHorizontal: 15,
}, },
background_header: { spacing_header: {
height: 295, justifyContent: 'center',
position: 'relative', marginTop: 20,
}, },
profile_card: { size_box: {
position: 'absolute', width: '20%',
bottom: -30, },
flexDirection: "row", size_box_2: {
alignItems: "center", width: '2.5%',
backgroundColor: R.colors.white, },
paddingVertical: 10, search_box: {
paddingHorizontal: 15, flex: 3,
marginHorizontal: 15, flexDirection: 'row',
borderRadius: 15, backgroundColor: R.colors.black250,
shadowColor: R.colors.black, alignItems: 'center',
shadowOffset: { width: 0, height: 2 }, borderColor: R.colors.gray280,
shadowOpacity: 0.22, borderRadius: 100,
shadowRadius: 2.22, height:35,
elevation: 3, paddingHorizontal: 10,
}, paddingVertical: 5,
profile_left: { },
flexDirection: "row",
alignItems: "center", input: {
flex: 3, fontSize: R.fontsize.fontsSize12,
}, color: R.colors.white,
margin: 0,
avatar: { padding: 0,
width: 37, fontFamily: R.fonts.InterRegular,
height: 37, fontWeight: '400',
borderRadius: 20, },
backgroundColor: R.colors.white, /* -------------------------------------------------------------------------- */
overflow: 'hidden', /* Body */
}, /* -------------------------------------------------------------------------- */
avatar_image: { container_body: {
width: '100%', flex: 1,
height: '100%', backgroundColor: R.colors.white,
}, },
avatar_placeholder: { background_header: {
width: '100%', height: 295,
height: '100%', position: 'relative',
justifyContent: 'center', },
alignItems: 'center', profile_card: {
backgroundColor: R.colors.grey, position: 'absolute',
}, bottom: -30,
avatar_text: { flexDirection: 'row',
fontSize: R.fontsize.fontsSize16, alignItems: 'center',
fontWeight: '600', backgroundColor: R.colors.white,
color: R.colors.white, paddingVertical: 10,
fontFamily: R.fonts.InterSemiBold, paddingHorizontal: 15,
}, marginHorizontal: 15,
information: { borderRadius: 15,
flex: 2, shadowColor: R.colors.black,
marginLeft: 5, shadowOffset: {width: 0, height: 2},
}, shadowOpacity: 0.22,
text_card_info: { shadowRadius: 2.22,
fontSize: R.fontsize.fontsSize12, elevation: 3,
fontWeight: "400", },
color: R.colors.black, profile_left: {
fontFamily: R.fonts.InterRegular, flexDirection: 'row',
numberOfLines: 1, alignItems: 'center',
ellipsizeMode: "tail", flex: 3,
}, },
profile_btn: {
paddingVertical: 5, avatar: {
paddingHorizontal: 10, width: 37,
backgroundColor: R.colors.gray220, height: 37,
minHeight: 21, borderRadius: 20,
maxWidth: 108, backgroundColor: R.colors.white,
borderRadius: 15, overflow: 'hidden',
flexDirection: "row", },
justifyContent: 'center', avatar_image: {
alignItems: 'center', width: '100%',
}, height: '100%',
btn_text: { },
fontSize: R.fontsize.fontsSize10, avatar_placeholder: {
fontWeight: "400", width: '100%',
color: R.colors.black, height: '100%',
fontFamily: R.fonts.InterRegular, justifyContent: 'center',
alignItems: 'center',
}, backgroundColor: R.colors.blue500,
icon: { },
marginLeft: 5, avatar_text: {
}, fontSize: R.fontsize.fontsSize16,
menu_container: { fontWeight: '600',
marginHorizontal: 15, color: R.colors.white,
}, fontFamily: R.fonts.InterSemiBold,
menu_title: { },
color: R.colors.txtMain, information: {
fontSize: R.fontsize.fontsSize14, flex: 2,
fontWeight: "600", marginLeft: 5,
color: R.colors.black, },
fontFamily: R.fonts.InterMedium, text_card_info: {
}, fontSize: R.fontsize.fontsSize12,
scroll: { fontWeight: '600',
flex: 1, color: R.colors.black,
marginTop: 35, fontFamily: R.fonts.InterMedium,
} numberOfLines: 1,
}); ellipsizeMode: 'tail',
export default styles; },
\ No newline at end of file profile_btn: {
paddingVertical: 5,
paddingHorizontal: 10,
backgroundColor: R.colors.gray220,
minHeight: 21,
maxWidth: 108,
borderRadius: 15,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
btn_text: {
fontSize: R.fontsize.fontsSize10,
fontWeight: '400',
color: R.colors.black,
fontFamily: R.fonts.InterRegular,
},
icon: {
marginLeft: 5,
},
menu_container: {
marginHorizontal: 15,
},
menu_title: {
color: R.colors.txtMain,
fontSize: R.fontsize.fontsSize14,
fontWeight: '600',
color: R.colors.black,
fontFamily: R.fonts.InterMedium,
},
scroll: {
flex: 1,
marginTop: 35,
},
/* ---------------------------------- ITEM ---------------------------------- */
menu_item: {
alignItems: 'center',
paddingVertical: 10,
paddingHorizontal: 5,
marginHorizontal: 5,
marginVertical: 5,
flex: 1,
maxWidth: '30%',
minHeight: '30%',
},
icon_container: {
width: 35,
height: 35,
backgroundColor: R.colors.white,
},
menu_text: {
fontSize: R.fontsize.fontsSize12,
fontWeight: '600',
color: R.colors.black,
fontFamily: R.fonts.InterMedium,
textAlign: 'center',
},
});
export default styles;
src/screens/home/view.js
...@@ -20,6 +20,7 @@ import ItemGrid from './item'; ...@@ -20,6 +20,7 @@ import ItemGrid from './item';
import styles from './style'; import styles from './style';
import {useNavigation} from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
import * as SCREENNAME from '../../routers/ScreenNames'; import * as SCREENNAME from '../../routers/ScreenNames';
import TextSearchView from '../../components/Input/TextSearch/TextSearch';
const HomeView = props => { const HomeView = props => {
const { const {
...@@ -31,6 +32,7 @@ const HomeView = props => { ...@@ -31,6 +32,7 @@ const HomeView = props => {
userProfile, userProfile,
onMenuItemPress, onMenuItemPress,
onSearchChange, onSearchChange,
onNavigationProfile,
} = props; } = props;
const ArrowRightIcon = R.images.icArrowRight; const ArrowRightIcon = R.images.icArrowRight;
...@@ -80,8 +82,7 @@ const HomeView = props => { ...@@ -80,8 +82,7 @@ const HomeView = props => {
<TouchableOpacity <TouchableOpacity
style={styles.profile_btn} style={styles.profile_btn}
onPress={() => navigate.navigate(SCREENNAME.PROFILE)} onPress={() => onNavigationProfile()}>
activeOpacity={0.7}>
<Text style={styles.btn_text}>Hồ sở cá nhân</Text> <Text style={styles.btn_text}>Hồ sở cá nhân</Text>
<ArrowRightIcon <ArrowRightIcon
width={5} width={5}
...@@ -110,28 +111,36 @@ const HomeView = props => { ...@@ -110,28 +111,36 @@ const HomeView = props => {
</View> </View>
); );
return ( const renderBodyView1 = () => {
<SafeAreaView style={styles.container_body}> return (
<StatusBar barStyle="light-content" translucent={false} /> <>
<ImageBackground
source={R.images.igBackgroundSlider}
style={[styles.background_header]}>
<HeaderCus
pathLogo={R.images.igLogo}
width={75}
height={36}
textInput={R.colors.white}
backgroundInput={R.colors.backgroundInputSearch}
textLabel={I18n.t('Search')}
textColorLabel={R.colors.white}
value={searchText}
onChangeText={onSearchChange}
/>
{renderProfileCard()}
</ImageBackground>
</>
);
};
const renderBody = () => {
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}> <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<View style={[{flex: 1}]}> <View style={[{flex: 1}]}>
<View style={styles.container_body}> <View style={styles.container_body}>
<ImageBackground {renderBodyView1()}
source={R.images.igBackgroundSlider}
style={[styles.background_header]}>
<HeaderCus
pathLogo={R.images.igLogo}
width={75}
height={36}
textInput={R.colors.white}
backgroundInput={R.colors.backgroundInputSearch}
textLabel={I18n.t('Search')}
textColorLabel={R.colors.white}
/>
{renderProfileCard()}
</ImageBackground>
<ScrollView <ScrollView
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
...@@ -145,6 +154,13 @@ const HomeView = props => { ...@@ -145,6 +154,13 @@ const HomeView = props => {
</View> </View>
</View> </View>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
);
};
return (
<SafeAreaView style={styles.container_body}>
<StatusBar barStyle="light-content" translucent={false} />
{renderBody()}
</SafeAreaView> </SafeAreaView>
); );
}; };
......
src/screens/training_program/style.js 0 → 100644
import { StyleSheet, Dimensions } from 'react-native'
const { width, height } = Dimensions.get('window')
const styles = StyleSheet.create({
container:{
flex: 1,
backgroundColor:'white'
},
body:{
flex: 1,
marginHorizontal: 15
}
})
export default styles
\ No newline at end of file
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