如何在React Native抽屉导航中添加汉堡图标菜单

Hey there! Let's get that hamburger icon working to toggle your drawer menu. I'll break this down simply using your existing code.

Step 1: Add Required Imports #

First, you need to import TouchableOpacity (to make the icon clickable) to your existing imports. If you prefer a ready-made icon instead of a custom image, you can use react-native-vector-icons (I'll show both options below).

import React , {Component} from 'react'; 
import { View, Text, Image , StyleSheet, TouchableOpacity } from 'react-native'; 
import { createAppContainer } from 'react-navigation'; 
import { createDrawerNavigator } from 'react-navigation-drawer';
// Optional: Uncomment if using vector icons (install first with npm/yarn)
// import Ionicons from 'react-native-vector-icons/Ionicons';

Step 2: Add Hamburger Icon Globally (Recommended) #

Instead of repeating the icon code for every screen, we can set it once for all screens using defaultNavigationOptions in your drawer navigator. This keeps your code clean:

const MyDrawerNavigator = createDrawerNavigator({
  Home:{ screen:Home },
  Settings:{ screen:Settings },
  Profile:{ screen:Profile },
}, {
  // Add this block to set a global header with hamburger icon
  defaultNavigationOptions: ({ navigation }) => ({
    headerLeft: () => (
      // TouchableOpacity makes the icon interactive
      <TouchableOpacity 
        style={{ marginLeft: 15 }}
        onPress={() => navigation.toggleDrawer()} // Toggles drawer open/close
      >
        {/* Option 1: Use your custom hamburger image */}
        <Image 
          source={{uri:'http://imageholder.freeasphost.net/hamburger.png'}} 
          style={{ width: 24, height: 24 }} 
        />
        
        {/* Option 2: Use vector icon (uncomment if using Ionicons) */}
        {/* <Ionicons name="md-menu" size={24} color="#000" /> */}
      </TouchableOpacity>
    )
  })
});

Step 3: (Alternative) Add Icon to Individual Screens #

If you want to customize the icon per screen, update each screen's navigationOptions to include the headerLeft prop. Here's how to do it for the Home screen:

class Home extends React.Component{ 
  static navigationOptions = ({ navigation }) => ({ // Add navigation parameter here
    drawerLabel: 'Home',
    drawerIcon: ({ tintColor }) => (
      <Image source={{uri:'http://imageholder.freeasphost.net/home.png'}} style={[styles.icon, { tintColor: tintColor }]} />
    ),
    // Add hamburger icon to this screen's header
    headerLeft: () => (
      <TouchableOpacity 
        style={{ marginLeft: 15 }}
        onPress={() => navigation.toggleDrawer()}
      >
        <Image 
          source={{uri:'http://imageholder.freeasphost.net/hamburger.png'}} 
          style={{ width: 24, height: 24 }} 
        />
      </TouchableOpacity>
    )
  }); 

  render() { 
    return( 
      <View> 
        <Text> Welcome to Home screen</Text> 
      </View> 
    ); 
  } 
}

Full Modified Code #

Here's your complete code with the global hamburger icon setup:

import React , {Component} from 'react'; 
import { View, Text, Image , StyleSheet, TouchableOpacity } from 'react-native'; 
import { createAppContainer } from 'react-navigation'; 
import { createDrawerNavigator } from 'react-navigation-drawer';

class Home extends React.Component{ 
  static navigationOptions = { 
    drawerLabel: 'Home',
    drawerIcon: ({ tintColor }) => (
      <Image source={{uri:'http://imageholder.freeasphost.net/home.png'}} style={[styles.icon, { tintColor: tintColor }]} />
    ),
  }; 

  render() { 
    return( 
      <View> 
        <Text> Welcome to Home screen</Text> 
      </View> 
    ); 
  } 
} 

class Profile extends React.Component{ 
  static navigationOptions = { 
    drawerLabel: 'Profile',
    drawerIcon: ({ tintColor }) => (
      <Image source={{uri:'http://imageholder.freeasphost.net/profile.png'}} style={[styles.icon, { tintColor: tintColor }]} />
    ),
  }; 

  render() { 
    return( 
      <View> 
        <Text>Welcome to Profile screen</Text> 
      </View> 
    ); 
  } 
} 

class Settings extends React.Component{ 
  static navigationOptions = { 
    drawerLabel: 'Settings',
    drawerIcon: ({ tintColor }) => (
      <Image source={{uri:'http://imageholder.freeasphost.net/settings.png'}} style={[styles.icon, { tintColor: tintColor }]} />
    ),
  }; 

  render() { 
    return( 
      <View> 
        <Text>Welcome to Settings Screen</Text> 
      </View> 
    ); 
  } 
} 

const MyDrawerNavigator = createDrawerNavigator({ 
  Home:{ screen:Home }, 
  Settings:{ screen:Settings }, 
  Profile:{ screen:Profile }, 
}, {
  defaultNavigationOptions: ({ navigation }) => ({
    headerLeft: () => (
      <TouchableOpacity 
        style={{ marginLeft: 15 }}
        onPress={() => navigation.toggleDrawer()}
      >
        <Image 
          source={{uri:'http://imageholder.freeasphost.net/hamburger.png'}} 
          style={{ width: 24, height: 24 }} 
        />
      </TouchableOpacity>
    )
  })
}); 

const MyApp = createAppContainer(MyDrawerNavigator); 

export default class App extends Component { 
  render() { 
    return( 
      <MyApp/> 
    ); 
  } 
} 

const styles = StyleSheet.create({ 
  icon: { 
    width: 24, 
    height: 24, 
  }, 
});

Quick Tips: #

• navigation.toggleDrawer() handles both opening and closing the drawer, so you don't need separate functions for each action.
• If using vector icons, install them first with npm install react-native-vector-icons (newer React Native versions auto-link, but for older versions run react-native link react-native-vector-icons).
• Adjust the marginLeft, icon size, or color to match your app's design.

内容的提问来源于stack exchange，提问作者Hamish