如何将react-native抽屉header图标（'Hamburger'）设置到右侧？

Question

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

Answer 1

在headeroptions

中使用headerRight属性

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>

如何将react-native抽屉header图标（'Hamburger'）设置到右侧？

How to set react-native drawer header icon ('Hamburger') to the right side?

react-native

navigation-drawer

react-native-navigation

react-navigation-drawer