Открыть ящик из заголовка — React Navigation 5x

Я пытаюсь открыть ящик с помощью кнопки в заголовке. Я передал реквизиты навигации из компонента StackNavigator в компонент Header.js. Он отображается правильно, и сам экран не имеет ошибок. Проблема возникает, когда я нажимаю TouchableOpacity внутри Header.js, он выдает эту ошибку. Я не могу понять, почему в этом случае навигация будет не определена.

Любая помощь будет оценена.

Ниже приведен код, который я использовал. Он состоит из 3 файлов — Main.js, StackNavigator.js и Header.js.

##StackNavigator.js
import React from 'react'
import { createStackNavigator } from '@react-navigation/stack'

import Feed from '../screens/Feed'
import Profile from '../screens/Profile'
import Header from '../screens/Header'



const Stack = createStackNavigator()

export default function StackNavigator() {
  return (
    <Stack.Navigator
      initialRouteName="Profile"
      headerMode="screen"
      screenOptions={{
        header: ({ scene, previous, navigation }) => (
          <Header scene={scene} previous={previous} navigation={navigation} />
        ),
      }}
    >
      <Stack.Screen name="Feed" component={Feed} options={{ headerTitle: 'Twitter' }} />
      <Stack.Screen name="Profile" component={Profile} options={{ headerTitle: 'Tweet' }} />
    </Stack.Navigator>
  )
}





# Header.js

export default function Header({ scene, previous, navigation }) {
  const { options } = scene.descriptor


  
  const title =
    options.headerTitle !== undefined
      ? options.headerTitle
      : options.title !== undefined
      ? options.title
      : scene.route.name

  return (
    <Appbar.Header theme={{ colors: { primary: theme.colors.surface } }}>
      {previous ? (
        <Appbar.BackAction onPress={navigation.pop} color={theme.colors.primary} />
      ) : (
        <TouchableOpacity
          onPress={() => {
            navigation.openDrawer()				///Problem is here			
          }}
        >
          <Avatar.Image
            size={40}
            source={{
              uri: 'https://xyz.zbc.png',
            }}
          />
        </TouchableOpacity>
      )}
      <Appbar.Content
        title={previous ? title : <MaterialCommunityIcons name="twitter" size={40} />}
      />
    </Appbar.Header>
  )
}


#Main.js

import * as React from 'react'

import { NavigationContainer } from '@react-navigation/native'
import DrawerNavigator from './navigations/DrawerNavigator'
import StackNavigator from './navigations/StackNavigator'

export default function Main() {
  return (
    <NavigationContainer>
      <StackNavigator>
        <DrawerNavigator></DrawerNavigator>
      </StackNavigator>
    </NavigationContainer>
  )
}

Ошибка: это ошибка, которую я получаю, когда нажимаю TouchableOpacity.

typeerror navigation.opendrawer is not a function

react-native typeerror react-navigation-v5
person Ramesh Joshi    schedule 16.05.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы должны обернуть StackNavigator в DrawerNavigator следующим образом.

return (
 <NavigationContainer>
   <DrawerNavigator>
    <StackNavigator/>
   </DrawerNavigator>
 </NavigationContainer>

)

Вы неправильно оборачиваете его в функцию Main.

person Awais Rana    schedule 16.05.2020