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,
|
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'}}/>
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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,
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user