react-native - 如何为两个选项卡设置 navigationsOptions 并检查 routeName 以配置不同的 iconNames？

Question

我创建了一个底部导航器crateBottomNavigator。它有 2 个标签。第一个是 a Navigator，用 . 创建createStackNavigator。2d是普通屏幕。我将 和 用作第二个参数navigationOptions，tabBarIcon以便根据：1)和 2)获得routeName和给我们的选项卡一个不同的选项卡。iconrouteNamefocused

我遵循了React Navigation docs的步骤。

问题是图标不显示！但是，这些选项卡是功能性的。

// CODE WITH PROBLEM
const MealsFavTabNavigator = createBottomTabNavigator(
    {
        Meals: MealsNavigator,
        Favorites: FavoritesScreen
    },
    {
        navigationOptions: ({ navigation }) => ({
            tabBarIcon: ({ focused, tintColor }) => {
                const { routeName } = navigation.state;
                let iconName;
                if (routeName === 'Meals') {
                    iconName = `restaurant${focused ? '' : '-menu'}`;       
                } else if (routeName === 'Favorites') {
                    iconName = `favorite${focused ? '' : '-border'}`;
                }
                return <MaterialIcons name={iconName} size={25} color={tintColor} />;
            }
        }),

        tabBarOptions: {
            activeTintColor: 'tomato',
            inactiveTintColor: 'gray',
        }
    }
);

如果我将屏幕分开，那么效果很好。

// CODE WITH NO PROBLEM
const MealsFavTabNavigator = createBottomTabNavigator(
    {
        Meals: {
            screen: MealsNavigator,
            // navigationOptions in config of a navigator, only matter if that
            // navigator is used inside of another navigator.
            navigationOptions: {
                tabBarIcon: ({ focused, tintColor }) => {
                    let iconName = `restaurant${focused ? '' : '-menu'}`;
                    return <MaterialIcons name={iconName} size={25} color={tintColor} />;
                }
            }
        },
        Favorites: {
            screen: FavoritesScreen,
            navigationOptions: {
                tabBarLabel: 'Favorites!',
                tabBarIcon: ({ focused, tintColor }) => {
                    let iconName = `favorite${focused ? '' : '-border'}`;
                    return <MaterialIcons name={iconName} size={25} color={tintColor} />;
                }
            }
        }
    },
    {
        tabBarOptions: {
            activeTintColor: Colors.active,
            inactiveColor: Colors.inactive
        }
    }
);

这是整个模块。

import React from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { Platform } from 'react-native';
import { MaterialIcons } 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 Colors from '../constants/Colors';


const MealsNavigator = createStackNavigator(
    {
        Categories: {
            screen: CategoriesScreen
        },
        CategoryMeals: {
            screen: CategoryMealsScreen
        },
        MealDetail: MealDetailScreen
    },
    {
        defaultNavigationOptions: {
            headerStyle: {
                backgroundColor: Platform.OS === 'android' ? Colors.primaryColor : ''
            },
            headerTintColor: Platform.OS === 'android' ? 'white' : Colors.primaryColor,
            headerTitle: 'A Screen'
        }
    }
);

const MealsFavTabNavigator = createBottomTabNavigator(
    {
        Meals: MealsNavigator,
        Favorites: FavoritesScreen
    },
    {
        navigationOptions: ({ navigation }) => ({
            tabBarIcon: ({ focused, tintColor }) => {
                const { routeName } = navigation.state;
                let iconName;
                if (routeName === 'Meals') {
                    iconName = `restaurant${focused ? '' : '-menu'}`;       
                } else if (routeName === 'Favorites') {
                    iconName = `favorite${focused ? '' : '-border'}`;
                }
                return <MaterialIcons name={iconName} size={25} color={tintColor} />;
            }
        }),

        tabBarOptions: {
            activeTintColor: 'tomato',
            inactiveTintColor: 'gray',
        }
    }
);

export default createAppContainer(MealsFavTabNavigator);

谢谢 ：）

标签： react-nativereact-navigation

Answer 1

正如我们通过评论发现的那样，我将在此处将其写为明确的答案。

问题是作为 in 中的参数的 navigationOptionscreateBottomTabNavigator没有可用于指定特定选项卡图标的 tabBarIcon 键。

为此，您需要将其作为参数传入 inside defaultNavigationOptions，用于为导航器的每个项目指定标准选项，例如 tabBarIcon。