如何将 react-native 抽屉标题图标（'汉堡'）设置到右侧？答案

【问题标题】：How to set react-native drawer header icon ('Hamburger') to the right side?如何将 react-native 抽屉标题图标（'汉堡'）设置到右侧？
【发布时间】：2021-08-22 02:43:28
【问题描述】：

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

【问题讨论】：

你能提供任何代码吗？

标签： react-native navigation-drawer react-native-navigation react-navigation-drawer

【解决方案1】：

在标题options 中使用headerRight 属性

helping material

【讨论】：

谢谢，但这是自定义按钮和图标，但我想使用抽屉左侧已有的默认图标和按钮，只需更改位置

【解决方案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>

它对我有用。

【讨论】：