reactjs - React Native：创建 StackNavigator 并将其传递给底部选项卡导航器

问题描述

我试图在底部导航器选项卡项上使用新创建的导航器堆栈，以便可以使用它而不是常规屏幕。

到目前为止，我创建了新的堆栈导航器：

const FavoritesNav = () => {
return(
    <FavoritesStack.Navigator
        screenOptions={{
            headerStyle: {
                backgroundColor: Colors.primaryColor,
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                fontSize: 17
            }
        }}>
        <FavoritesStack.screen
            name="Favorite"
            component={FavoritesScreen}
        />
        <FavoritesStack.screen
            name="MealDetail"
            component={MealDetailScreen}
        />
    </FavoritesStack.Navigator>
);

};

然后，我尝试将其传递给底部导航器的一项：

<MealsFavTabNavigator.Screen
                    name="Favorites"
                    component={FavoritesNav}
                    options={{
                        tabBarIcon: ({ focused, color, size }) => (
                            <Ionicons name="ios-star" size={25} color={focused ? "tomato" : "black"} />
                        )
                    }}
                />

这给我一个错误：A navigator can only contain 'Screen' components as its diection children (found [object, object])

如何将新创建的堆栈传递到底部选项卡导航？

PS。这是我的完整代码：

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

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

import { Platform } from 'react-native';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

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 =
    Platform.OS === 'android'
        ? createMaterialBottomTabNavigator()
        : createBottomTabNavigator();

const getNavigationOptions = () => {
    if (Platform.OS === 'ios') {
        // Props for the ios navigator
        return {
            labeled: false,
            initialRouteName: 'Meals',
            tabBarOptions: {
                activeTintColor: 'tomato',
                inactiveTintColor: 'black',
            },
        };
    }
    // Props for android
    return {
        initialRouteName: 'Favorites',
        activeColor: 'tomato',
        inactiveColor: 'black',
        barStyle: { backgroundColor: Colors.primaryColor },
        shifting: true
    };
};

const MealsTabNav = () => {
    return (
        <NavigationContainer>
            <MealsFavTabNavigator.Navigator {...getNavigationOptions()} >
                <MealsFavTabNavigator.Screen
                    name="Meals"
                    component={MealsNavigator}
                    options={{
                        tabBarIcon: ({ focused, color, size }) => (
                            <Ionicons name="ios-restaurant" size={25} color={focused ? "tomato" : "black"} />
                        )
                    }}
                />
                <MealsFavTabNavigator.Screen
                    name="Favorites"
                    component={FavoritesNav}
                    options={{
                        tabBarIcon: ({ focused, color, size }) => (
                            <Ionicons name="ios-star" size={25} color={focused ? "tomato" : "black"} />
                        )
                    }}
                />
            </MealsFavTabNavigator.Navigator>
        </NavigationContainer>
    );
};

const FavoritesStack = createStackNavigator();

const FavoritesNav = () => {
return(
    <FavoritesStack.Navigator
        screenOptions={{
            headerStyle: {
                backgroundColor: Colors.primaryColor,
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                fontSize: 17
            }
        }}>
        <FavoritesStack.screen
            name="Favorite"
            component={FavoritesScreen}
        />
        <FavoritesStack.screen
            name="MealDetail"
            component={MealDetailScreen}
        />
    </FavoritesStack.Navigator>
);

};

export default MealsTabNav;

感谢那些愿意提供帮助的人。

标签： reactjsreact-nativeexporeact-navigation

reactjs - React Native：创建 StackNavigator 并将其传递给底部选项卡导航器

问题描述

解决方案

推荐阅读