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 = {
InterSemiBold:'Inter_18pt-SemiBold',
};
export default fonts;
src/screens/home/header.js
import { Image, SafeAreaView, StatusBar, StyleSheet, TextInput, View } from "react-native";
import React from "react";
import R from "../../assets/R";
const customHeader = (props) => {
import {
Image,
SafeAreaView,
StatusBar,
StyleSheet,
TextInput,
View,
} from 'react-native';
import React from 'react';
import R from '../../assets/R';
import styles from './style';
const customHeader = props => {
const {
pathLogo,
width,
......@@ -13,24 +21,17 @@ const customHeader = (props) => {
} = props;
const SearchIcon = R.images.icSearch;
return (
<View style={[styles.container ,{justifyContent: 'center',marginTop:20}]}>
<Image
source={pathLogo}
style={{ width: width, height: height }}
/>
<View style={[styles.container_header, styles.spacing_header]}>
<Image source={pathLogo} style={{width: width, height: height}} />
<View style={styles.size_box}></View>
<View
style={styles.search_box}
>
<View style={styles.search_box}>
<SearchIcon
width={25}
height={25}
width={20}
height={20}
stroke={R.colors.white}
stroke-width={2}
/>
<View style={styles.size_box_2}></View>
<TextInput
value={value}
onChangeText={onChangeText}
......@@ -44,37 +45,3 @@ const customHeader = (props) => {
};
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) => {
const handleSearchChange = (text) => {
setSearchText(text);
};
const handleNavigationProfile = () => {
navigation.navigate(SCREENNAME.PROFILE);
};
const filterMenuData = (menuData) =>{
return menuData.filter(item => item.title.toLowerCase().includes(searchText.toLowerCase()));
}
return (
<Homeview
menuDataStudy={menuDataStudy}
menuDataIndividual={menuDataIndividual}
menuDataOnlineSer={menuDataOnlineSer}
menuDataStudy={filterMenuData(menuDataStudy) || menuDataStudy}
menuDataIndividual={filterMenuData(menuDataIndividual) || menuDataIndividual}
menuDataOnlineSer={filterMenuData(menuDataOnlineSer) || menuDataOnlineSer}
selectedMenuItem={selectedMenuItem}
searchText={searchText}
userProfile={userProfile}
onMenuItemPress={handleMenuItemPress}
onSearchChange={handleSearchChange}
onNavigationProfile={handleNavigationProfile}
/>
);
};
......
src/screens/home/item.js
import React from "react";
import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native";
import R from "../../assets/R";
import styles from "./style";
const ItemGrid = ({ item ,onPress }) => {
const IconComponent = item.icon;
return (
......@@ -21,27 +21,3 @@ const ItemGrid = ({ item ,onPress }) => {
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 R from "../../assets/R";
import {StyleSheet} from 'react-native';
import R from '../../assets/R';
const styles = StyleSheet.create({
container_body: {
flex: 1,
backgroundColor: R.colors.white,
},
background_header: {
height: 295,
position: 'relative',
},
profile_card: {
position: 'absolute',
bottom: -30,
flexDirection: "row",
alignItems: "center",
backgroundColor: R.colors.white,
paddingVertical: 10,
paddingHorizontal: 15,
marginHorizontal: 15,
borderRadius: 15,
shadowColor: R.colors.black,
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.22,
shadowRadius: 2.22,
elevation: 3,
},
profile_left: {
flexDirection: "row",
alignItems: "center",
flex: 3,
},
avatar: {
width: 37,
height: 37,
borderRadius: 20,
backgroundColor: R.colors.white,
overflow: 'hidden',
},
avatar_image: {
width: '100%',
height: '100%',
},
avatar_placeholder: {
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: R.colors.grey,
},
avatar_text: {
fontSize: R.fontsize.fontsSize16,
fontWeight: '600',
color: R.colors.white,
fontFamily: R.fonts.InterSemiBold,
},
information: {
flex: 2,
marginLeft: 5,
},
text_card_info: {
fontSize: R.fontsize.fontsSize12,
fontWeight: "400",
color: R.colors.black,
fontFamily: R.fonts.InterRegular,
numberOfLines: 1,
ellipsizeMode: "tail",
},
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,
}
});
export default styles;
\ No newline at end of file
container_header: {
flexDirection: 'row',
marginHorizontal: 15,
},
spacing_header: {
justifyContent: 'center',
marginTop: 20,
},
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,
height:35,
paddingHorizontal: 10,
paddingVertical: 5,
},
input: {
fontSize: R.fontsize.fontsSize12,
color: R.colors.white,
margin: 0,
padding: 0,
fontFamily: R.fonts.InterRegular,
fontWeight: '400',
},
/* -------------------------------------------------------------------------- */
/* Body */
/* -------------------------------------------------------------------------- */
container_body: {
flex: 1,
backgroundColor: R.colors.white,
},
background_header: {
height: 295,
position: 'relative',
},
profile_card: {
position: 'absolute',
bottom: -30,
flexDirection: 'row',
alignItems: 'center',
backgroundColor: R.colors.white,
paddingVertical: 10,
paddingHorizontal: 15,
marginHorizontal: 15,
borderRadius: 15,
shadowColor: R.colors.black,
shadowOffset: {width: 0, height: 2},
shadowOpacity: 0.22,
shadowRadius: 2.22,
elevation: 3,
},
profile_left: {
flexDirection: 'row',
alignItems: 'center',
flex: 3,
},
avatar: {
width: 37,
height: 37,
borderRadius: 20,
backgroundColor: R.colors.white,
overflow: 'hidden',
},
avatar_image: {
width: '100%',
height: '100%',
},
avatar_placeholder: {
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: R.colors.blue500,
},
avatar_text: {
fontSize: R.fontsize.fontsSize16,
fontWeight: '600',
color: R.colors.white,
fontFamily: R.fonts.InterSemiBold,
},
information: {
flex: 2,
marginLeft: 5,
},
text_card_info: {
fontSize: R.fontsize.fontsSize12,
fontWeight: '600',
color: R.colors.black,
fontFamily: R.fonts.InterMedium,
numberOfLines: 1,
ellipsizeMode: 'tail',
},
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';
import styles from './style';
import {useNavigation} from '@react-navigation/native';
import * as SCREENNAME from '../../routers/ScreenNames';
import TextSearchView from '../../components/Input/TextSearch/TextSearch';
const HomeView = props => {
const {
......@@ -31,6 +32,7 @@ const HomeView = props => {
userProfile,
onMenuItemPress,
onSearchChange,
onNavigationProfile,
} = props;
const ArrowRightIcon = R.images.icArrowRight;
......@@ -80,8 +82,7 @@ const HomeView = props => {
<TouchableOpacity
style={styles.profile_btn}
onPress={() => navigate.navigate(SCREENNAME.PROFILE)}
activeOpacity={0.7}>
onPress={() => onNavigationProfile()}>
<Text style={styles.btn_text}>Hồ sở cá nhân</Text>
<ArrowRightIcon
width={5}
......@@ -110,28 +111,36 @@ const HomeView = props => {
</View>
);
return (
<SafeAreaView style={styles.container_body}>
<StatusBar barStyle="light-content" translucent={false} />
const renderBodyView1 = () => {
return (
<>
<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}>
<View style={[{flex: 1}]}>
<View style={styles.container_body}>
<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}
/>
{renderProfileCard()}
</ImageBackground>
{renderBodyView1()}
<ScrollView
showsVerticalScrollIndicator={false}
......@@ -145,6 +154,13 @@ const HomeView = props => {
</View>
</View>
</TouchableWithoutFeedback>
);
};
return (
<SafeAreaView style={styles.container_body}>
<StatusBar barStyle="light-content" translucent={false} />
{renderBody()}
</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