Alinear elementos en React Native

MD Aminul Islam 15 febrero 2024
  1. Alinear elementos en React Native
  2. Use flex para alinear los elementos nativos de React
Alinear elementos en React Native

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.

MD Aminul Islam avatar MD Aminul Islam avatar

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.

LinkedIn

Artículo relacionado - React Native

Artículo relacionado - React Native Element