Dynamisches Bild in React Native

Manchmal müssen wir Bilder dynamisch in unsere React Native-App einfügen. Diese Bilder ändern sich bedingt oder wenn ein Benutzer auf eine Schaltfläche klickt oder eine Aktion ausführt.

Wir können die Funktion require() verwenden, um das Bildmodul dynamisch anzufordern, indem wir den Pfad des Bildes übergeben.

In diesem Artikel erfahren wir, wie wir Bilder dynamisch in eine React Native-App einfügen können. Außerdem werden wir das Thema vereinfachen, indem wir notwendige Beispiele und Erklärungen bereitstellen.

Zu diesem Zweck verwenden wir eine Funktion namens required(). Sehen wir uns ein Beispiel an, um das Thema zu vereinfachen.

Fügen Sie ein dynamisches Bild in der React Native App hinzu

In unserem Beispiel unten haben wir gezeigt, wie wir ein Bild dynamisch in eine React Native-App einfügen 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() {

  let img = "./assets/image2.jpg"; // Declaring a variable that hold the image location
  return (
    <View style={styles.container}>
      <Text>Simple Image</Text>
      <Image style={styles.img} source={require(img)} />
      <StatusBar style="auto" />
    </View>
  );

}

const styles = StyleSheet.create({ // Providing some styles to the UI
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 100,
  },
  img: {
    width: '100%',
    height: 120,
  },
});

Wir haben bereits den Zweck jeder Zeile befohlen. Im obigen Beispielcode haben wir zuerst eine Variable namens img erstellt, die den Bildspeicherort enthält.

Danach haben wir diese Variable einfach an die Funktion require() übergeben, die das Bild von der bestimmten Stelle lädt. Nachdem Sie das obige Beispiel ausgeführt haben, erhalten Sie möglicherweise die Ausgabe wie die folgende:

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.