未定义不是一个对象（评估'route.key'）反应导航

Question

我无法让堆栈导航器在本机反应中正常工作。我只是让空白堆栈导航器进入bottomTabsNavigator。我收到一个关于使用 route.key 的错误。即使我制作了一个简单的堆栈导航器，我仍然会收到此错误，并且似乎在任何地方都看不到任何在线提及它。任何帮助将不胜感激:)

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';

import Icon from 'react-native-vector-icons/MaterialIcons';
import CartScreen from './screens/CartScreen'
import RecipeScreen from './screens/RecipeScreen'
import ProfileScreen from './screens/ProfileScreen'

const Stack = createStackNavigator();


function Navigator() {

    return (

        <NavigationContainer>

            <Stack.Navigator
                screenOptions={({ route }) => ({
                    headerStyle: {
                        backgroundColor: 'salmon',
                    },
                    headerTintColor: 'white',
                    headerTitleStyle: {
                        fontWeight: 'bold',
                    },
                })}
                tabBarOptions={{
                    showLabel: false,
                    activeTintColor: 'white',
                    inactiveTintColor: 'pink',
                    style: {backgroundColor: 'salmon', height: 60,}
                }}
            >
                <Stack.Screen name="cart" component={CartScreen} />
                <Stack.Screen name="recipe" component={RecipeScreen} />
                <Stack.Screen name="profile" component={ProfileScreen} />

            </Stack.Navigator>
        </NavigationContainer>

    )

}

export default Navigator
        
        

解决方案是使用 yarn 而不是 npm

Answer 1

在这里，您在父屏幕和子屏幕中提供了相同的名称，因此您在屏幕声明中尝试使用不同的名称时遇到此错误。

Answer 2

我遇到了同样的问题，是安装了 @react-navigation/native 和 @react-navigation/stack 版本。 确保 2 个库在 package.json 文件中具有相同的版本。