¿Cómo centrar un componente de vista en la pantalla?

View Component es el componente básico para crear la interfaz de usuario. Puede asignarse directamente a la vista nativa de diferentes plataformas, como UIView, <div>, android.view, etc. El componente de vista puede constar de componentes de vista anidados, así como otros componentes nativos (secundarios).

Enfoque: Para centrar un componente Vista en la pantalla, podemos usar dos enfoques: 

• Uso de flexbox: este es el método más utilizado para centrar cualquier componente/elemento. El modelo flexbox se introdujo para crear un diseño receptivo sin el uso de propiedades flotantes o de posicionamiento. Para centrar cualquier componente usando el cuadro flexible, simplemente necesitamos establecer la propiedad flexible como 1, junto con las propiedades de justificarAlign y alignItems.
• Uso de la propiedad de posición de CSS: la propiedad de posición se usa menos en React Native para centrar cualquier componente. El valor de la propiedad position se establece como «absoluto» para garantizar que se posicione en relación con el antepasado más cercano. Luego, las propiedades superior, inferior, izquierda y derecha se configuran como 0 junto con las propiedades allowAlign y alignItems, que se configuran como «centro».

Ejemplo: Veamos cómo centrar el componente Vista en la pantalla usando los enfoques anteriores a través de ejemplos:

• Paso 1: Abra su terminal e instale expo-cli con el siguiente comando.

  npm install -g expo-cli

 

• Paso 2: ahora cree un proyecto con el siguiente comando.

  expo init demo-app

• Paso 3: ahora ve a la carpeta de tu proyecto, es decir, aplicación de demostración

  cd demo-app

Estructura del proyecto: el directorio del proyecto debe tener el siguiente aspecto:

Ejemplo 1: uso de flexbox
Usaremos un solo componente de vista con componentes de texto anidados como sus elementos secundarios. Para centrar nuestro componente de vista, usaremos la propiedad flex, que está configurada en 1, junto con las propiedades allowAlign y alignItems (ambas configuradas para centrar ya que se requiere que el componente de vista esté centrado en la pantalla).

import React from "react";
import { View, Text, StyleSheet } from "react-native";
  
export default function App() {
  return (
    <View style={styles.centered}>
      <Text style={styles.title}>Center a View Component</Text>
      <Text style={styles.subtitle}>Using Flexbox</Text>
    </View>
  );
}
  
const styles = StyleSheet.create({
  centered: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ffc2c2",
  },
  title: {
    fontSize: 18,
    marginVertical: 2,
  },
  subtitle: {
    fontSize: 14,
    color: "#888",
  },
});

Paso para ejecutar la aplicación: Inicie el servidor usando el siguiente comando:

expo start

Producción:

Ejemplo 2: uso de la propiedad de posición de CSS
Usaremos un solo componente de vista con componentes de texto anidados como sus elementos secundarios. Para centrar nuestro componente Vista, usaremos la propiedad de posición, que se establece en absoluto. También usaremos los valores superior, inferior, izquierdo y derecho y los estableceremos en 0 (ya que se requiere que el componente Ver esté centrado en la pantalla) Como antes, también necesitaremos las propiedades de justificarAlign y alignItems con sus valores establecidos como centro .

import React from "react";
import { View, Text, StyleSheet } from "react-native";
  
export default function App() {
  return (
    <View style={styles.centered}>
      <Text style={styles.title}>Center a View Component</Text>
      <Text style={styles.subtitle}>Using CSS Position property</Text>
    </View>
  );
}
  
const styles = StyleSheet.create({
  centered: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ffc2c2",
  },
  title: {
    fontSize: 18,
    marginVertical: 2,
  },
  subtitle: {
    fontSize: 14,
    color: "#888",
  },
});

Paso para ejecutar la aplicación: Inicie el servidor usando el siguiente comando:

expo start

Producción: