Alineación vertical en React Native

1. Alineación vertical en React Native
2. Un ejemplo de alineación vertical de un elemento en React Native

React Native es uno de los marcos más utilizados para desarrollar aplicaciones tanto en Android como en IOS. Cuando se trabaja en una aplicación React Native, la alineación es muy importante para que la aplicación sea más fácil de usar.

Alineación vertical en React Native

Hay dos tipos de alineación disponibles para cualquier elemento de React Native: Horizontal y Vertical. En la alineación vertical, hay tres propiedades disponibles: flex-start, Center y flex-end.

Este artículo nos enseñará cómo alinear un elemento React Native verticalmente. Además, facilitaremos el tema proporcionando los ejemplos y explicaciones necesarios.

Para alinear un elemento de React Native, solo necesitas hacer los siguientes cambios en el estilo:

React_Element_ID :{
    justifyContent: 'center', // For aligning vertically
    flex:1
}

Pongamos un ejemplo para que nos quede más claro.

Un ejemplo de alineación vertical de un elemento en React Native

En nuestro ejemplo a continuación, ilustramos cómo podríamos alinear una imagen verticalmente en una aplicación React Native. Veamos el siguiente código:

// Importing necessary packages
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Image, Text, View } from 'react-native';

// Our main function
export default function App() {

  return ( // Creating the UI elements.
    <View style={styles.container}>
      <Text>Simple Image</Text>
      <Image
        style={styles.img}
        source={{
          uri: 'https://st2.depositphotos.com/1031343/6062/v/450/depositphotos_60622807-stock-illustration-keep-it-simple-stamp.jpg',
        }}
      />
      <StatusBar style="auto" />
    </View>
  );
}

// Providing all necessary styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'flex-start',
    marginTop: 100,
  },
  img: {
    width: 100,
    height: 100,
  },
});

Ya ordenamos el propósito de todas las líneas necesarias con respecto a los pasos compartidos anteriormente en el ejemplo. Cuando ejecute la aplicación, obtendrá el siguiente resultado en su pantalla.

Producción:

Tenga en cuenta que el código de ejemplo compartido anteriormente se crea en React Native y usamos Expo-CLI para ejecutar la aplicación.