Alinear texto verticalmente en React-Native

1. Use las propiedades justifyContent y flex para alinear el texto verticalmente en el centro en React-Native
2. Use las propiedades CSS alignItems y flex para alinear el texto verticalmente en el centro en React-Native

En este artículo, aprenderemos a alinear el texto verticalmente en React-native. Usando los métodos a continuación, podemos alinear cualquier componente en React-native, no solo textos.

Use las propiedades justifyContent y flex para alinear el texto verticalmente en el centro en React-Native

Los usuarios pueden personalizar el CSS de cualquier componente y alinearlo verticalmente. Podemos usar las propiedades justifyContent y flex de CSS para alinear el texto verticalmente al centro o en la parte inferior o en cualquier otra posición.

En el siguiente ejemplo, hemos creado el contenedor utilizando el componente Ver, que contiene el componente Texto como componente secundario. Además, hemos creado el estilo center y lo hemos aplicado al componente View.

En el estilo center, hemos agregado el flex: 1, que representa cómo debe crecer el componente View. Como solo tenemos un único componente Ver con la propiedad flex de CSS, ocupará el 100 % de la altura, y justifyContent: center centrará el contenido del componente Ver considerando su tamaño de acuerdo con flex propiedad.

Código de ejemplo:

import { StyleSheet, Text, View } from "react-native";
export default function App() {
  return (
    <View style={styles.center}>
      <Text>This is vertically Center Text.</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: "center",
  },
});

Producción:

En el resultado anterior, los usuarios pueden ver que el texto está alineado en el centro verticalmente.

Use las propiedades CSS alignItems y flex para alinear el texto verticalmente en el centro en React-Native

Al igual que la propiedad CSS justifyContent, alignItems también nos permite centrar el texto verticalmente. Cuando usamos el valor center para la propiedad CSS alignItems, alinea los textos verticalmente al centro.

Los usuarios también deben usar la propiedad con la propiedad CSS alignItems para establecer cómo debe crecer el contenedor. En términos simples, la propiedad flex define la altura del componente, y de acuerdo con la altura, la propiedad alignItems alinea el texto.

En el siguiente ejemplo, hemos creado los dos componentes de “Texto” y aplicado el CSS “flexDirection: ‘fila’” al componente principal “Ver” para mostrar todos los componentes de “Texto” en una sola fila.

Además, en el componente padre View, hemos aplicado el estilo flex:1, que establece la altura del componente al 100%, y alignItems: center para centrar verticalmente los textos.

Código de ejemplo:

import { StyleSheet, Text, View } from "react-native";
export default function App() {
  return (
    <View style={{ flexDirection: "row", alignItems: "center", flex:1, }}>
      <View>
        {" "}
        <Text style={{fontSize:30,}}>Hi</Text>{" "}
      </View>
      <View>
        {" "}
        <Text style={{fontSize:30,}}>There</Text>{" "}
      </View>
    </View>
  );
}

Producción:

Si los usuarios desean alinear el texto en la parte inferior, deben cambiar los valores de la propiedad CSS alignItems a flex-end y el valor de cambio superior a flex-start.

Para alinear el texto en la parte inferior, los usuarios pueden seguir el siguiente código de ejemplo.

import { StyleSheet, Text, View } from "react-native";
export default function App() {
  return (
    <View style={{ flexDirection: "row", alignItems: "flex-end", flex: 1 }}>
      <Text style={{ fontSize: 30 }}>Text at bottom</Text>{" "}
    </View>
  );
}

Producción:

En el resultado anterior, los usuarios pueden ver que como hemos establecido el valor de alignItems en flex-end, alinea el texto en la parte inferior.

Los usuarios aprendieron varios métodos para alinear textos verticalmente en este artículo. Los usuarios pueden usar la propiedad CSS justifyContent o alignItems con la propiedad CSS flex.

Aquí, solo usamos la propiedad flex para establecer la altura del contenedor. Los usuarios también pueden intentar configurar la altura manualmente.