DrawerNavigator：更改文本颜色

Question

在 react-navigation 的 DrawerNavigator 上，是否可以更改项目的文本颜色和背景颜色？

默认情况下，配色方案如下所示：

由以下内容初始化：

export const Drawer = DrawerNavigator({
    dOne: {
      screen: Screen1,
    },
    dTwo: {
      screen: Screen2,
    }
  }
);

在屏幕 contentOptions 的 style 中设置 color 属性似乎没有效果。

我是否应该为每一行扩展新组件（现在标记为 "Primary"、"Secondary" 等）？还是有更简单的方法来对行的现有实现进行样式化？

Answer 1

您需要在 contentOptions 中使用 labelStyle 而不是 style。像这样：

contentOptions: {
  labelStyle: {
    fontFamily: 'SomeFont',
    color: 'white',
  },
}

Answer 2

google 搜索让我来到这里，但答案无法解决我的问题：我想更改文本颜色，但让它根据是否处于活动状态在不同颜色之间切换。 Chnangin the colorin labelstyle 有效地确保了无论状态如何，标签都是相同的颜色。所以我在抽屉的内容选项中使用了色调颜色。

    export const DrawerStack = DrawerNavigator(
  {... /drawer items}
 ,
  {
    contentOptions: {
      activeTintColor: colors.primary,
      activeBackgroundColor: 'transparent',
      inactiveTintColor: 'black',
      inactiveBackgroundColor: 'transparent',
      labelStyle: {
        fontSize: 15,
        marginLeft: 10,
      },
    },
    drawerWidth: SCREEN_WIDTH * 0.7,
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle',
  }
);

这样我就可以使用 activeTintColor and inactiveTintColor 选项根据抽屉项目是否处于活动状态来改变颜色。

Answer 3

对于使用 Navigation V5 的任何人，您都必须遵循以下方法并在初始化抽屉导航器时执行此操作

      <Drawer.Navigator
        drawerContentOptions={{
          activeTintColor: 'red',
          activeBackgroundColor: 'grey',
          inactiveTintColor: 'blue',
          inactiveBackgroundColor: 'white',
          labelStyle:{
            marginLeft:5
          }
        }}>
  </Drawer.Navigator>

更多道具可以参考文档 https://reactnavigation.org/docs/drawer-navigator/#drawercontentoptions

Answer 4

您可以呈现您的自定义 label:

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

// ...

<DrawerItem label={() => <Text style={{ color: '#fff' }}>White text</Text>} />;

https://reactnavigation.org/docs/drawer-navigator/#providing-a-custom-drawercontent

DrawerNavigator：更改文本颜色

DrawerNavigator: Change Text Color

reactjs

react-native

react-navigation