如何设置导航两个选项卡的选项并检查路由名称以配置不同的图标名称?

Question

我创建了一个带有crateBottomNavigator的底部导航器。它有2个选项卡。第一个是Navigator，用createStackNavigator创建。2d是普通屏幕。 我使用navigationOptions和tabBarIcon作为第二个参数，以便根据以下情况获取routeName并为我们的选项卡提供不同的icon：1(routeName和2(是否focused。

我遵循了 React 导航文档的步骤。

问题是图标没有显示！ 但是，选项卡是功能性的。

// 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);

谢谢:)

Answer 1

正如我们通过评论弄清楚的那样，我将在这里将其写为最终答案。

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

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

Answer 2

此外，我想更改图标和颜色，但图标都来自不同的集合。 这就是我最终想到的。

defaultNavigationOptions: ({ navigation }) => ({
// Ionicons = ios-book
// MaterialCommunityIcons = book
// FontAwesome = cross
// FontAwesome5 = bolnisi-cross
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName = '';
if (routeName === 'Books') {
iconName = focused ? 'ios-book' : 'book';
} else if (routeName === 'Favorites') {
iconName = focused ? 'bolnisi-cross' : 'cross';
}
// For Books
if (routeName === 'Books' && focused) {
return <Ionicons name={iconName} size={25} color={tintColor} />;
// For Favorites
} else if (routeName === 'Favorites' && focused) {
return <MaterialCommunityIcons name={iconName} size={25} color={tintColor} />;
}
// For Books
if (routeName === 'Books' && !focused) {
return <FontAwesome name={iconName} size={25} color={tintColor} />;
// For Favorites
} else if (routeName === 'Favorites' && !focused) {
return <FontAwesome5 name={iconName} size={25} color={tintColor} />;
}
}
}),