Question

在react-navigation＆＃39; DrawerNavigator上，有没有办法更改项目的文字颜色和背景颜色？

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

由以下内容初始化：

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

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

我应该为每一行扩展新组件（标记为＆＃34; Primary＆＃34;，＆＃34; Secondary＆＃34;等等）？或者是否有更简单的方法来对现有的行实现进行样式化？

Answer 1

谷歌搜索让我来到这里，但答案无法解决我的问题：我想改变文字颜色，但是根据活动和非活动而在不同颜色之间切换。颜色标签样式中的颜色有效地确保了标签颜色相同而不管状态如何。所以我在抽屉的内容选项中使用了色调。

    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 2

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

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

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：更改文本颜色

4 个答案: