Wie kann ich Bilder dynamisch im Image Require-Modul von React Native laden?

Dynamische Bildnamen im React Native Image Require-Modul

In React Native ermöglicht das Image Require-Modul Entwicklern, statische Bildressourcen in ihr zu laden Anwendungen. Während das Modul mit statischen Bilddateinamen einwandfrei funktioniert, führen dynamische Bildnamen häufig zu Fehlern.

Problem:

Ein Entwickler versucht, eine dynamische Zeichenfolge für den Bilddateinamen zu verwenden :

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

React Native gibt jedoch einen Fehler aus, der auf ein unbekanntes Modul hinweist, wie dargestellt unten:

Requiring unknown module "image!avatar". If you are sure the module is there, try restarting the packager.

Auflösung:

Gemäß dem Abschnitt „Statische Ressourcen“ der React Native-Dokumentation müssen Bildnamen statisch im Quellattribut angegeben werden:

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

Die Verwendung dynamischer Zeichenfolgen für Bilddateinamen ist explizit davon wird abgeraten:

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('image!' + icon)} />

Stattdessen besteht die Lösung darin, bedingtes Rendering zu verwenden, um einer Variablen statische Bilddateinamen zuzuweisen:

// GOOD
var icon = this.props.active ? require('image!my-icon-active') : require('image!my-icon-inactive');
<Image source={icon} />

Zusätzliche Überlegungen:

• Statische Bildressourcen müssen einem xcassets-Bundle im Xcode hinzugefügt werden Anwendung.
• Weitere Informationen zum Hinzufügen statischer Ressourcen zu React Native-Apps finden Sie unter http://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your -app-using-images-xcassets.

Das obige ist der detaillierte Inhalt vonWie kann ich Bilder dynamisch im Image Require-Modul von React Native laden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!