react-navigation：如何根据当前选项卡更改tabBar颜色 [英] react-navigation: How to change tabBar color based on current tab

问题描述

我开始使用react-navigation。

如何在更改标签时更改tabBar背景颜色？

I'm getting started with react-navigation.
How do I change the tabBar background color when I change tab?

这是一些伪代码显示我希望的内容：

Here is some pseudo-code showing what I'm hoping for:

_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(),
  }
});

此时它总是默认为白色（这很好，因为我的代码错了:-)所以如何传递某些东西，它会在routeName或iconLabel或其他任何东西上触发此逻辑。

At the minute it's always defaulting to white ( which is fine because my code is wrong :-) so how do I pass in something which triggers this logic either on routeName or iconLabel or whatever.

任何帮助都将非常受欢迎。

先谢谢。

干杯

Any help would be most appreciated.
Thanks in advance.
Cheers

推荐答案

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',
    },
  },
);

输出

Output

这篇关于react-navigation：如何根据当前选项卡更改tabBar颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！