Reactjs 反应本机：CreateBoottomTabNavigator屏幕选项不起作用

您好，我正在使用我的选项卡导航器，到目前为止还不错，直到我尝试通过添加图标和自定义颜色来自定义选项卡导航器：

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>
                <MealsFavTabNavigator.Screen
                    name="Meals"
                    component={MealsNavigator}
                    screenOptions={() => ({
                       tabBarIcon: (tabInfo) => {
                          return <Ionicons name="ios-restaurant" size={25}  color={tabInfo.tintColor} />
                       }
                      })}
                      tabBarOptions={{
                        activeTintColor: 'tomato',
                        inactiveTintColor: 'black',
                      }}
                />
                <MealsFavTabNavigator.Screen
                    name="Favorites"
                    component={FavoritesScreen}
                    screenOptions={({ route }) => ({
                        tabBarIcon: (tabInfo) => {
                           return <Ionicons name="ios-star" size={25}  color={tabInfo.tintColor} />
                        }
                       })}
                       tabBarOptions={{
                         activeTintColor: 'tomato',
                         inactiveTintColor: 'black',
                       }}
                />
            </MealsFavTabNavigator.Navigator>
        </NavigationContainer>
    );
};


export default MealsTabNav;

从“React”导入React；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
从“@expo/vector icons”导入{Ionicons}；
从“../screens/CategoriesScreen”导入分类屏幕；
从“../screens/CategoryMalsScreen”导入CategoryMalsScreen；
从“../screens/MealDetailScreen”导入MealDetailScreen；
从“../screens/FavoriteScreen”导入FavoriteScreen；
从“../components/HeaderButton”导入HeaderButton；
从“反应导航标题按钮”导入{HeaderButtons，Item}；
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}；
从“../data/dummy data”导入{CATEGORIES}；
从“../constants/Colors”导入颜色；
const MealsNav=createStackNavigator（）；
const MealsNavigator=（）=>{
返回(
{
const catId=route.params.categoryId；
const selectedCategory=CATEGORIES.find（（cat）=>cat.id==catId）；
返回{
标题：selectedCategory.title，
};
}}
/>
(
log（'标记为收藏夹'）}
/>
),
}}
/>
);
};
const MealsFavTabNavigator=createBottomTabNavigator（）；
const MealsTabNav=（）=>{
返回(
({
tabBarIcon：（tabInfo）=>{
返回
}
})}
禁忌选项={{
activeTintColor:‘番茄’，
颜色：“黑色”，
}}
/>
({
tabBarIcon：（tabInfo）=>{
返回
}
})}
禁忌选项={{
activeTintColor:‘番茄’，
颜色：“黑色”，
}}
/>
);
};
导出默认MealsTabNav；

正如您在这里看到的，我尝试添加一个屏幕选项：

const MealsFavTabNavigator = createBottomTabNavigator();

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

const MealsFavTabNavigator=createBottomTabNavigator（）；
const MealsTabNav=（）=>{
返回(
({
tabBarIcon：（tabInfo）=>{
返回
}
})}
禁忌选项={{
activeTintColor:‘番茄’，
颜色：“黑色”，
}}
/>
({
tabBarIcon：（tabInfo）=>{
返回
}
})}
禁忌选项={{
activeTintColor:‘番茄’，
颜色：“黑色”，
}}
/>
);
}; 

---

图标不起作用，甚至颜色也不起作用，并且控制台上没有错误。知道我做错了什么吗？

屏幕选项道具用于导航器，而不是屏幕

当用于屏幕时，您必须使用“选项”，而不是屏幕选项

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

({
tabBarIcon：（tabInfo）=>{
返回
}
})}
/>

此外，选项卡选项应移动到navigator

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

选项卡选项如何？颜色？我应该把它们放在哪里？更新了答案，因为它是一个公共属性，应该在导航器级别