React native 反应导航抽屉V5

我正在使用react导航版本5。 我有标签导航和抽屉导航一起

我正在尝试在标题中添加图标以打开/关闭抽屉：

这是我用于切换抽屉的自定义右标题：

const HeaderRight = ({ navigation }) => {   
    return (
      <View style={{flexDirection: 'row'}}>
        <TouchableOpacity
        onPress={ () =>{ navigation.toggleDrawer()}}>  //here is the problem
          <Image source={require('./assets/images/icons/drawer.png')}/>
        </TouchableOpacity>
      </View>
    );}

---

使用openDrawer（）代替toggleDrawer（）

步骤

import { DrawerActions } from '@react-navigation/native';

navigation.dispatch(DrawerActions.openDrawer());

如果上述功能不起作用，请尝试以下操作：

this.props.navigation.openDrawer()

更新代码

const HeaderRight = ({ navigation }) => {
  return (
    <View style={{ flexDirection: "row" }}>
      <TouchableOpacity
        onPress={() => {
          navigation.dispatch(DrawerActions.openDrawer());
        }}
      >
        <Image source={require("./assets/images/icons/drawer.png")} />
      </TouchableOpacity>
    </View>
  );
};

const HeaderRight=（{navigation}）=>{
返回(
{
dispatch（DrawerActions.openDrawer（））；
}}
>
);
};

---

请确保在使用前已导入该软件包

根据我的理解，我创建了一个简单的示例，希望对您有所帮助

您可以使用Stack.Screen的选项道具来呈现自定义的右或左按钮，在按钮组件中使用useNavigation钩子来获取导航道具并切换抽屉用户导航.分派（DrawerActions.toggleDrawer（））

import React，{useffect}来自“React”；
从“react native”导入{视图、文本、样式表、图像}；
从'@react navigation/native'导入{NavigationContainer，useNavigation，DrawerActions}；
从'@react导航/drawer'导入{createDrawerNavigator}；
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}；
从'@react navigation/stack'导入{createStackNavigator，HeaderBackButton，Header}；
从“/src/Home”导入Home；
从“反应本机手势处理程序”导入{TouchableOpacity}；
const Stack=createStackNavigator（）；
const Drawer=createDrawerNavigator（）；
const Tab=createBottomTabNavigator（）；
常量选项卡组件=（）=>{
返回(
{/*
*休息屏幕
*/}
);
};
常量抽屉组件=（）=>{
返回(
{/*
*休息屏幕
*/}
);
};
const HeaderLeft=（）=>{
const navigation=useNavigation（）；
返回(
{
dispatch（DrawerActions.openDrawer（））；
}}>
打开
{/*  */}
);
};
导出默认值（）=>{
返回(
}}
组件={DrawerComponent}
name=“出票人”
/>
{/*
*休息屏幕
*/}
);
};

如果

此.props.navigation.openDrawer（）

不起作用，您可以尝试使用navigation

import { useNavigation } from '@react-navigation/native';

在标题中

function（）

add

const navigation = useNavigation();

并将

navigation.openDrawer（）

添加到onPress

这是我的工作

headerRight:（）=>(
//这是一个按钮
{navigation.navigation.toggleDrawer（）}}
/>
),

我仍然收到一个错误：TypeError:undefined不是一个对象（评估'navigation.dispatch'）将您的package.json添加到此问题我已经从您的代码中复制了所有内容，但仍然收到相同的错误。尝试此->this.props.navigation.openDrawer（）而不是dispatch我收到此错误：undefined不是一个对象（评估'\u this.props'））设置页面是否包含抽屉？堆栈导航器应该是根导航器。堆栈/抽屉/选项卡的导航结构是什么？我有一个抽屉导航器，抽屉中的哪个屏幕是选项卡导航器。我想从每个选项卡的标题切换抽屉。将抽屉导航器放入堆栈导航器

this.props.navigation.openDrawer()

const HeaderRight = ({ navigation }) => {
  return (
    <View style={{ flexDirection: "row" }}>
      <TouchableOpacity
        onPress={() => {
          navigation.dispatch(DrawerActions.openDrawer());
        }}
      >
        <Image source={require("./assets/images/icons/drawer.png")} />
      </TouchableOpacity>
    </View>
  );
};

import React, {useEffect} from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
import {NavigationContainer, useNavigation, DrawerActions} from '@react-navigation/native';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createStackNavigator, HeaderBackButton, Header} from '@react-navigation/stack';
import Home from './src/home';
import {TouchableOpacity} from 'react-native-gesture-handler';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();

const TabComponent = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen component={Home} name="Home1" />
      <Tab.Screen component={Home} name="Home2" />
      {/*
       * Rest Screens
       */}
    </Tab.Navigator>
  );
};

const DrawerComponent = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen component={TabComponent} name="Main" />
      {/*
       * Rest Screens
       */}
    </Drawer.Navigator>
  );
};

const HeaderLeft = () => {
  const navigation = useNavigation();
  return (
    <View style={{flexDirection: 'row'}}>
      <TouchableOpacity
        onPress={() => {
          navigation.dispatch(DrawerActions.openDrawer());
        }}>
        <Text>Open</Text>
        {/* <Image source={require('./assets/images/icons/drawer.png')} /> */}
      </TouchableOpacity>
    </View>
  );
};

export default () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          options={{
            headerLeft: ({}) => <HeaderLeft />
          }}
          component={DrawerComponent}
          name="Drawer"
        />
        {/*
         * Rest Screens
         */}
      </Stack.Navigator>
    </NavigationContainer>
  );
};

import { useNavigation } from '@react-navigation/native';

const navigation = useNavigation();

        headerRight: () => (
          <HeaderButtons HeaderButtonComponent={HeaderButton}> // this is a cutom button
    <Item
      title="Favorite"
      iconName="ios-menu"
      onPress={() => {navigation.navigation.toggleDrawer() }}
    />
  </HeaderButtons>
        ),