未定義不是 object（評估“navigation.toggleDrawer”）

Question

我正在用我的堆棧導航器設置我的抽屜導航器。

菜單按鈕應該觸發我的抽屜，但每當我按下它時，我都會收到此錯誤。

我在 App() 中將“導航”作為輸入傳遞，並且我已經導入了抽屜導航庫......不知道這里發生了什么

這是我的 App.js。 有錯誤的行在代碼的最后

 import React from 'react'; import * as firebase from 'firebase' import { NavigationContainer, getFocusedRouteNameFromRoute } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import { createDrawerNavigator } from '@react-navigation/drawer'; import { DrawerContent} from '/Users/toxnd/Documents/MaisJogo/MaisJogoApp/navigation/DrawerContent' import Icon from 'react-native-vector-icons/MaterialCommunityIcons' import LoadingScreen from '/Users/toxnd/Documents/MaisJogo/MaisJogoApp/screens/LoadingScreen' import WelcomeScreen from '/Users/toxnd/Documents/MaisJogo/MaisJogoApp/screens/WelcomeScreen' import SignInScreen from '/Users/toxnd/Documents/MaisJogo/MaisJogoApp/screens/SignInScreen' import SignUpScreen from '/Users/toxnd/Documents/MaisJogo/MaisJogoApp/screens/SignUpScreen' import HomeScreen from '/Users/toxnd/Documents/MaisJogo/MaisJogoApp/screens/HomeScreen' import MyGamesScreen from '/Users/toxnd/Documents/MaisJogo/MaisJogoApp/screens/MyGamesScreen' import WishListScreen from '/Users/toxnd/Documents/MaisJogo/MaisJogoApp/screens/WishListScreen' function getHeaderTitle(route) { const routeName = getFocusedRouteNameFromRoute(route)?? 'Home'; switch (routeName) { case 'Home': return 'Home'; case 'Meus Jogos': return 'Meus Jogos'; case 'Quero Jogar': return 'Quero Jogar'; } } const Drawer = createDrawerNavigator(); function Home({ navigation, route }) { React.useLayoutEffect(() => { navigation.setOptions({ headerTitle: getHeaderTitle(route) }); }, [navigation, route]); return ( <Drawer.Navigator drawerContent={props => <DrawerContent {...props} /> }> <Drawer.Screen name="Home" component={HomeScreen} /> <Drawer.Screen name='Meus Jogos' component={MyGamesScreen} /> <Drawer.Screen name='Quero Jogar' component={WishListScreen} /> </Drawer.Navigator> ); } const Stack = createStackNavigator(); const App = ({navigation}) => { return ( <NavigationContainer> <Stack.Navigator initialRouteName="Loading" screenOptions={{ headerStyle: { backgroundColor: '#BB2CD9', }, headerTintColor: '#fff', headerTitleStyle: { fontWeight: 'bold', }, }}> <Stack.Screen options={{headerShown: false}} name='Loading' component={LoadingScreen} /> <Stack.Screen options={{ headerShown: false }} name='Welcome' component={WelcomeScreen} /> <Stack.Screen options={{headerShown: false}} name="Sign In" component={SignInScreen} /> <Stack.Screen options={{ headerShown: false }} name='Sign Up' component={SignUpScreen} /> <Stack.Screen name="Home" component={Home} options={{ headerLeft: () => ( <Icon.Button name='menu' size={25} backgroundColor="transparent" onPress={() => navigation.toggleDrawer()} /> ) }} /> </Stack.Navigator> </NavigationContainer> ); } export default App

Answer 1

我遇到了同樣的問題，但我做了一些未經驗證的快速修復。

import { getFocusedRouteNameFromRoute } from '@react-navigation/native' // undefined

export default (route) => {
    if(route.state && route.state.routeNames.length > 1){
        return route.state.routeNames.slice(-1)[0]
    }else{
        return
    }
}

需要您自擔風險使用它