@react-navigation/bottom-tabs 总是得到未定义的组件

Question

我正在尝试创建嵌套导航（带堆栈的底部选项卡），但是当我传递屏幕组件时

<Stack.Screen name="Home" component={HomeScreen} />

总是未定义。
我的完整代码：

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from './screens/home';
import Login from './screens/login';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

const horizontalAnimation = {
    cardStyleInterpolator: ({ current, layouts }) => {
        return {
            cardStyle: {
                transform: [
                    {
                        translateX: current.progress.interpolate({
                            inputRange: [0, 1],
                            outputRange: [layouts.screen.width, 0],
                        }),
                    },
                ],
            },
        };
    },
};

function HomeScreen({ navigation }) {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Home screen</Text>
            <Button
                title="Go to Details"
                onPress={() => navigation.navigate('Details')}
            />
        </View>
    );
}
function SettingsScreen({ navigation }) {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Settings screen</Text>
            <Button
                title="Go to Details"
                onPress={() => navigation.navigate('Details')}
            />
        </View>
    );
}

const StackNavigator = () => {
    return (
        <Stack.Navigator
            screenOptions={{
                    headerShown: false
            }}
        >
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen name="Login" component={SettingsScreen} options={horizontalAnimation} />
        </Stack.Navigator>
    );
}

const navigator = () => {
    return (
        <NavigationContainer>
            <Tab.Navigator>
                <Tab.Screen name="Index" component={StackNavigator} />
            </Tab.Navigator>
        </NavigationContainer>
    )
}

export default navigator;

package.json

"@react-native-community/masked-view": "^0.1.11",
"@react-navigation/bottom-tabs": "^6.0.1",
"@react-navigation/native": "^5.9.4",
"@react-navigation/stack": "^5.14.5",

结果：

Answer 1

您正在混合 6.x 和 5.x 版本的 @react-navigation 软件包：

"@react-navigation/bottom-tabs": "^6.0.1",
"@react-navigation/native": "^5.9.4",

升级到所有软件包的 6.x 版本，或者将 bottom-tabs 降级到 5.x

@react-navigation/bottom-tabs 总是得到未定义的组件

@react-navigation/bottom-tabs always getting undefined component

javascript

react-native

react-navigation

react-navigation-stack

react-navigation-bottom-tab