如何将反应本机抽屉标题图标（“汉堡”）设置到右侧？

Question

我将抽屉设置在右侧，但屏幕标题中的汉堡包图标保持默认左侧，是否有任何属性可以通过将位置更改为右侧？我知道应该通过配置自定义标头来完成，但我不想过度设计我的小项目。

Answer 1

使用react-navigation v6，添加DrawerToggleButton，如下所示：

import { createDrawerNavigator, DrawerToggleButton } from '@react-navigation/drawer';

...

<Drawer.Navigator
    screenOptions={{
        drawerPosition: 'right',
        headerLeft: false,
        headerRight: () => <DrawerToggleButton />,
    }}> 
    //or in the options Drawer.Screen for just one screen
    <Drawer.Screen name="Home" component={Home}/>
    ...
</Drawer.Navigator>

Answer 2

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

<Drawer.Navigator
      screenOptions={{
        drawerPosition: 'right',
      }}>
      <Drawer.Screen
        name="Home"
        component={Home}
        options={{
          headerStyle: {
            backgroundColor: 'orange',
          },
          headerTintColor: 'black',
          headerLeft:false,
          headerRight: () => (
            <TouchableOpacity  onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
              <Icon name="menu" size={30} color="black" />
            </TouchableOpacity>
          ),
        }}
      />
      <Drawer.Screen name="Standings" component={Standings} />
    </Drawer.Navigator>

它对我有用。

Answer 3

这对我有用（反应导航 v6）

1.

npm i @expo/vector-icons

import Ionicons from "@expo/vector-icons/Ionicons";
import { createDrawerNavigator } from "@react-navigation/drawer";
import HomeScreen from "../screens/HomeScreen";
import AboutScreen from "../screens/AboutScreen";

const Drawer = createDrawerNavigator();
const defaultOpyions =({})=>({
//Show sandwith-menu icon at the right
headerRight: () => {
      return (
        <>
          <Pressable onPress={() => navigation.openDrawer()}>
            <Ionicons
              name={Platform.OS === "android" ? "md-menu" : "ios-menu"}
              size={32}
              color={"#000"}
              style={{ marginRight: 10 }}
            />
          </Pressable>
          <Text style={styles.headerRightTiteStyle}>{route.params.title}</Text>
        </>
      );
    },
 //Hide the left icon menu
 headerLeftContainerStyle: { display: "none" },
    headerRightContainerStyle: {
      display: "flex",
      justifyContent: "flex-start",
      flexDirection: "row-reverse",
      alignItems: "center",
      marginRight: 10,
    },
    //Hide the left menu Title
    headerTitleStyle: {
      display: "none",
    },
    drawerPosition: "right",
})
 <Drawer.Navigator screenOptions={defaultOptions}>
      <Drawer.Screen
        name="Home"
        options={{
          title: "Home",
          drawerIcon: ({ color, size, focuced }) => (
            <Ionicons
              name={focuced ? "home-outline" : "home"}
              size={size}
              color={color}
            />
          ),
        }}
        component={HomeScreen}
       
      />
      <Drawer.Screen
        name="About"
        options={{
          title: "About",
          drawerIcon: ({ color, size, focused }) => (
            <Ionicons
              name={
                focused ? "information-circle-outline" : "information-circle"
              }
              size={size}
              color={color}
            />
          ),
        }}
        component={AboutScreen}
       
      />
    </Drawer.Navigator>
 

Answer 4

在标题中使用

headerRight

属性

options

帮助材料

Answer 5

对于那些想要使用默认图标和按钮的人尝试这个组件。 这是例子：

import {DrawerToggleButton} from '@react-navigation/drawer';

  <Drawer.Navigator>
    <Drawer.Screen
      options={({navigation, route}) => ({
        headerLeft: () => {
          if (currentRoute === 'Home') {
            return <DrawerToggleButton />;
          } else {
            return ( <YourCustomComponent /> );
          }
        },
      })}
    />
  </Drawer.Navigator>