|
// in my MainTabNavigator |
|
|
|
import RainMapScreen from '../screens/RainMapScreen'; |
|
import GroupMessageHistoryScreen from '../screens/GroupMessageHistoryScreen'; |
|
import GroupDrawer from './GroupDrawer' |
|
|
|
export default createBottomTabNavigator( |
|
{ |
|
GroupDrawer: { |
|
screen: GroupDrawer, |
|
}, |
|
Messages: { |
|
screen: GroupMessageHistoryScreen, |
|
}, |
|
Rain: { |
|
screen: RainMapScreen, |
|
}, |
|
}, |
|
|
|
{ |
|
navigationOptions: ({ navigation }) => ({ |
|
tabBarIcon: ({ focused }) => { |
|
const { routeName } = navigation.state; |
|
let iconName; |
|
switch (routeName) { |
|
case 'Summary': |
|
iconName = Platform.OS === 'ios' |
|
? `ios-information-circle${focused ? '' : '-outline'}` |
|
: 'md-information-circle'; |
|
break; |
|
case 'SelectGroup': |
|
iconName = Platform.OS === 'ios' |
|
? `ios-link${focused ? '' : '-outline'}` |
|
: 'md-link'; |
|
break; |
|
case 'Settings': |
|
iconName = Platform.OS === 'ios' |
|
? `ios-options${focused ? '' : '-outline'}` |
|
: 'md-options'; |
|
} |
|
return ( |
|
<Ionicons |
|
name={iconName} |
|
size={28} |
|
style={{ marginBottom: -3 }} |
|
color={focused ? Colors.tabIconSelected : Colors.tabIconDefault} |
|
/> |
|
); |
|
}, |
|
}), |
|
tabBarPosition: 'bottom', |
|
animationEnabled: false, |
|
swipeEnabled: false, |
|
} |
|
); |
|
|
|
// -------------------- DIFFERENT FILE ------------------------------- |
|
|
|
// in my GroupDrawer |
|
import { createDrawerNavigator } from 'react-navigation'; |
|
|
|
import SummaryScreen from '../screens/SummaryScreen' |
|
import SettingsScreen from '../screens/SettingsScreen'; |
|
import GroupHelpScreen from '../screens/GroupHelpScreen' |
|
import ContactScreen from '../screens/ContactScreen' |
|
|
|
|
|
|
|
const GroupDrawer = createDrawerNavigator ({ |
|
Summary: { |
|
screen: SummaryScreen, |
|
navigationOptions: {title: 'Summary'}, |
|
}, |
|
Profile: { |
|
screen: SettingsScreen, |
|
navigationOptions: {title: 'profile'}, |
|
}, |
|
Contact: { |
|
screen: ContactScreen, |
|
navigationOptions: {title: 'contact'}, |
|
}, |
|
Help: { |
|
screen: GroupHelpScreen, |
|
navigationOptions: {title: 'help'}, |
|
}, |
|
|
|
|
|
}); |
|
|
|
export default GroupDrawer; |
// in navigator.js, add this:
// that's your main screen
// I hope, this will help you.