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

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

以及本机基础中图标的颜色使用如下答案的选项

Answer 2

在 React Navigation 6 中，这些选项现在是屏幕选项。

之前 (v5)

<Tab.Navigator
  tabBarOptions={{
    inactiveTintColor: 'green',
    activeTintColor: 'red',
    style: {
      position: 'absolute',
      borderTopColor: 'rgba(0, 0, 0, .2)',
    },
  }}
>

(v6)

之后

<Tab.Navigator
  screenOptions={{
    tabBarInactiveTintColor: 'green',
    tabBarActiveTintColor: 'red',
    tabBarStyle: {
      position: 'absolute',
      borderTopColor: 'rgba(0, 0, 0, .2)',
    },
  }}
>

然后在您的图标上您可以执行以下操作：

  <BottomTab.Screen
    name="Home"
    component={HomeScreen}
    options={({ navigation }) => ({
      title: "Home",
      tabBarIcon: ({ focused, color }) => (
        <Feather name="home" size={24} color={focused ? "red" : "green"} />
      ),
    })}
  />

在此处查看包含更改记录的官方文档：https://reactnavigation.org/blog/2021/08/14/react-navigation-6.0/

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

Icon color not changing in bottom tab navigation

react-native

react-native-android

react-native-navigation