HOWTO · React Native

Alinear elementos en React Native

Este tutorial discutirá cómo alinear elementos en React Native.

Por Md Aminul IslamPublicado 2023-06-21Actualizado 2024-02-15
En esta página

En este artículo, veremos cómo podemos alinear elementos React-Native y hacerlos más fáciles de entender mediante el uso de ejemplos y explicaciones necesarios.

Alinear elementos en React Native

Hay dos tipos de alineación disponibles para alinear elementos: Horizontal y Vertical. Hay tres propiedades para la alineación horizontal: Superior, Centro y botón, y hay tres propiedades para la alineación Vertical: Izquierda, Centro y Derecha.

Usando el flex, podemos alinear fácilmente los elementos usando la sintaxis a continuación.

Sintaxis:

container: {flex: 1
       justifyContent: 'center', // For aligning vertically
       alignItems: 'center', // For aligning horizontally
    }

Use flex para alinear los elementos nativos de React

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

// Our main function
export default function App() {
  let img = './assets/image1.jpg';  // Declaring a variable that hold the image
                                    // location
  return (
      <View style = {styles.container}><Text>This is a body aligned center<
          /Text>
      <View style={styles.container01}>
        <Text>I am Left</Text>
      <Image style = {styles.img} source =
       {
         require(img)
       } />
        <StatusBar style="auto" />
      </View>
    <View style={styles.container02}>
        <Text>I am Center</Text>
      <Image style = {styles.img} source =
       {
         require(img)
       } />
        <StatusBar style="auto" />
      </View>
    <View style={styles.container03}>
        <Text>I am Right</Text>
      <Image style = {styles.img} source = {
        require(img)
      } />
        <StatusBar style="auto" /></View>
    </View>);
}

const styles = StyleSheet.create({
  // Providing some styles to the UI
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    margin: 50,
  },
  container01: {
    flex: 1,
    alignSelf: 'flex-start',
  },
  container02: {
    flex: 1,
    alignSelf: 'center',
  },
  container03: {
    flex: 1,
    alignSelf: 'flex-end',
  },
  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. En el ejemplo, el contenedor01, contenedor02 y contenedor03 es el elemento secundario de contenedor.

Cuando ejecute la aplicación, obtendrá el siguiente resultado en su pantalla.

Producción:

Alinear elementos en React Native

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

Sobre el autor

MD Aminul Islam

Aminul Is an Expert Technical Writer and Full-Stack Developer. He has hands-on working experience on numerous Developer Platforms and SAAS startups. He is highly skilled in numerous Programming languages and Frameworks. He can write professional technical articles like Reviews, Programming, Documentation, SOP, User manual, Whitepaper, etc.

Ver el perfil del autor
LinkedIn