Question

我正在使用底部反应原生。如何更改背景颜色并使用底部的一行突出显示活动条，如图所示？

代码 -

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 - 不担心图标。

Answer 1

您可以访问可能有用的更多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 } />,
},

}，

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

如何自定义反应原生的底栏？

1 个答案: