react-navigation：如何根据当前选项卡更改 tabBar 颜色

Question

我开始使用 react-navigation。
如何在切换tab时改变tabBar的背景颜色？

这里有一些伪代码显示了我所希望的：

_backgroundColor = function() { 
    switch (this.routeName) {
      case 'tabHome':     return { backgroundColor: '#002663' };
      case 'tabRewards':  return { backgroundColor: '#3F9C35' };
      default:            return { backgroundColor: 'white' }           
    }
}

// Tabs setup
export const TabStack = TabNavigator({
  tabHome:     { screen: HomeStack,       },
  tabRewards:  { screen: RewardsStack,    },
}, {
  tabBarOptions: {
    style: _backgroundColor(),
  }
});

目前它总是默认为白色（这很好，因为我的代码是错误的:-) 那么我如何传递 something 来触发 routeName 或iconLabel 或其他。

如有任何帮助，我们将不胜感激。
提前致谢。
干杯

Answer 1

import React from 'react';
import { Image, View } from 'react-native';
import { StackNavigator, TabNavigator, TabBarBottom } from 'react-navigation';

const Screen = () => <View />;

const Tabs = TabNavigator(
  {
    Tab1: {
      screen: Screen,
      navigationOptions: {
        title: 'Tab1',
        tabBarIcon: ({ tintColor }) =>
          (<Image
              source={require('../images/iconNotificationNew.png')}
              style={[{ tintColor }]}
          />),
      },
    },
    Tab2: {
      screen: Screen,
      navigationOptions: {
        title: 'Tab2',
        tabBarIcon: ({ tintColor }) =>
          (<Image
              source={require('../images/iconNotificationNew.png')}
              style={[{ tintColor }]}
          />),
      },
    },
    Tab3: {
      screen: Screen,
      navigationOptions: {
        title: 'Tab3',
        tabBarIcon: ({ tintColor }) =>
          (<Image
              source={require('../images/iconNotificationNew.png')}
              style={[{ tintColor }]}
          />),
      },
    },
  },
  {
    lazy: true,
    tabBarComponent: props => {
      const backgroundColor = props.position.interpolate({
        inputRange: [0, 1, 2],
        outputRange: ['orange', 'white', 'green'],
      })
      return (
        <TabBarBottom
          {...props}
          style={{ backgroundColor: backgroundColor }}
        />
      );
    },
    swipeEnabled: true,
    animationEnabled: true,
    tabBarPosition: 'bottom',
    initialRouteName: 'Tab2',
    tabBarOptions: {
      activeTintColor: 'blue',
      inactiveTintColor: 'grey',
    },
  },
);

输出

Answer 2

对于react-navigationv6，只需在屏幕选项中添加tabBarColor

   activeColor="#ffffff"
   barStyle={{
     backgroundColor: "#0071BC",
   }}
   initialRouteName="Home"
   shifting={true}
 >
   <Tab.Screen
     name="Downloads"
     component={Downloads}
     options={{
       tabBarLabel: "Downloads",
       tabBarIcon: ({ color }) => (
         <SimpleLineIcons name="question" size={20} color={color} />
       ),
       tabBarColor: Colors.tutor,
     }}
   />```

react-navigation：如何根据当前选项卡更改 tabBar 颜色

react-navigation: How to change tabBar color based on current tab

javascript

react-native

react-navigation