Elemente in React Native ausrichten

MD Aminul Islam 15 Februar 2024
  1. Elemente in React Native ausrichten
  2. Verwenden Sie flex, um die React-Native-Elemente auszurichten
Elemente in React Native ausrichten

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.

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

Verwandter Artikel - React Native

Verwandter Artikel - React Native Element