Question

我在我的应用中使用react-navigation，我想知道如何动态更改TabBar中的activeTintColor？

我有这样的代码，但它没有改变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,
    },
);

自定义标签栏组件可以访问这些props。

导航状态对象定义为here

如何动态更改TabBar（react-navigation）中的activeTintColor？

1 个答案: