react-navigation v5：抛出异常：createStackNavigator 不是函数

Question

我是 React 的新手，如果您需要更多信息，请告诉我，我可以提供。我正在尝试添加底部标签。我已尽我所能遵循反应导航文档。我也搜索了表格并发现了一些类似的问题，但仍然无法解决。谢谢你的帮助。

    import React from 'react';
    import { createStackNavigator } from "@react-navigation/stack";
    import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
    import Icon from 'react-native-ionicons';
    import Ionicons from 'react-native-vector-icons/Ionicons'
    import GreenScreen from "./GreenScreen";
    import RedScreen from "./RedScreen";

const GreenStack = createStackNavigator ();

function GreenStackScreen() {
    return (
        <GreenStack.Navigator>
            <GreenStack.Screen name="Green" component={GreenScreen}/>
            <GreenStack.Screen name="Red" component={RedScreen}/>
        </GreenStack.Navigator>
    );
}

const RedStack = createStackNavigator ();

function RedStackScreen() {

    return (
        <RedStack.Navigator>
            <RedStack.Screen name="Green" component={GreenScreen}/>
            <RedStack.Screen name="Red" component={RedScreen}/>
        </RedStack.Navigator>
    );
}


const Tab = createBottomTabNavigator();

export default function BottomTabs() {
    return (
            <Tab.Navigator
                screenOptions={({route}) => ({
                    tabBarIcon: ({color, size}) => {
                        let iconName;

                        if (route.name ==='Green') {
                            iconName='home'

                        }else if(route.name ==='Red'){
                            iconName='grid'
                        }
                        return <Ionicons name={iconName} size={20} />
                    }
                })} >
                <Tab.Screen name="Green" component={GreenStackScreen}/>
                <Tab.Screen name="Red" component={RedStackScreen} />
            </Tab.Navigator>
    )
}

Answer 1

你的输入有误 你应该像下面这样导入

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

底部导航器应该像下面这样导入

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';