Wie kann ich Bilder in React Native dynamisch laden, ohne dass der Fehler „Unbekanntes Modul erforderlich' auftritt?

Dynamische Bildanforderungen in React Native

Bei der Arbeit mit dem Image-Modul von React Native ist es wichtig zu berücksichtigen, wie Bildnamen referenziert werden, wenn Sie dynamische Namen verwenden müssen.

In Standardszenarien funktioniert die Verwendung eines statischen Bildnamens in der Funktion require() einwandfrei. Die Verwendung eines dynamischen Bildnamens kann jedoch zu Komplikationen führen. Dieses Problem tritt auf, wenn Sie versuchen, mithilfe von require('image!' 'avatar') eine Zeichenfolge mit dem dynamischen Bildnamen einzuschließen. Infolgedessen kann der frustrierende Fehler „Unbekanntes Modul erforderlich“ auftreten.

Unterstützung für dynamische Bildnamen von React Native

Leider gibt es laut der React Native-Dokumentation eine Einschränkung bei der Arbeit mit dynamische Bildnamen. Im Abschnitt „Statische Ressourcen“ heißt es in der Dokumentation ausdrücklich, dass „die einzige zulässige Möglichkeit, auf ein Bild im Bundle zu verweisen, darin besteht, require('image!name-of-the-asset')“ buchstäblich in die Quelle zu schreiben. " Das bedeutet, dass Sie nicht einfach eine Zeichenfolge mit dem Bildnamen verketten können, um es dynamisch zu machen.

Umgang mit dynamischen Bildanforderungen

Um diese Einschränkung zu umgehen, müssen Sie den dynamischen Bildnamen zuweisen zu einer Variablen. So können Sie dies erreichen:

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

Alternativ können Sie die Hilfsfunktion asset() aus dem React-Native-Paket verwenden, um Bilder dynamisch anzufordern:

import { asset } from 'react-native';

const dynamicImageSource = asset('image!' + icon);

<Image source={dynamicImageSource} />

Denken Sie daran Bei beiden Methoden müssen Sie Ihre Bilder dennoch zu einem xcassets-Bundle in Ihrer App in Xcode hinzufügen.

Durch die Einhaltung dieser Richtlinien können Sie können dynamische Bildnamen in Ihrer React Native-Anwendung effektiv nutzen, ohne dass der gefürchtete Fehler „Unbekanntes Modul erforderlich“ auftritt.

Das obige ist der detaillierte Inhalt vonWie kann ich Bilder in React Native dynamisch laden, ohne dass der Fehler „Unbekanntes Modul erforderlich' auftritt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!