React Native：更改导航选项卡的颜色答案

【问题标题】：React Native: Change color of navigation tabReact Native：更改导航选项卡的颜色
【发布时间】：2020-11-11 22:13:25
【问题描述】：

在我的导航选项卡上，我想更改标签的颜色 + 活动时图标的颜色，所以我所做的是创建了一个 if 和 else 语句：

<MealsFavTabNavigator.Screen
                    name="Favorites"
                    component={FavoritesScreen}
                    options={({ route }) => ({
                        tabBarIcon: (tabInfo) => {
                            if (route.name === 'Favorites'){
                                return <Ionicons name="ios-star" size={25} color='tomato'/>
                            } else {
                                return <Ionicons name="ios-star" size={25} color='black' />
                            }
                            
                        }
                    })}

我的标签颜色也固定在导航器级别之上：

    <MealsFavTabNavigator.Navigator
        tabBarOptions={{
            activeTintColor: Colors.primaryColor,
            inactiveTintColor: 'black',
        }}>

这是我的完整代码：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import { Ionicons } from '@expo/vector-icons';

import CategoriesScreen from '../screens/CategoriesScreen';
import CategoryMealsScreen from '../screens/CategoryMealsScreen';
import MealDetailScreen from '../screens/MealDetailScreen';

import FavoritesScreen from '../screens/FavoritesScreen';

import HeaderButton from '../components/HeaderButton';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import { CATEGORIES } from '../data/dummy-data';

import Colors from '../constants/colors';

const MealsNav = createStackNavigator();

const MealsNavigator = () => {
    return (
        <MealsNav.Navigator
            mode="modal"
            screenOptions={{
                headerStyle: {
                    backgroundColor: Colors.primaryColor,
                },
                headerTintColor: '#fff',
                headerTitleStyle: {
                    fontSize: 17
                }
            }}
        >
            <MealsNav.Screen
                name="Categories"
                component={CategoriesScreen}
                options={{
                    title: 'Meals Categories'
                }}

            />
            <MealsNav.Screen
                name="CategoryMeals"
                component={CategoryMealsScreen}
                options={({ route }) => {
                    const catId = route.params.categoryId;
                    const selectedCategory = CATEGORIES.find((cat) => cat.id === catId);

                    return {
                        title: selectedCategory.title,
                    };

                }}
            />
            <MealsNav.Screen
                name="MealDetail"
                component={MealDetailScreen}
                options={{
                    title: 'Meal Detail',
                    headerRight: () => (
                        <HeaderButtons HeaderButtonComponent={HeaderButton}>
                            <Item
                                title='Favorite'
                                iconName='ios-star'
                                onPress={() => console.log('Mark as the favorite')}
                            />
                        </HeaderButtons>
                    ),
                }}
            />
        </MealsNav.Navigator>
    );
};

const MealsFavTabNavigator = createBottomTabNavigator();



const MealsTabNav = () => {
    return (
        <NavigationContainer>
            <MealsFavTabNavigator.Navigator
                tabBarOptions={{
                    activeTintColor: Colors.primaryColor,
                    inactiveTintColor: 'black',
                }}>
                <MealsFavTabNavigator.Screen
                    name="Meals"
                    component={MealsNavigator}
                    options={({ route }) => ({
                        tabBarIcon: ({ color }) => {
                            
                            if(route.name === 'Meals'){
                               color = 'tomato'
                            } else if (route.name === 'Favorites') {
                                color = 'black'
                            }
                             return <Ionicons name="ios-restaurant" size={25} color={color}/>
                        }
                    })}
                />
                <MealsFavTabNavigator.Screen
                    name="Favorites"
                    component={FavoritesScreen}
                    options={({ route }) => ({
                        tabBarIcon: (tabInfo) => {
                            if (route.name === 'Favorites'){
                                return <Ionicons name="ios-star" size={25} color='tomato'/>
                            } else {
                                return <Ionicons name="ios-star" size={25} color='black' />
                            }
                            
                        }
                    })}
                />
            </MealsFavTabNavigator.Navigator>
        </NavigationContainer>
    );
};


export default MealsTabNav;

当图标处于活动状态时，如何更改标签的颜色和图标的颜色？我的解决方案不起作用。

【问题讨论】：

标签： reactjs react-native react-navigation

【解决方案1】：

默认情况下，标签栏图标和标签栏标签中有颜色参数，这些参数设置为活动色调颜色和非活动色调颜色。

但如果您需要覆盖它，您可以执行以下操作

 <Tab.Screen
    name="Feed"
    component={Feed}
    options={{
      tabBarLabel:({ focused,color })=>(<Text style={{color:focused?"red":"aqua"}}>1232</Text>),
      tabBarIcon: ({ focused,color, size }) => (
        <MaterialCommunityIcons name="home" color={focused?"green":"blue"} size={size} />
      ),
    }}
  />

道具参考 tabBarLabel 可以是文本或反应节点，您可以将焦点和颜色作为参数，颜色将是您设置为 activetintcolor 或 inactivetintcolor 的颜色。 focused 是一个布尔值，决定选项卡是否获得焦点。

相同的参数被传递给 tabBarIcon 唯一的区别是图标的大小。

如果您看到上面的代码，我已经根据焦点给出了自定义颜色，而没有使用传递的颜色。您可以根据自己的要求执行此操作。

【讨论】：