Question

我在 activeTintColor 上遇到问题，这些问题是reactnavigation.org的文档，activeTintColor用于标签和活动选项卡的图标颜色。但是，当我尝试我的应用程序时，仅文本会更改图标的颜色，仍然是黑色。我会告诉大家我已经创建的代码

我将给出一个仪表板屏幕示例：

    DriverDashScreen: {
    screen:DriverDashScreen,
    navigationOptions: {
      tabBarLabel:"Home",
      header: null,
      tabBarIcon: ({ tintColor }) => (
        <Icon type="FontAwesome5" active  name="compass" color={tintColor} style={{fontSize: 18}}/>
      ),
      tabBarOptions: {
        activeTintColor: '#2C73D2',
        inactiveTintColor: 'gray',
        showIcon: true,
        labelStyle: {
          fontWeight: 'bold',
        },
      },
    },
  },

在屏幕上，仅文本更改为蓝色，但图标仍为黑色

我希望有人能帮助我找到问题所在，谢谢。

Answer 1

是的，activeTintColor中有tabBarOptions个选项

reference

Answer 2

尝试一下：

// change screenA and screenB with your routes. 

navigationOptions: ({ navigation }) => ({
    tabBarLabel: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        return <Text style={[styles.tabBar, {color: tintColor}]}>{routeName}</Text>
    },
    tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        if (routeName === 'screenA') {
            return <Fa5Icons name='compass' size={20} color={tintColor} />
        } else if (routeName === 'screenB') {
            // ...
        }
    },
})

Fa5Icons导入者：

import Fa5Icons from 'react-native-vector-icons/FontAwesome5'

是否有任何解决方案可以在使用反应导航时更改选项卡导航图标的颜色

2 个答案: