DrawerNavigator：更改文本颜色

Question

在react-navigation的DrawerNavigator，有没有办法来改变该项目的文本颜色和背景颜色？

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

通过以下方式初始化：

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

设置color内财产屏幕的contentOptions的style不会出现有效果。

我是否应该为每行扩展新的组件（现在标记为“主要”，“次要”等）？还是有一种更简单的方式来对行的现有实现进行样式化？

Answer 1

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

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

Answer 2

谷歌搜索使我落在这里，但答案无法解决我的问题：我想更改文本颜色，但要根据有效与否将其切换为不同的颜色。更改colorin标签样式可以有效地确保标签是相同颜色，而与状态无关。因此，我在抽屉的内容选项中使用了色彩。

    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选项是否处于活动状态来替换颜色。