Solución:
Una búsqueda en Google me llevó aquí, pero la respuesta no pudo resolver mi problema: quería cambiar el color del texto pero que cambiara entre diferentes colores dependiendo de si estaba activo o inactivo. Cambiar el estilo de etiqueta de colorin aseguró efectivamente que las etiquetas sean del mismo color independientemente del estado. Entonces usé los colores de tinte en las opciones de contenido del cajón.
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',
}
);
De esta manera puedo alternar colores dependiendo de si un elemento del cajón está activo o no usando el activeTintColor and inactiveTintColor opciones.
En lugar de style necesitas usar labelStyle dentro de contentOptions. Como esto:
contentOptions: {
labelStyle: {
fontFamily: 'SomeFont',
color: 'white',
},
}
Para cualquiera que esté usando Navigation V5, deberá seguir el método a continuación y hacerlo al inicializar el navegador del cajón.
<Drawer.Navigator
drawerContentOptions={{
activeTintColor: 'red',
activeBackgroundColor: 'grey',
inactiveTintColor: 'blue',
inactiveBackgroundColor: 'white',
labelStyle:{
marginLeft:5
}
}}>
</Drawer.Navigator>
Puede consultar los documentos para obtener más accesorios https://reactnavigation.org/docs/drawer-navigator/#drawercontentoptions