在`Tab.Navigator`中设置属性`tabBarActiveTintColor`不起作用

Question

function MyTabs() {
    return (
        <Tab.Navigator
            initialRouteName='Home'
            screenOptions={{
                tabBarActiveTintColor: 'purple',
            }}
         >
             <Tab.Screen name='Home' component={HomeScreen} />
             <Tab.Screen name='Settings' component={SettingsScreen} />
         </Tab.Navigator>
    );
}

我不知道为什么这个属性不改变颜色，已经尝试在 android、ios 和 web 上启动它。 但他们总是保留默认颜色，我也检查了它写得很好但它仍然没有改变颜色。

Answer 1

属性

tabBarActiveTintColor

和

tabBarInactiveTintColor

提供

tabBarIcon

和

tabBarLabel

的颜色，我们可以在

options

的

Tab.screen

属性中指定。你还没有指定。

考虑以下代码片段。

<Tab.Screen name="Home" options={{
    tabBarLabel: (props) => <Text style={{ color: props.color}}>Home</Text>,
    tabBarIcon: (props) => do the same for your icon
 }}
 component={HomeScreen}
/>

每当选择选项卡

Home

时，

props

中的颜色就是

tabBarActiveTintColor

中指定的颜色，否则为

tabBarInactiveTintColor

中指定的颜色。这同样适用于 Tab.Navigator 中指定的所有选项卡。

可能建议创建一个自定义选项卡栏组件，即表示自定义选项卡栏对象（包括图标、文本和样式）的任何反应本机组件。

如果你想为整个标签栏着色，那么我们需要为

tabBarStyle

提供

Tab.Navigator

属性。考虑以下代码片段。

<Tab.Navigator
    tabBarStyle: {
        backgroundColor: "red",
    }
...
</Tab.Navigator>

Answer 2

这是我经常使用的 HOC 模式，用于解决属性传递问题，同时保留 React-Native 中的渲染生命周期。它非常灵活，您可以修改它以合并其他类型的返回，包括钩子（如果您愿意将

createIconComponent

制作为

<Component/>

），但这是一个单独的用例。

通过传入必要的值并返回一个函数来创建 HOC 组件包装器，该函数又返回它自己的组件，该组件利用传入的属性

export const createIconComponent = ({name, size, style, defaultColor}) => {
  // Component that accepts dynamic props
  return function IconComponent({color}) {
    return (
        <MaterialCommunityIcons
            name={name}
            color={defaultColor || color} // Use defaultColor if provided, otherwise use the color from the properties
            size={size}
            style={style}
        />
    );
  };
};

这是我的一个应用程序的示例，其中我生成了多个组件 - 分别是 homeIcon、settingsIcon 和 searchIcon，并将它们传递到每个 tabBarIcon 中。顶级选项卡导航器中

tabBarActiveTintColor: colors.accent

和

tabBarInactiveTintColor: colors.secondary

的属性值将向下传播到组件中。

export const TopTabNavigator = () => {
  const {colors} = Styles();
  const {teamData} = useContext(AppStateContext);

  // Uses the colors.accent property we define 
  const homeIcon = createIconComponent({
    defaultColor: colors.accent, name: 'home', size: 27,
  });
  // Uses the colors.accent property we define 
  const settingsIcon = createIconComponent({
    defaultColor: colors.accent, name: 'account-cog', size: 25,
  });

  // This will use the dynamic properties color/active hinting 
  const searchIcon = createIconComponent({name: 'magnify', size: 25});

  return (<Tabs.Navigator
      tabBarPosition="bottom"
      keyboardDismissMode="on-drag"
      screenOptions={{
        tabBarActiveTintColor: colors.accent,
        tabBarHideOnKeyboard: true,
        tabBarInactiveTintColor: colors.secondary,
        tabBarPressColor: colors.primary,
        tabBarShowIcon: true,
        tabBarShowLabel: false,
        tabBarStyle: {
          backgroundColor: colors.primary, height: '10%',
        },
      }}
  >
    <Tabs.Screen
        name="Home"
        component={HomeStack}
        options={{
          tabBarIcon: homeIcon
        }}
    />
    {teamData !== undefined && teamData.length > 0 && <Tabs.Screen
        name="Search"
        component={SearchStack}
        options={{
          tabBarIcon: searchIcon,
        }}
    />}
    <Tabs.Screen
        name="Settings"
        component={PreferencesStack}
        options={{
          tabBarIcon: settingsIcon
        }}
    />
  </Tabs.Navigator>);
};