Zentrieren Sie das Bild in React Native

In React-Native ist es sehr einfach, Bilder in eine App zu implementieren. Nach der Implementierung müssen wir unser Image perfekt ausrichten, um besser auszusehen.

In diesem Artikel werden wir sehen, wie wir ein Bildelement einer React-Native-App zentrieren können. Wir werden uns ein Beispiel und eine Erklärung ansehen, um das Thema zu vereinfachen.

Zentrieren Sie das Bild in React Native

Manchmal müssen wir das Bildelement für verschiedene Zwecke zentralisieren. Wenn Sie beispielsweise einen Preloader für eine App entwerfen, müssen Sie im Preloader-Fenster ein Preloader-Bild bereitstellen, das in der Mitte ausgerichtet sein sollte.

In unserem Beispiel unten veranschaulichen wir, wie wir ein Bildelement in der Mitte einer React-Native-App platzieren können. Das Code-Snippet für unser Beispiel sieht wie folgt aus.

// importing necessary packages
import {StatusBar} from 'expo-status-bar';
import {Image, StyleSheet, Text, View} from 'react-native';

export default function App() {
  return (  // Including the image
    <View style={styles.container}>
      <Text>Simple Image</Text>
      <Image
        style={styles.img}
        source={{
          uri: 'https://www.delftstack.com/assets/img/logo.png',
}
}
/>
      <StatusBar style="auto" / > <
    /View>
  );
}
/ / Providing style to the app
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  img: {
    width: 200,
    height: 200,
    resizeMode: 'contain',
  },
});

Wir haben bereits den Zweck aller erforderlichen Zeilen in Bezug auf die oben im Beispiel geteilten Schritte befohlen.

<Image style={styles.img} source={{ uri: 'https://www.delftstack.com/assets/img/logo.png', }} />

Nachdem wir das Bild durch die obige Codezeile eingefügt haben, legen wir die folgenden Eigenschaften im Stylesheet fest.

Für die Container:

Für das Bild:

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

Ausgang:

Beachten Sie, dass der oben geteilte Code in React-Native erstellt wird. Wir haben die Expo-CLI verwendet, um die App auszuführen, und Sie benötigen auch die neueste Version von Node.js.

Wenn Sie Expo-CLI nicht in Ihrer Umgebung haben, installieren Sie es zuerst.