Vertikale Ausrichtung in React Native

1. Vertikale Ausrichtung in React Native
2. Ein Beispiel für die vertikale Ausrichtung eines Elements in React Native

React Native ist eines der am häufigsten verwendeten Frameworks für die Entwicklung von Apps auf Android und IOS. Bei der Arbeit an einer React Native App ist das Alignment sehr wichtig, um die App benutzerfreundlicher zu machen.

Vertikale Ausrichtung in React Native

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

In diesem Artikel erfahren Sie, wie Sie ein React Native-Element vertikal ausrichten. Außerdem werden wir das Thema vereinfachen, indem wir notwendige Beispiele und Erklärungen bereitstellen.

Um ein React-Native-Element auszurichten, müssen Sie lediglich folgende Änderungen am Stil vornehmen:

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

Lassen Sie uns ein Beispiel haben, um es uns klarer zu machen.

Ein Beispiel für die vertikale Ausrichtung eines Elements in React Native

In unserem Beispiel unten haben wir gezeigt, wie wir ein Bild in einer React Native-App vertikal ausrichten können. Schauen wir uns den folgenden Code an:

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

Wir haben bereits den Zweck aller erforderlichen Zeilen in Bezug auf die oben im Beispiel geteilten Schritte befohlen. Wenn Sie die App ausführen, erhalten Sie die folgende Ausgabe auf Ihrem Bildschirm.

Ausgang:

Bitte beachten Sie, dass der oben geteilte Beispielcode in React Native erstellt wurde und wir die Expo-CLI verwendet haben, um die App auszuführen.