DrawerNavigator：更改文本颜色答案

【问题标题】：DrawerNavigator: Change Text ColorDrawerNavigator：更改文本颜色
【发布时间】：2017-12-09 09:01:25
【问题描述】：

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

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

通过以下方式初始化：

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

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

我是否应该为每一行扩展新组件（现在标记为“主要”、“次要”等）？或者有没有更简单的方法来样式化现有的行实现？

【问题讨论】：

标签： reactjs react-native react-navigation

【解决方案1】：

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

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

【讨论】：

感谢您的回答。文档中是否有指定这一点的地方？
您可以深入研究源代码。 github.com/react-community/react-navigation/blob/…

【解决方案2】：

谷歌搜索让我来到这里，但答案无法解决我的问题：我想更改文本颜色，但让它根据活动和非活动在不同颜色之间切换。使用 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 选项根据抽屉项是否处于活动状态来交替颜色。

【讨论】：

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

【讨论】：

红色应为小写字母activeTintColor: 'red',
@cmcodes 更新了，谢谢指出:)
我们可以在这里更改抽屉字体系列吗？ @GuruparanGiritharan

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

【讨论】：