Question

在 React Native 底部选项卡导航器中，活动色调颜色不起作用。聚焦时名称的颜色确实会改变，但图标颜色不会改变。这是我的导航器

<Tab.Navigator
      screenOptions={({route}) => ({
        tabBarIcon: ({focused, tintColor, size}) => {
          let iconName;

          if (route.name === 'Home') {
            iconName = focused
              ? 'chatbubble-ellipses-sharp'
              : 'chatbubble-ellipses-outline';
          } else if (route.name === 'Setting') {
            iconName = focused ? 'settings-sharp' : 'settings-outline';
          }

          // You can return any component that you like here!
          return (
            <Icon
              name={iconName}
              size={size}
              color={tintColor}
              type={'Ionicons'}
            />
          );
        },
      })}
      tabBarOptions={{
        activeTintColor: 'tomato',
        inactiveTintColor: 'gray',
      }}>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Setting" component={Setting} />
    </Tab.Navigator>
  );
}

即使我像 <Icon name={iconName} size={size} color={'red'} type={'Ionicons'} /> 这样手动输入颜色，它也不起作用。有什么帮助吗？

Answer 1

您正在使用'tintcolor'

但根据 documentation 应该是颜色

像下面那样改变它，它应该在屏幕级别而不是在导航器级别完成。

  <Tab.Screen
    name="Notifications"
    component={Notifications}
    options={{
      tabBarLabel: 'Updates',
      tabBarIcon: ({ focused,color, size }) => {
        const icon=focused?"bell":"home";
        return (
        <MaterialCommunityIcons name={icon} color={color} size={size} />
      )
      },
    }}
  />

你可以像这样简单地传递你需要的颜色

 tabBarOptions={{
    activeTintColor: 'red',
    inactiveTintColor: 'green',
  }}>

您可以在此处查看样品小吃（您必须将图标更改为您使用的图标） https://snack.expo.io/@guruparan/createbottomtabnavigator-|-react-navigation

对于原生基础图标的颜色使用如下答案的选项 https://stackoverflow.com/a/48062357/1435722

底部选项卡导航中的图标颜色未更改

1 个答案: