React Native Hamburger onPress 问题

Posted 2023-04-13

【中文标题】React Native Hamburger onPress 问题

【英文标题】：React Native Hamburger onPress Issue

【发布时间】：2020-05-30 16:00:37

【问题描述】：

我试图通过在标题的汉堡包上包含 onPress() 来导航抽屉，但它不适用于 navigation.toggleDrawer() 函数。

代码如下：

import * as React from 'react';
import  Button, View  from 'react-native';
import  createDrawerNavigator  from '@react-navigation/drawer';
import  NavigationContainer  from '@react-navigation/native';
import  createStackNavigator  from '@react-navigation/stack';
import  Ionicons  from '@expo/vector-icons';

function HomeScreen( navigation ) 

  return (
    <View style= flex: 1, alignItems: 'center', justifyContent: 'center' >

      <Button
        onPress=() => navigation.navigate('Notifications')
        title="Go to notifications"
      />
    </View>
  );


function NotificationsScreen( navigation ) 
  return (
    <View style= flex: 1, alignItems: 'center', justifyContent: 'center' >
      <Button onPress=() => navigation.navigate('Home') title="Go back home" />
    </View>
  );


const Drawer = createDrawerNavigator();

function draw() 
  return (

      <Drawer.Navigator initialRouteName="Home" >
        <Drawer.Screen name="Home" component=HomeScreen 
        options=
        drawerIcon: () => <Ionicons name='md-home' size=30 color='#130f40' />,
          
         />
        <Drawer.Screen name="Notifications" component=NotificationsScreen
        options=
        drawerIcon: () => <Ionicons name='md-notifications' size=30 color='#130f40' />,
          
         />
      </Drawer.Navigator>

  );




const Stack = createStackNavigator();

function Def()
  return (
    <NavigationContainer>
    <Stack.Navigator>
    <Stack.Screen
        name="Home"
        component=draw
        options=
          title: 'My home',
          headerStyle: 
            backgroundColor: '#5f27cd',
          ,
          headerTintColor: '#fff',
          headerTitleStyle: 
            fontWeight: 'bold',
          ,

          headerLeft: () =>  (<Ionicons name='md-menu' style=paddingLeft: "20px" size=30 color='white' onPress=() => navigation.toggleDrawer() />),


        

      />
    </Stack.Navigator>
    </NavigationContainer>    
  )


export default Def;

我在 Ionicons 中使用 onPress() 函数添加了 navigation.toggleDrawer() 函数，但它不起作用。错误说导航没有定义。

【问题讨论】：

是错字吗？ toggelDrawer 和 toggleDrawer 拼写不同。

已编辑以更正 toggelDrawer 错字

抽屉导航的文档中是navigation.toggleDrawer();

【参考方案1】：

试试这个

 headerLeft: (navigation) =>  (<Ionicons name='md-menu' style=paddingLeft: "20px" size=30 color='white' onPress=() => navigation.toggleDrawer() />)

希望对你有帮助

【讨论】：

它不工作 :( 它现在给出以下错误 [docs.google.com/document/d/…