Fügen Sie ein Bild in React Native ein

Beim Entwerfen einer App müssen Sie mit Symbolen und Logos arbeiten.

Diese Bilder können in verschiedenen Formaten vorliegen. In React-Native ist es einfach, ein Bild in Ihre App einzufügen.

Dieser Artikel zeigt, wie wir Bilder in die React-Native-App einfügen und deren Größe anpassen können. Außerdem werden wir das Thema diskutieren, indem wir den notwendigen Beispielen und Erklärungen folgen, um das Thema einfach zu machen.

Führen Sie die folgenden Schritte aus, um ein Bild in Ihre React-Native-App einzufügen:

1. Importieren Sie das Image aus dem Paket react-native.

2. Implementieren Sie in return() das image-Tag wie folgt:

   <Image
   	style={styles.YOUR_ID}
   	source={{
   	  uri: 'https://yourlink.com/yourImage.jpg',
   	}}
     />
   

3. Schließlich gestalten (Größe) Sie das Bild mit der spezifischen ID.

Während wir die Schritte besprechen, die erforderlich sind, um ein Bild in die React-Native-App einzufügen, sehen wir uns ein Beispiel an, um es uns klarer zu machen.

Ein Beispiel für das Einfügen von Bild und Größe in die React-Native-App

In unserem Beispiel unten haben wir gezeigt, wie wir Bilder in unsere React-Native-App einfügen können. Der Code für unser Beispiel ist unten.

// 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://st2.depositphotos.com/1031343/6062/v/450/depositphotos_60622807-stock-illustration-keep-it-simple-stamp.jpg',
}
}
/>
      <StatusBar style="auto" / > <
    /View>
  );

}

const styles = StyleSheet.create({ / /
        Providing style.container: {
          flex: 1,
          backgroundColor: '#fff',
          alignItems: 'center',
          justifyContent: 'center',
        },
    img: {
      width: 100,
      height: 100,
      resizeMode: 'contain',
    },
});

Der Zweck aller notwendigen Zeilen in Bezug auf die oben im Beispiel geteilten Schritte wird als Kommentar hinterlassen. Wenn Sie jetzt die App ausführen, erhalten Sie die folgende Ausgabe auf Ihrem Bildschirm.

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