Opciones generales y configuración de estilo para una App en React Native

Tiempo de lectura: < 1 minuto

Vamos a ver como configurar los estilos generales a una aplicación desarrollada en React Native.

Para ello, en la pantalla dónde se establecen las diferentes pantallas y rutas, dentro del StackNavigator, añadiremos el screenOptions.

El screenOptions, es un objeto que contiene las opciones de estilo y diseño para las pantallas en la navegación. Estas opciones se aplicarán a todas las pantallas dentro del StackNavigator a menos que se especifiquen opciones específicas para una pantalla en particular.

A continuación muestro un ejemplo:

 return (
    <NavigationContainer>

      <Stack.Navigator
        // headerMode="none" // Comentario opcional
        screenOptions={{
          headerStyle: {
            backgroundColor: "blue",
          },
          headerTitleStyle: {
            fontWeight: 'bold',
            color: "white",
            fontSize: 25,
          },
          cardStyle: {
            backgroundColor: '#f2f2f2',
          },
        }}
      
      initialRouteName="Login">
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Menu" component={MenuScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );

• headerStyle: Define el estilo del encabezado de la pantalla, como el fondo y la altura. En este caso, backgroundColor establece el color de fondo del encabezado.
• headerTitleStyle: Define el estilo del texto del título del encabezado. fontWeight establece la negrita del texto, color establece el color del texto, y fontSize establece el tamaño de la fuente en 25.
• cardStyle: Define el estilo de la tarjeta de la pantalla, que es el área principal de la pantalla donde se muestra el contenido. backgroundColor establece el color de fondo de la tarjeta, en este caso, un tono menos blanco (#f2f2f2).

Espero que les sirva de ayuda, ¡Qué tengan un feiz día!