Vertikale Ausrichtung in React Native

React Native ist eines der am häufigsten verwendeten Frameworks für die Entwicklung von Apps sowohl für Android als auch für IOS. Bei der Arbeit an einer React Native-App ist die Ausrichtung sehr wichtig, um die App benutzerfreundlicher zu machen.

Für jedes React Native-Element stehen zwei Arten der Ausrichtung zur Verfügung: horizontal und vertikal. Bei der vertikalen Ausrichtung stehen drei Eigenschaften zur Verfügung: flex-start, Center und flex-end.

Die vertikale Ausrichtung ist in React Native ein entscheidender Aspekt des UI-Designs, denn sie ermöglicht es Entwicklern, die Positionierung von Elementen entlang der vertikalen Achse zu steuern. Dieser Leitfaden untersucht verschiedene Methoden zur vertikalen Ausrichtung und bietet ausführliche Erklärungen sowie Beispielcode für jeden Ansatz.

Flexbox verwenden, um ein Element in React Native vertikal auszurichten

Flexbox ist ein Layoutmodell, mit dem Sie dynamische und flexible Layouts erstellen können. Es funktioniert, indem es den verfügbaren Platz auf die Elemente innerhalb eines Containers verteilt, sodass Sie leicht verschiedene Ausrichtungen und Verteilungen von Elementen erreichen können.

Flexbox ist besonders nützlich, um sowohl die horizontale als auch die vertikale Ausrichtung zu handhaben, was es zu einem wichtigen Werkzeug für die Erstellung responsiver Designs macht.

In React Native kann die vertikale Ausrichtung mithilfe der Eigenschaft flex zusammen mit alignItems oder justifyContent erreicht werden. Mit diesen Eigenschaften können Sie steuern, wie Elemente innerhalb ihres übergeordneten Containers entlang der vertikalen Achse ausgerichtet werden.

Um ein React Native-Element auszurichten, müssen Sie lediglich die folgenden Änderungen am style vornehmen:

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

Machen wir es uns mit einem Beispiel klarer. In unserem Beispiel unten haben wir gezeigt, wie wir ein Bild in einer React Native-App vertikal ausrichten können.

// 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,
  },
});

In dem Programm importieren wir zunächst die notwendigen Komponenten und Module aus den Paketen react-native und expo-status-bar.

In der Hauptfunktion App gibt es eine View-Komponente, die als Container für andere UI-Elemente dient. Sie erhält einen Stil, der durch styles.container definiert ist.

Innerhalb der View gibt es eine Text-Komponente, die den Text "Simple Image" anzeigt.

Nach der Text-Komponente folgt eine Image-Komponente, die ein Bild anzeigt. Sie erhält einen Stil, der durch styles.img definiert ist, und die Quelle des Bildes wird mit einer URI angegeben.

Als Nächstes wird die StatusBar-Komponente aus expo-status-bar verwendet, um das Erscheinungsbild der Statusleiste am oberen Bildschirmrand zu steuern.

Anschließend enthält das styles-Objekt die CSS-Stile für die Komponenten.

styles.container definiert die Stile für den Hauptcontainer. Es verwendet Flexbox, damit dieser den gesamten verfügbaren Platz einnimmt, setzt die Hintergrundfarbe auf Weiß, zentriert seine Kindelemente sowohl horizontal als auch vertikal und fügt oben einen Abstand von 100 Einheiten hinzu.

Schließlich definiert styles.img die Stile für das Bild. Es setzt die Breite und die Höhe jeweils auf 100 Einheiten.

Ausgabe:

Insgesamt erstellt dieser Code eine React Native-Anwendung mit einer einfachen Benutzeroberfläche, die aus einem Textelement und einem Bild besteht. Das Bild wird aus einer entfernten URI geladen, und die Komponenten werden mit CSS-ähnlichen Stilen gestaltet.

Die Eigenschaft alignSelf verwenden, um ein Element in React Native vertikal auszurichten

In React Native wird die Eigenschaft alignSelf verwendet, um die vom übergeordneten Container festgelegte Standardausrichtung zu überschreiben. Sie ermöglicht es Ihnen anzugeben, wie sich ein einzelnes Element an der Querachse ausrichten soll, die senkrecht zur Richtung der Hauptachse verläuft.

Die Eigenschaft alignSelf akzeptiert verschiedene Werte:

Die Eigenschaft alignSelf ermöglicht es einzelnen Elementen, die Eigenschaft align-items ihres übergeordneten Elements zu überschreiben. Diese Methode ist nützlich, wenn Sie bestimmte Elemente anders ausrichten möchten als ihren Container.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Text>Aligned Content 1</Text>
      </View>
      <View style={[styles.box, {alignSelf: 'flex-end'}]}>
        <Text>Aligned Content 2</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'lightblue',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Ausgabe:

Wir haben zwei View-Komponenten innerhalb des Hauptcontainers. Beide haben den Stil box, der ihr Erscheinungsbild definiert.

Die zweite View hat einen zusätzlichen Stil {alignSelf: 'flex-end'}. Dies überschreibt die vertikale Ausrichtung und positioniert sie am unteren Rand.

Im styles-Objekt gibt es einen container und eine box.

Der Stil container wird auf das äußerste View-Element angewendet. Er setzt flex: 1, damit der Container den gesamten verfügbaren Platz einnehmen kann.

Er verwendet außerdem justifyContent: 'center' und alignItems: 'center', um seine Kindelemente horizontal und vertikal zu zentrieren.

Der Stil box wird auf die Boxen angewendet, die Text enthalten. Er setzt die Breite und die Höhe auf 100 Einheiten, gibt ihnen einen hellblauen Hintergrund und zentriert den Text innerhalb der Box sowohl horizontal als auch vertikal.

Zusammenfassend erstellt dieser Code eine React Native-Anwendung mit zwei ausgerichteten Boxen, die Textinhalt enthalten. Die erste Box wird innerhalb des Containers zentriert, während die zweite Box aufgrund des speziell auf sie angewendeten Stils am Ende (flex-end) des Containers ausgerichtet wird.

Absolute Positionierung verwenden, um ein Element in React Native vertikal auszurichten

In React Native werden Elemente in der Regel mithilfe des Flexbox-Layouts positioniert, das eine flexible und responsive Möglichkeit bietet, Elemente innerhalb eines Containers anzuordnen. Es gibt jedoch Situationen, in denen Sie mehr Kontrolle über die Positionierung benötigen, und hier kommt die absolute Positionierung ins Spiel.

Bei der absoluten Positionierung wird ein Element aus dem normalen Fluss des Dokuments entfernt und anhand von Koordinaten positioniert, die in Bezug auf seinen nächsten positionierten Vorfahren angegeben werden. Wenn kein Vorfahre eine angegebene Position hat, wird der anfängliche umschließende Block (in der Regel das Ansichtsfenster) als Bezug verwendet.

Um die absolute Positionierung in React Native zu verwenden, müssen Sie die Stileigenschaft position: 'absolute' zusammen mit den Eigenschaften top, right, bottom und left verwenden, um die Koordinaten anzugeben. Hier ist ein Beispiel:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Text style={styles.text}>Top Left</Text>
      </View>
      <View style={[styles.box, styles.absoluteTopRight]}>
        <Text style={styles.text}>Top Right</Text>
      </View>
      <View style={[styles.box, styles.absoluteBottomLeft]}>
        <Text style={styles.text}>Bottom Left</Text>
      </View>
      <View style={[styles.box, styles.absoluteBottomRight]}>
        <Text style={styles.text}>Bottom Right</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'lightblue',
    borderWidth: 1,
    borderColor: 'blue',
    margin: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: 'white',
    fontWeight: 'bold',
  },
  absoluteTopRight: {
    position: 'absolute',
    top: 0,
    right: 0,
  },
  absoluteBottomLeft: {
    position: 'absolute',
    bottom: 0,
    left: 0,
  },
  absoluteBottomRight: {
    position: 'absolute',
    bottom: 0,
    right: 0,
  },
});

export default App;

Ausgabe:

In diesem Beispiel haben wir eine übergeordnete View mit flex: 1, damit sie den gesamten Bildschirm einnimmt. Darin befinden sich vier untergeordnete View-Komponenten (box) mit unterschiedlichen absoluten Positionen.

Die erste box wird mit dem Standard-Flexbox-Layout positioniert. Die zweite box hat dann position: 'absolute', top: 0 und right: 0, wodurch sie in der oberen rechten Ecke platziert wird.

Die dritte box wird mithilfe von position: 'absolute', bottom: 0 und left: 0 in der unteren linken Ecke positioniert. Schließlich befindet sich die vierte box mithilfe von position: 'absolute', bottom: 0 und right: 0 in der unteren rechten Ecke.

Mit der absoluten Positionierung lässt sich die vertikale Ausrichtung von Elementen präzise steuern. Diese Methode ist besonders nützlich, wenn Sie Elemente relativ zu ihrem übergeordneten Element oder zum Bildschirm ausrichten müssen.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Text>Aligned Content 1</Text>
      </View>
      <View style={[styles.box, {position: 'absolute', bottom: 0}]}>
        <Text>Aligned Content 2</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'lightblue',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Ausgabe:

Ähnlich wie im Beispiel zur Eigenschaft alignSelf haben wir zwei View-Komponenten innerhalb des Hauptcontainers. Beide haben den Stil box, der ihr Erscheinungsbild definiert.

Die zweite View hat einen zusätzlichen Stil {position: 'absolute', bottom: 0}. Dies positioniert sie am unteren Rand des Containers.

Insgesamt erstellt dieser Code eine React Native-Anwendung mit zwei ausgerichteten Boxen, die Textinhalt enthalten. Die erste Box wird innerhalb des Containers zentriert, während die zweite Box mithilfe der absoluten Positionierung am unteren Rand des Containers ausgerichtet wird.

Fazit

Dieser Leitfaden untersucht verschiedene Methoden, um in React Native-Anwendungen eine vertikale Ausrichtung zu erreichen. Drei Haupttechniken werden behandelt:

1. Flexbox verwenden: Flexbox ist ein leistungsstarkes Layoutmodell, das dynamische und flexible Anordnungen von Elementen innerhalb von Containern ermöglicht. Es bietet Eigenschaften wie flex, alignItems und justifyContent, um sowohl die horizontale als auch die vertikale Ausrichtung leicht zu steuern.
2. Die Eigenschaft alignSelf nutzen: Diese Eigenschaft ermöglicht es einzelnen Elementen, die Ausrichtungseinstellungen ihres übergeordneten Elements zu überschreiben. Sie bietet Optionen wie auto, flex-start, flex-end, center, stretch und baseline für eine präzise Steuerung der Elementausrichtung.
3. Absolute Positionierung einsetzen: Die absolute Positionierung ist eine Technik, die ein Element aus dem normalen Fluss des Dokuments entfernt und eine präzise Steuerung seiner Platzierung mithilfe von Koordinaten relativ zu seinem nächsten positionierten Vorfahren ermöglicht.

Jede Methode wird ausführlich erklärt, mit Beispielcode-Ausschnitten, die veranschaulichen, wie sie in React Native-Anwendungen umgesetzt werden kann. Entwickler können die am besten geeignete Methode entsprechend ihren spezifischen Anforderungen und Gestaltungsvorlieben wählen.

Durch den Einsatz dieser Techniken können sie sicherstellen, dass UI-Elemente genau entlang der vertikalen Achse ausgerichtet werden, was zu einer gelungenen und benutzerfreundlichen mobilen App beiträgt.