Wie zeige ich dynamisch benannte Bilder in React Native an?

Dynamische Bildnamen in React Native: Verwenden des Image Require-Moduls

Bei der Arbeit mit React Native können Sie mit dem Image-Modul Bilder anzeigen in Ihren Bewerbungen. In der Regel können Bilder statisch mithilfe der Syntax „require('image!name-of-the-asset')“ referenziert werden.

Beim Versuch, dynamische Bildnamen zu verwenden, stellt sich jedoch häufig eine Frage. Wenn Sie beispielsweise eine dynamische Zeichenfolge haben, die einen Bildnamen darstellt, z. B. „Avatar“, funktioniert der folgende Code nicht:

<Image source={require('image!' + 'avatar')} />

Dies führt zu der Fehlermeldung „Unbekanntes Modul erforderlich „image!avatar“. "".

Erklärung

Laut der React Native-Dokumentation müssen statische Ressourcen direkt mit referenziert werden die zuvor erwähnte statische Syntax. Das dynamische Laden von Bildern wird nicht unterstützt.

// Correct:
<Image source={require('image!my-icon')} />

// Incorrect:
var icon = 'my-icon-active';
<Image source={require('image!' + icon)} />

Alternative Lösung

Wenn Sie dynamische Bildnamen verwenden müssen, können Sie die Bildelemente in einem separaten Array oder speichern Objekt und referenzieren Sie sie dann mithilfe der Quellstütze der Bildkomponente:

const images = {
  avatar: require('image!avatar'),
  logo: require('image!logo'),
};

<Image source={images[dynamicImageName]} />

Zusätzlich Hinweis

Für iOS müssen Sie daran denken, Ihre Bilder in einen Asset-Katalog in Ihrem Xcode-Projekt aufzunehmen. Dies ist notwendig, damit Bilder in Ihrer React Native-Anwendung korrekt referenziert werden.

Das obige ist der detaillierte Inhalt vonWie zeige ich dynamisch benannte Bilder in React Native an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!