webentwicklung-frage-antwort-db.com.de

native Variablen für die Bilddatei reagieren

Ich weiß, dass für die Verwendung eines statischen Bilds in Reactate Native eine Anforderung an dieses Bild speziell gestellt werden muss, aber ich versuche, ein Zufallsbild basierend auf einer Zahl zu laden. Zum Beispiel habe ich 100 Bilder mit dem Namen img1.png - img100.png in meinem Verzeichnis. Ich versuche einen Weg zu finden, um Folgendes zu tun

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

Ich weiß, dass dies absichtlich nicht funktioniert, aber alle Problemumgehungen wären sehr willkommen. 

28
bgrober

Für jeden, der die reaktionäre Bestie kennenlernt, sollte dies helfen :)

Ich habe in der Vergangenheit auch ein paar Orte besucht, aber es wurde zunehmend frustrierender. Bis ich diese Seite hier gelesen habe.

Es ist ein anderer Ansatz, aber es lohnt sich letztendlich am Ende. Grundsätzlich ist es am besten, alle 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 Folgendes 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 Ihren Ansichten müssen Sie die Bildkomponente folgendermaßen importieren:

import Images from './img/index';

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

Jeder hat andere Mittel zum Zweck, wählen Sie einfach diejenige aus, die am besten zu Ihnen passt.

Da Man - F: Wie lautet diese Antwort mit einer Variablen?

Da require nur eine Literalzeichenfolge akzeptiert, können Sie keine Variablen, verketteten Zeichenfolgen usw. verwenden. Dies ist die nächstbeste Sache. Ja, es ist immer noch viel Arbeit, aber jetzt können Sie etwas tun, das der Frage des OP ähnelt:

render() {
  var images = { test100: "image100" };
  return (
    <View>
      <Text>
       test {images["test" + "100"]}
      </Text>
    </View>
  );
}
45
DerpyNerd

In JS-Requests werden Anweisungen zur Bündelzeit aufgelöst (wenn das JS-Bundle berechnet wird). Daher wird es nicht unterstützt, den Variablenausdruck als Argument für require zu verwenden.

Noch schwieriger ist es, wenn Ressourcen benötigt werden. Wenn Sie require('./someimage.png') haben, wird der von React Native Packager geforderte Image lokalisiert und dieses wird zusammen mit der App gebündelt, sodass sie bei Ausführung Ihrer App als "statische" Ressource verwendet werden kann (im Dev-Modus wird sie nicht gebündelt.) Das Image wird jedoch mit Ihrer App bereitgestellt, stattdessen wird das Image vom Server bereitgestellt, was in Ihrem Fall jedoch keine Rolle spielt.

Wenn Sie ein Zufallsbild als statische Ressource verwenden möchten, müssen Sie Ihrer App mitteilen, dass dieses Bild gebündelt werden soll. Sie können es auf verschiedene Arten tun:

1) Fügen Sie es als statisches Asset Ihrer App hinzu, und referenzieren Sie es mit <Image src={{uri:'name_of_the_image_in_assets.png'}}/> ( hier wie Sie es zur nativen iOS-App hinzufügen können.)

2) Fordern Sie alle Bilder statisch vorab an. Etw in Form von:

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

Dann können Sie in Ihrem Code Folgendes tun:

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

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

31
kzzzf
class ImageContainer extends Component {
   this.state ={
     image:require('default-img')
   }
    <View>
           <Image source={this.state.image} />
    </View>
}

Im Rahmen dieser Diskussion hatte ich diesen Fall, in dem Bilder dynamisch für einen bestimmten Hintergrund zugewiesen werden sollten. Hier wechsle ich den Zustand so

this.setState({
  image:require('new-image')
})
0
Arausi Daniel

Ich kam zu diesem Thema und suchte nach einer Möglichkeit, Bilder dynamisch hinzuzufügen. Ich stellte schnell fest, dass die Übergabe einer Variablen an das Image -> requir () nicht funktionierte.

Danke an DerpyNerd für den richtigen Weg.

Nachdem ich die Ressourcen an einer Stelle implementiert hatte, fiel es mir leicht, die Bilder hinzuzufügen. Ich brauchte jedoch immer noch eine Möglichkeit, diese Bilder basierend auf dem Statuswechsel in meiner Anwendung dynamisch zuzuweisen.

Ich habe eine Funktion erstellt, die eine Zeichenfolge aus einem Statuswert akzeptiert und dann das Bild zurückgibt, das dieser Zeichenfolge logisch entspricht.

Konfiguration

Bildstruktur:

app  
  |--src
    |--assets
      |--images
        |--logos
          |--small_kl_logo.png
          |--small_a1_logo.png
          |--small_kc_logo.png
          |--small_nv_logo.png
          |--small_other_logo.png

        |--index.js
    |--SearchableList.js

In index.js habe ich folgendes:

const images = {
  logos: {
    kl: require('./logos/small_kl_logo.png'),
    a1: require('./logos/small_a1_logo.png'),
    kc: require('./logos/small_kc_logo.png'),
    nv: require('./logos/small_nv_logo.png'),
    other: require('./logos/small_other_logo.png'),
  }
};

export default images;

In meine SearchableList.js-Komponente habe ich dann die Images-Komponente folgendermaßen importiert:

import Images from './assets/images';

Ich habe dann eine neue Funktion imageSelect in meiner Komponente erstellt:

imageSelect = network => {
  if (network === null) {
    return Images.logos.other;
  }

  const networkArray = {
    'KL': Images.logos.kl,
    'A1': Images.logos.a1,
    'KC': Images.logos.kc,
    'NV': Images.logos.nv,
    'Other': Images.logos.other,
  };

  return networkArray[network];
};

Dann rufe ich in meiner Komponenten render-Funktion diese neue imageSelect-Funktion auf, um das gewünschte Image basierend auf dem Wert im this.state.network dynamisch zuzuweisen:

render() {
  <Image source={this.imageSelect(this.state.network)} />
}

Nochmals vielen Dank an DerpyNerd, der mich auf den richtigen Weg gebracht hat. Ich hoffe, diese Antwort hilft anderen. :)

0
Shark