Cambiar dinámicamente el color del navegador de pestaña inferior en React Native
Tengo una pregunta sobre React Native. Estoy usando el paquete @react-navigation/bottom-tabs
para tener una navegación inferior. Hoy implementé un cambiador de modo oscuro para mi aplicación. Tengo un problema con <Tab.Navigator>
. El problema es que cada opción de color está definida dentro de screenOptions
. ¿Es posible pasar props y cambiar los colores según el tema seleccionado por el usuario?
Déjame mostrarte lo que necesito. Cuando tengo habilitado el modo oscuro, toda la aplicación se ve así:
Cuando configuro el modo claro, la aplicación se ve así:
Solo necesito cambiar el color de la barra inferior a blanco y los iconos a negro en el modo claro. ¿Es posible?
Mi código es el siguiente:
const Tab = createBottomTabNavigator();
export default function MainContainer(){
const theme = useSelector((state) => state.themeReducer.theme);
return(
<ThemeProvider theme={theme}>
<NavigationContainer>
<Tab.Navigator
initialRouteName={skolboz}
screenOptions={({route}) => ({
tabBarIcon: ({focused, color, size}) => {
let iconName;
let rn = route.name;
if (rn === skolboz) {
iconName = focused ? 'home' : 'home-outline'
} else if (rn === newCase){
iconName = focused ? 'add' : 'add-outline'
} else if (rn === settings){
iconName = focused ? 'settings' : 'settings-outline'
}
return <Ionicons name={iconName} size={size} color={color} />
},
"tabBarActiveTintColor": "orange",
"tabBarInactiveTintColor": "#FFF",
"tabBarActiveBackgroundColor": "#000",
"tabBarInactiveBackgroundColor": "#000",
"tabBarLabelStyle": {
"fontSize": 10
},
"tabBarStyle": [
{
"display": "flex",
"borderTopWidth": 0,
"backgroundColor": "#000"
},
null
],
"headerStyle": [
{
"backgroundColor": "orange",
}
],
})}
>
<Tab.Screen name={skolboz} component={Skolboz} options={{headerTitle: 'SKOLBOZ', headerTintColor: "white"}} />
<Tab.Screen name={newCase} component={NewCase} options={{headerTitle: 'Pridať nový nedostatok', headerTintColor: "white"}} />
<Tab.Screen name={settings} component={Settings} options={{headerTitle: 'Nastavenia', headerTintColor: "white"}} />
</Tab.Navigator>
</NavigationContainer>
</ThemeProvider>
)
}
Estoy usando Redux para cambiar el color basado en el tema de la aplicación. Pasando props de esta manera:
${props => props.theme.PRIMARY_BACKGROUND_COLOR};
¿Cómo puedo hacer la misma lógica dentro de screenOptions
?
¡Gracias a todos por su respuesta!
davy.ai
La propiedad
screenOptions
encreateBottomTabNavigator
se utiliza para definir las opciones para la pantalla de pestañas. Puedes pasar propiedades ascreenOptions
usando el parámetroroute
. En tu caso, puedes pasar la propiedadtheme
ascreenOptions
y cambiar el color basado en el tema.Así es cómo puedes hacerlo:
Como puedes ver, he usado el operador ternario (
?
) para cambiar entre los modos del tema. Con este enfoque, puedes pasar cualquier propiedad ascreenOptions
y cambiar las opciones basándote en ellas.