Блог

Главная - Вопросы по программированию - Неопределенный не является объектом (вычисляется ‘navigation.toggleDrawer’)

Неопределенный не является объектом (вычисляется ‘navigation.toggleDrawer’)

#javascript #react-native #react-navigation

#javascript #react-native #реакция-навигация

Вопрос:

Я настраиваю свой навигатор ящика с помощью моего навигатора стека.

Кнопка меню должна запускать мой ящик, но всякий раз, когда я нажимаю на нее, я получаю эту ошибку.

Я передал ‘navigation’ в качестве входных данных в 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

Ответ №1:

У меня возникла та же проблема, но я быстро исправил ее, которая не проверена.

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

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

Используйте его на свой страх и риск