Как динамически изменить activeTintColor в TabBar (реагировать на навигацию)?

Question

Я использую react-navigation в своем приложении, я хочу знать, как можно динамически изменить activeTintColor в TabBar?

У меня есть такой код, но он не меняет activeTintColor:

  static navigationOptions = ({ navigation, screenProps }) => ({
    actionButton: {
      title: _('create'),
      icon: 'plus',
      onPress: () => navigation.navigate('EventCreate')
    },
    tabBarLabel: _('calendar'),
    tabBarIcon: ({focused}) => <Icon featherName="calendar" active={focused}/>,
    tabBarOptions: { activeTintColor:'red'}
  }) 

Answer 1

Вы можете сделать это, отметив Пользовательский компонент панели вкладок .

import { TabNavigator } from 'react-navigation';

const TabBar = TabNavigator.Presets.Default.tabBarComponent

const CustomTabBar = ({...props}) => {
    props.activeTintColor = //... change the color based on screen navigation state 
    return <TabBar {...props} />
}

и используйте его как

const CustomTabs = TabNavigator(
    {
        // ...Screens
    },
    {
        tabBarComponent: CustomTabBar,
    },
);

Пользовательский компонент панели вкладок имеет доступ к этим реквизитам .

состояние навигации объекты определены как здесь