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

View File

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

View File

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