HOWTO · React Native

Elemente in React Native ausrichten

In diesem Tutorial wird erläutert, wie Elemente in React Native ausgerichtet werden.

Von Md Aminul IslamVeröffentlicht 2023-06-21Aktualisiert 2024-02-15

In diesem Artikel werden wir sehen, wie wir React-Native-Elemente ausrichten und durch die Verwendung notwendiger Beispiele und Erklärungen verständlicher machen können.

Elemente in React Native ausrichten

Zum Ausrichten von Objekten stehen zwei Ausrichtungsarten zur Verfügung: Horizontal und Vertikal. Es gibt drei Eigenschaften für die horizontale Ausrichtung: Top, Center und button, und es gibt drei Eigenschaften für die vertikale Ausrichtung: Left, Center und Right.

Mit dem flex können wir Elemente einfach mit der folgenden Syntax ausrichten.

Syntax:

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

Verwenden Sie flex, um die React-Native-Elemente auszurichten

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

Wir haben bereits den Zweck aller erforderlichen Zeilen in Bezug auf die oben im Beispiel geteilten Schritte befohlen. Im Beispiel sind container01, container02 und container03 das untergeordnete Element von container.

Wenn Sie die App ausführen, erhalten Sie die folgende Ausgabe auf Ihrem Bildschirm.

Ausgang:

Elemente in React Native ausrichten

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

Über den 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.

Autorenprofil ansehen
LinkedIn