added icon to bottom nav bar and small style

This commit is contained in:
Emily Liu 2020-10-18 22:53:27 -04:00
parent bfd30f4ad1
commit 5f18866ae3
3 changed files with 46 additions and 12 deletions

View File

@ -6,6 +6,7 @@ import {
View,
Text,
StatusBar,
Image,
} from 'react-native';
import {
@ -27,6 +28,9 @@ import More from './More'
import Staff from './Staff'
import OpeningPage from './OpeningPage';
import OpenPage from './OpenPage';
import styles from './styles/morestyles';
import Ionicons from 'react-native-vector-icons/Ionicons';
const Tab = createBottomTabNavigator();
@ -38,16 +42,40 @@ class App extends React.Component {
super();
OpeningPage.load(v => this.setState({loaded: true}));
}
render() {
return (
<NavigationContainer >
{this.state.loaded ?
<Tab.Navigator tabBarOptions={{
activeTintColor: 'red',
labelStyle:{
fontSize:16
}}}>
<Tab.Screen name="Home" component={Home} />
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = focused ? 'ios-home' : 'ios-home-outline';
} else if (route.name === 'Calendar') {
iconName = focused ? 'ios-calendar' : 'ios-calendar-outline';
} else if (route.name === 'Polls') {
iconName = focused ? 'ios-pie-chart' : 'ios-pie-chart-outline';
} else if (route.name === 'Clubs') {
iconName = focused ? 'ios-people-circle' : 'ios-people-circle-outline';
} else if (route.name === 'Staff') {
iconName = focused ? 'ios-nutrition' : 'ios-nutrition-outline';
} else if (route.name === 'More') {
iconName = focused ? 'ios-ellipsis-horizontal' : 'ios-ellipsis-horizontal-outline';
}
return <Ionicons name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: 'red',
labelStyle:{
fontSize:16
}}}
>
<Tab.Screen name="Home" component={Home}/>
<Tab.Screen name="Calendar" component={Calendar} />
<Tab.Screen name="Polls" component={Poll} />
<Tab.Screen name="Clubs" component={Clubs} options ={{title: 'Clubs'}}/>

View File

@ -8,12 +8,13 @@ const styles = StyleSheet.create({
item: {
backgroundColor: '#bababa',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
borderRadius: 16,
borderBottomWidth: 1.5,
borderColor: 'black',
borderRadius: 12,
},
title: {
fontSize: 32,
fontSize: 28,
},
date: {
fontSize:12,

View File

@ -7,15 +7,16 @@ const styles=StyleSheet.create({
borderBottomColor:'white',
borderBottomWidth:0.5,
height: Dimensions.get('window').height*0.075,
justifyContent:'center'
justifyContent:'center',
paddingLeft: '3%',
},
moretext: {
color:'#eee',
fontSize:20,
},
headerTitle: {
fontWeight:'bold',
fontSize:24
fontWeight: 'bold',
fontSize:24,
},
resourceContainer: {
alignItems: 'center',
@ -51,6 +52,10 @@ const styles=StyleSheet.create({
borderRadius: 5,
height: '100%',
width: '100%',
},
tabBarIcon: {
height: 50,
width: 50,
}
});