react-navigation v5：拋出異常：createStackNavigator 不是函數

Question

我對 React 很陌生，如果您需要更多信息，請告訴我，我可以提供。 我正在嘗試添加底部標簽。 我已盡我所能遵循 react-navigation 文檔。 我也搜索了表格並發現了一些類似的問題，但仍然無法解決。 感謝您的幫助。

    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';