wake-up-neo.com

Reagieren Sie nativ: erfordern () mit dynamischem String?

Ich habe mehrere Beiträge zu Problemen gelesen, die Menschen mit React Native und der Funktion require() haben, wenn Sie versuchen, eine dynamische Ressource zu benötigen, z.

Dynamisch (schlägt fehl):

urlName = "sampleData.json";
data = require('../' + urlName);

statisch (gelingt):

data = require('../sampleData.json');

Ich habe in einigen Threads gelesen, dass dies ein Fehler in React Native ist und in anderen, dass dies eine Funktion ist.

Gibt es eine neue Möglichkeit, eine dynamische Ressource innerhalb einer Funktion zu benötigen?

Verwandte Beiträge (alle recht alt in Reaktionszeit):

javascriptreactjsreact-nativeecmascript-6require
16
Jake Chasan

Wie ich gehört habe, verwendet require() von reag nur statische URLs und keine Variablen. Das bedeutet, dass Sie require('/path/file') ausführen müssen. Sehen Sie sich diese Ausgabe von auf github und this an, um weitere alternative Lösungen zu finden ein paar andere Möglichkeiten, dies zu 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;

dann

import Images from './img/index';

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

von diesem antwort

7
gocci

Hier ist meine Lösung.

Setup

Dateistruktur:

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 meiner SearchableList.js - Komponente habe ich dann die Images-Komponente wie folgt 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 Bild basierend auf dem Wert in this.state.network Dynamisch zuzuweisen:

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

Der an die imageSelect-Funktion übergebene Wert kann eine beliebige dynamische Zeichenfolge sein. Ich habe mich nur dafür entschieden, es zuerst in den Status zu versetzen und dann weiterzuleiten.

Ich hoffe diese Antwort hilft. :)

3
Ryan S

Beim Lesen der Dokumente habe ich eine funktionierende Antwort gefunden und ich kann dynamische Bilder verwenden. In den Dokumenten wird hier von Netzwerkbildern gesprochen

https://facebook.github.io/react-native/docs/images#network-images

Nicht sicher, ob dies auf andere Dateitypen angewendet werden kann, aber da es sich um eine Liste mit Nicht-Bildtypen handelt, ist dies nicht erforderlich

Sie müssten den URI-Aufruf verwenden

data = {uri: urlName}

Für mich bekam ich Bilder, die dynamisch damit arbeiten

<Image source={{uri: image}} />
0
DaveClissold

Wenn Sie zwischen mehreren lokal gespeicherten Bildern wechseln müssen, können Sie auch folgendermaßen vorgehen:

        var titleImg;
        var textColor;
        switch (this.props.data.title) {
        case 'Футбол':
            titleImg = require('../res/soccer.png');
            textColor = '#76a963';
            break;
        case 'Баскетбол':
            titleImg = require('../res/basketball.png');
            textColor = '#d47b19';
            break;
        case 'Хоккей':
            titleImg = require('../res/hockey.png');
            textColor = '#3381d0';
            break;
        case 'Теннис':
            titleImg = require('../res/tennis.png');
            textColor = '#d6b031';
            break;
        }

In diesem Ausschnitt ändere ich die Variablen titleImg und textColor abhängig von der Eigenschaft. Ich habe dieses Snippet direkt in die render()-Methode eingefügt.

0
Daniel Chernyshev

Verwenden Sie einen Modul-Bundler wie Webpack?

Wenn ja, können Sie require.ensure() ausprobieren.

Siehe: https://webpack.js.org/guides/code-splitting/#dynamic-imports

0
kngroo