在react-navigation's DrawerNavigator，有没有办法更改项目的文本颜色和背景颜色？
默认情况下，配色方案如下所示：
由以下初始化：
export const Drawer = DrawerNavigator({
dOne: {
screen: Screen1,
},
dTwo: {
screen: Screen2,
}
}
);
color在屏幕的contentOptions's内设置属性style似乎没有效果。
我是否应该为每一行扩展新组件（现在标记为“主要”、“次要”等）？或者是否有更简单的方法来对行的现有实现进行风格化？
谷歌搜索将我带到这里，但答案无法解决我的问题：我想更改文本颜色，但根据活动和或非活动状态在不同颜色之间切换。更改标签样式的颜色有效地确保标签无论状态如何都是相同的颜色。所以我在抽屉的内容选项中使用了色调颜色。
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。
而不是style您需要使用labelStyle内部 contentOptions。像这样：
contentOptions: {
labelStyle: {
fontFamily: 'SomeFont',
color: 'white',
},
}
对于使用 Navigation V5 的任何人，您都必须遵循以下方法并在初始化抽屉导航器时执行此操作
<Drawer.Navigator
drawerContentOptions={{
activeTintColor: 'red',
activeBackgroundColor: 'grey',
inactiveTintColor: 'blue',
inactiveBackgroundColor: 'white',
labelStyle:{
marginLeft:5
}
}}>
</Drawer.Navigator>
您可以参考文档以获取更多props https://reactnavigation.org/docs/drawer-navigator/#drawercontentoptions
您可以呈现您的自定义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