首页 > 解决方案 > 如何设置 createMaterialBottomTabNavigator 的样式?

问题描述

底部标签栏

我正在使用react-navigation-material-bottom-tabs这个导航栏。唯一的问题是我无法控制标签的样式或栏的高度。除了使用顶部栏并将其定位到底部之外,我还能做什么?

export default HomeScreenTabNavigator = new 
                              createMaterialBottomTabNavigator({
       NewsFeed: { screen: FeedStack},
       Social: { screen: SocialStack},
       Planner: { screen: PlannerStack},
       Boring: { screen: BoringStack},
       Account: { screen: AccountStack},
   },
   {
       navigationOptions: ({ navigation }) => ({
           tabBarIcon: ({ focused, tintColor }) => {
               const { routeName } = navigation.state;
               let iconName;
               if (routeName === 'Boring') {
                   iconName = `ios-add-circle${focused ? '' : '-outline'}`;
               } else if (routeName === 'Social') {
                   iconName = `ios-alarm${focused ? '' : '-outline'}`;
               } else if (routeName === 'NewsFeed') {
                   iconName = `ios-albums${focused ? '' : '-outline'}`;
               }
               return <Ionicons name={iconName} size={27} color={'#ffff'} />;
           },
       }),
       tabBarOptions: {
           showIcon: true,
       },
       barStyle: { backgroundColor: '#33ADFF'},
       animationEnabled: true,
   });

标签: react-nativereact-navigation

解决方案


推荐阅读