React navigation 5 - 从左到右移动抽屉项目图标答案

【问题标题】：React navigation 5 - Move drawer item icon from left to rightReact navigation 5 - 从左到右移动抽屉项目图标
【发布时间】：2020-03-21 19:42:28
【问题描述】：

我想在左边显示标签，在右边显示drawerIcon，但不知道怎么做。这是代码

<Drawer.Navigator
      drawerContentOptions={{
        contentContainerStyle: {
          backgroundColor: Colors.primary,
          height: "100%"
        },
        labelStyle: { color: "white" }
      }}
    >
      <Drawer.Screen
        name="HomeScreen"
        component={Home}
        options={{ drawerLabel: "Home" }}
      />
      <Drawer.Screen
        name="Channels"
        component={Channels}
        options={{
          drawerIcon: () => (
            <AntDesign
              name="pluscircle"
              size={20}
              color="white"
            />
          )
        }}
      />
    </Drawer.Navigator>

我想在左侧显示“频道”，在右侧显示加号图标

【问题讨论】：

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

【解决方案1】：

在您的图标上设置样式

style={{
  alignSelf: "center",
  position: "absolute",
  right: 5,
}}

所以你的 AntDesign 会是这样的

<AntDesign
  style={{
    alignSelf: "center",
    position: "absolute",
    right: 5,
  }}
  name="pluscircle"
  size={20}
  color="white"
/>

【讨论】：

【解决方案2】：

试试headerLeft 和headerRight

 headerLeft: () => (
      <Icon
        style={{padding: 10}}
        onPress={() => {
            consol.log("on press}}
        color={'white'}
        name="menu"
        size={30}
      />

【讨论】：

在 V4x 中，我们在任何组件中使用 static 来执行任何选项，例如 headerShown:false 现在在 V5 中我该如何使用它？
@yoel headerLeft?我猜这只是堆栈导航器的属性
组件内的@OliverD 接收props，然后使用props.navigation.setOptions({ headerShown: false })

【解决方案3】：

  <Drawer.Navigator
  drawerPosition="right"
  drawerType="slide"
  initialRouteName="Home"
  drawerContent={() => <SideBar />}>
  <Drawer.Screen name="Home" component={HomeScreen} />
  <Drawer.Screen name="NewIndex" component={NewIndex} />
</Drawer.Navigator>

【讨论】：