index.js (1971B)
1 // import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs'; 2 import React from 'react'; 3 import { createBottomTabNavigator } from 'react-navigation'; 4 import { Ionicons } from '@expo/vector-icons'; 5 6 import AskStories from '../screens/AskStories'; 7 import BestStories from '../screens/BestStories'; 8 import NewStories from '../screens/NewStories'; 9 import TopStories from '../screens/TopStories'; 10 11 const AppContainer = createBottomTabNavigator( 12 { 13 Top: { 14 screen: TopStories, 15 navigationOptions: { 16 tabBarOptions: { 17 activeTintColor: 'rgb(255, 25, 85)' 18 }, 19 tabBarIcon: ({ tintColor }) => ( 20 <Ionicons 21 name="ios-arrow-dropup-circle" 22 color={tintColor} 23 size={22} 24 /> 25 ) 26 } 27 }, 28 Best: { 29 screen: BestStories, 30 navigationOptions: { 31 tabBarOptions: { 32 activeTintColor: 'rgb(255, 204, 0)' 33 }, 34 tabBarIcon: ({ tintColor }) => ( 35 <Ionicons 36 name="ios-star" 37 color={tintColor} 38 size={22} 39 /> 40 ) 41 } 42 }, 43 New: { 44 screen: NewStories, 45 navigationOptions: { 46 tabBarOptions: { 47 activeTintColor: 'rgb(88, 86, 214)' 48 }, 49 tabBarIcon: ({ tintColor }) => ( 50 <Ionicons 51 name="ios-hourglass" 52 color={tintColor} 53 size={22} 54 /> 55 ) 56 } 57 }, 58 Ask: { 59 screen: AskStories, 60 navigationOptions: { 61 tabBarOptions: { 62 activeTintColor: 'rgb(175, 82, 222)' 63 }, 64 tabBarIcon: ({ tintColor }) => ( 65 <Ionicons 66 name="ios-help-circle-outline" 67 color={tintColor} 68 size={22} 69 /> 70 ) 71 } 72 } 73 }, 74 { 75 tabBarOptions: { 76 inactiveTintColor: 'rgb(142,142,147)', 77 activeTintColor: 'rgb(255, 204, 0)' 78 } 79 } 80 ); 81 export default AppContainer;