如何将 React Native 抽屉组件的头部图标（汉堡包图标）设置到右侧？

Question

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

- Giorgi Digmelashvili

---

你能提供任何代码吗？ - Chris Wong

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>

- Ladimidi

---

它可以工作。 我想知道为什么文档中没有这些信息。另外，在选项卡导航器的每个屏幕上添加抽屉导航器的建议方法是什么？ - Ritik Jangir

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>

对我来说起作用了。

- vijay kumar

Answer 3

这对我有用（React Navigation 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>
 

- Adel Benyahia

Answer 4

在标题 options 中使用 headerRight 属性。

帮助资料

- Xhirazi

---

谢谢，但那是针对自定义按钮和图标的，我想使用抽屉左侧已经具有的默认图标和按钮，只需要更改位置。 - Giorgi Digmelashvili