reagieren native Verwendung Variable für Bilddatei

Question

Ich weiß, dass ein statisches Bild in reagieren native verwenden müssen Sie eine Anforderung für das Bild speziell, aber ich versuche, ein zufälliges Bild basierend auf einer Zahl zu laden. Zum Beispiel habe ich 100 Bilder img1.png - img100.png in meinem Verzeichnis. Ich versuche, einen Weg, um herauszufinden, die folgenden

<Image source={require(`./img${Math.floor(Math.random() * 100)}.png`)}/> 

ich das absichtlich weiß zu tun nicht funktioniert, aber keine Abhilfen würde sehr geschätzt werden.

Answer 1

In JS require Anweisungen werden zur Bündelzeit aufgelöst (wenn das JS-Bündel berechnet wird). Daher wird es nicht unterstützt, variable Ausdrücke als Argumente für require zu verwenden.

Wenn Ressourcen benötigt werden, ist es noch komplizierter. Wenn Sie require('./someimage.png') haben, wird Native Package reactor das erforderliche Image für das Gebietsschema eingeben und es wird dann zusammen mit der App gebündelt, damit es als "statische" Ressource verwendet werden kann, wenn Ihre App läuft (tatsächlich wird es im Entwicklungsmodus nicht gebündelt) das Bild mit Ihrer App, aber stattdessen wird das Bild vom Server serviert, aber das ist in Ihrem Fall egal).

Wenn Sie ein zufälliges Bild als statische Ressource verwenden möchten, müssen Sie Ihrer App mitteilen, dieses Bild zu bündeln. Sie können es in ein paar Möglichkeiten:

1) Fügen Sie es als eine statische Asset Ihrer App verweisen dann, um es mit <Image src={{uri:'name_of_the_image_in_assets.png'}}/> (here ist, wie Sie es auf die native iOS-App hinzufügen)

2) Erfordert alle Bilder im Voraus statisch. Sth in Form von:

var randomImages = [ 
    require('./image1.png'), 
    require('./image2.png'), 
    require('./image3.png'), 
    ... 
]; 

Dann in Ihrem Code können Sie tun:

<Image src={randomImages[Math.floor(Math.random()*randomImages.length)]}/> 

3) Verwenden Sie das Netzwerk-Image mit <Image src={{uri:'http://i.imgur.com/random.jpg'}}/>

Answer 2

Für alle bekommen die reagieren-native Tier wissen, das sollte helfen :)

Ich besuchte auch ein paar Seiten in der Vergangenheit, fand es aber zunehmend frustrierend. Bis ich gelesen this site here.

Es ist eine andere Herangehensweise, aber am Ende zahlt es sich schließlich aus. Grundsätzlich wäre der beste Ansatz, alle Ihre Ressourcen an einem Ort zu laden. Betrachten Sie die folgende Struktur

app 
    |--img 
     |--image1.jpg 
     |--image2.jpg 
     |--profile 
      |--profile.png 
      |--comments.png 
     |--index.js 

In index.js, können Sie dies tun:

const images = { 
    profile: { 
     profile: require('./profile/profile.png'), 
     comments: require('./profile/comments.png'), 
    }, 
    image1: require('./image1.jpg'), 
    image2: require('./image2.jpg'), 
}; 

export default images; 

In Ihre Ansichten haben Sie die Bilder Komponente wie folgt zu importieren:

import Images from './img/index'; 

render() { 
    <Image source={Images.profile.comments} /> 
} 

Jeder hat verschiedene Mittel zu einem Ende, wählen Sie einfach das, das Ihnen am besten passt.