当我点击图标时打开抽屉反应导航版本 5

Posted 2023-04-13

【中文标题】当我点击图标时打开抽屉反应导航版本 5

【英文标题】：Open the drawer when I click the icon react navigation version 5

【发布时间】：2020-08-09 01:28:43

【问题描述】：

当我单击 headerLeft 部分中的图标时，我想打开抽屉，我也尝试过 this.props.navigation.dispatch 但它也会出错，navigation.dispatch 也会出错

下面的代码没有给出错误但没有打开抽屉

import  DrawerActions  from '@react-navigation/native';
import  NavigationContainer  from '@react-navigation/native';
import  createDrawerNavigator  from '@react-navigation/drawer';
import  createStackNavigator  from '@react-navigation/stack';
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();

export default class App extends Component 

  createHomeStack = () =>
    <Stack.Navigator>
      <Stack.Screen
      initialRouteName="login"
      headerMode="screen"
        name="main"
        children= this.createBottomTabs
        options=
          title: "Fitbit",
         headerLeft: () => (

            <Icon
              name="menu"
              size=25
              color="#D4AF37"
              onPress=() => DrawerActions.openDrawer()  
            />

          )  />

    </Stack.Navigator>

  createDrawer = (navigation) =>

    <Drawer.Navigator initialRouteName="Main" >

      <Drawer.Screen name="Main" component=Main />
      <Drawer.Screen name="Contacts" component=Food />>
    </Drawer.Navigator>

  render() 
    return ( 
  <NavigationContainer>
        this.createHomeStack()
     </NavigationContainer>

    );
  

【参考方案1】：

为了实现这一点，您需要按照文档所述将堆栈包装到抽屉中。

Documentation here

我可能会使用这样的东西：

编辑： 添加完整代码

import React,Component from 'react'
import  NavigationContainer  from '@react-navigation/native'
import  createDrawerNavigator  from '@react-navigation/drawer'
import  createStackNavigator  from '@react-navigation/stack'
import  View  from 'react-native'
import Icon from 'react-native-vector-icons/dist/Feather'
const Drawer = createDrawerNavigator()
const Stack = createStackNavigator()

const Main = () => <View></View>
const Food = () => <View></View>

const Home = ( navigation ) => (
    <Stack.Navigator>
        <Stack.Screen name="Main" component=Main options=
            headerLeft: () => <Icon
                name="menu"
                size=25
                color="#D4AF37"
                onPress=() => navigation.openDrawer()
              />
       />
    </Stack.Navigator>
)


const DrawerNavigator = () => (
    <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component=Home />
        <Drawer.Screen name="Contacts" component=Food />
      </Drawer.Navigator>
)

export default props => (
    <NavigationContainer>
        <DrawerNavigator />
    </NavigationContainer>
)

【讨论】：

这不起作用，它在 const 中给出错误，当我删除它时，它在导出默认道具时给出错误

我为你添加了完整的代码......它在我的设备上运行良好。

是的。但底部的标签会消失。有没有办法将这两个功能结合在一起？

【参考方案2】：

你需要导入DrawerActions

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

你可以打开使用

navigation.dispatch(DrawerActions.openDrawer());