Reactjs 抽屉提示：更改文本颜色

在

react导航

的

DrawerNavigator

上，是否有方法更改项目的文本颜色和背景颜色

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

由以下内容初始化：

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

在屏幕的

内容选项

的

样式

中设置

颜色

属性似乎没有效果

---

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

而不是

style

，您需要在contentOptions中使用

labelStyle

。像这样：

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

---

谷歌搜索把我带到了这里，但答案无法解决我的问题：我想更改文本颜色，但让它根据活动和非活动在不同颜色之间切换。Chnangin 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和inactiveTintColor

选项来交替颜色。

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

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

你可以参考文档了解更多道具

---

谢谢您的回答。文档中是否有指定位置？您可以深入了解源代码。红色应该是小写的

activeTintColor:“红色”

@cmcodes更新了它，谢谢你指出：）我们可以在这里更改抽屉字体系列吗@古鲁帕兰吉塔兰