mirror of
https://github.com/Blair-SGA-Dev-Team/blazerapp.git
synced 2024-11-08 14:51:17 -05:00
added icon to bottom nav bar and small style
This commit is contained in:
parent
bfd30f4ad1
commit
5f18866ae3
40
app/App.js
40
app/App.js
|
@ -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'}}/>
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
}
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user