时间戳

首页 > 解决方案 > react native如何自定义底栏？

android - react native如何自定义底栏？

问题描述

我在本机反应中使用底栏。如图所示，如何更改背景颜色并使活动栏在底部用一条线突出显示？

代码 -

export const InternalStacks = TabNavigator({
    Home: { screen: HomeStack },    
    Graph: { screen: GraphStack }
},{
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
            const { routeName } = navigation.state;
            switch(routeName){
                case 'Home':
                    iconName = require('../assets/icons/home.png');
                    iconNameFocused = require('../assets/icons/home.png');
                    break;
                case 'Graph':
                    iconName = require('../assets/icons/chart.png');
                    iconNameFocused = require('../assets/icons/chart.png');
                    break;
            }
            if(focused)
            return ( <Image style={{width: 20, height: 20, tintColor }} source={iconNameFocused} /> );
            else
            return ( <Image style={{width: 20, height: 20, tintColor }} source={iconName} /> );
        }
    }),
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    tabBarOptions: {
      activeTintColor: '#FBC530',
      inactiveTintColor: 'black',
    },
    animationEnabled: false,
    swipeEnabled: false,
  });

当前设计 - 当前设计

所需设计 - 所需设计


尝试以下，

tabBarColor: '#E64A19',
backgroundColor: 'white',

但没有一个奏效。实现所需设计的更好方法是什么？

PS - 不担心图标。

标签： androidreact-native

解决方案

您可以获得更多tabBarOptions可能有所帮助的信息。以下是我们的风格：

  {
    tabBarPosition: 'bottom',
    tabBarOptions: {
      showLabel: false,
      showIcon: true,
      activeTintColor: black,
      inactiveTintColor: gray,
      activeBackgroundColor: white,
      inactiveBackgroundColor: white,
      style: {
        backgroundColor: white,
      },
      tabStyle: {
        backgroundColor: white,
      },
    },
  }

至于添加底栏，您可以focused像这样切换图标：

  HOME: {
screen: HomeScreen,
navigationOptions: {
  tabBarIcon: ({ tintColor, focused }) => <HomeIcon focused={focused ? UnderlinedIcon : RegularIcon } />,
},

},

因此，也许在其中一个图标中，您在底部添加了一条线，而在另一个图标中则没有，然后它们会在聚焦时切换。希望这可以帮助！！

推荐阅读