Reagieren Native: require() mit Dynamischen String?

Habe ich gelesen, mehrere Beiträge über Themen, die die Menschen mit React Native und die require() Funktion, wenn Sie versuchen zu erfordern eine dynamische Ressource wie:

Dynamische (fehl):

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

vs. Statische (erfolgreich):

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

Habe ich gelesen, bei einigen threads, dass dies einen Fehler in Reagieren Muttersprache und in anderen, das ist ein feature.

Gibt es eine neue Art erfordern eine dynamische Ressource, die in einer Funktion?

Related Posts (alle ziemlich alt zu Reagieren, Zeit):

InformationsquelleAutor Jake Chasan | 2017-07-08
  1. 11

    Als ich gehört habe, reagieren die require() verwendet nur statische url keine Variablen, das bedeutet, dass Sie zu tun haben require('/path/file'), werfen Sie einen Blick auf diese issue auf github und diese eine weitere alternative Lösungen, es gibt ein paar andere Möglichkeiten, es zu tun!
    für e.g

    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} />
}

    aus diesem Antwort

    InformationsquelleAutor klendi
  2. 3

    Hier ist meine Lösung.

    Setup

    Datei-Struktur:

    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 diese:

    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 meinem SearchableList.js - Komponente habe ich dann importiert die Bilder, die Komponente wie folgt:

    import Images from './assets/images';

    Dann habe ich eine neue Funktion imageSelect in meine Komponente:

    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 in meine Komponenten render - Funktion, die ich nenne diese neue imageSelect - Funktion dynamisch zuweisen des gewünschten Bildes basierend auf dem Wert in der this.state.network:

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

    Übergebenen Wert in die imageSelect Funktion könnte jede dynamische Zeichenfolge. Ich habe gerade entschieden haben, es in den Staat und erst dann übergeben.

    Ich hoffe, diese Antwort hilft. 🙂

    InformationsquelleAutor Ryan S
  3. 1

    Wenn Sie brauchen, um zu wechseln zwischen mehreren lokal gespeicherte Bilder, können Sie auch auf diese Weise:

            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 snippet, das ich Variablen zu ändern titleImg und textColor je nach prop. Ich habe dieses snippet direkt in render() Methode.

    InformationsquelleAutor Daniel Chernyshev
  4. 0

    Sind Sie mit einem Modul bundler wie webpack?

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

    Finden Sie unter: https://webpack.js.org/guides/code-splitting/#dynamic-imports

    • Was ist, wenn Sie mit Vanille Reagieren Nativen ohne ein Modul bundler?
    • Ich denke, RN nutzt die metro bundler, die ist, was anscheinend nicht unterstützt die dynamische require().
    InformationsquelleAutor kngroo
  5. 0

    Lesen durch die Dokumentation, die ich gefunden habe, eine Arbeit zu beantworten und ich bin in der Lage, dynamische Bilder, die in den docs Sie bezeichnen es als Netzwerk Bilder hier

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

    Nicht sicher, ob dies angewandt werden kann, um andere Dateitypen, aber als Sie die Liste benötigen mit nicht-Bild-Typen

    Müssten Sie die uri: - Aufruf

    data = {uri: urlName}

    Für mich, ich habe Bilder arbeiten dynamisch mit diesem

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

    Versuchen, die Lösung erwähnt in diese thread für Android. Dies löst das Problem aber leider nur für android.

    Aber stellen Sie sicher, dass Sie react-native run-android nach jedem update. Sonst werden die hinzugefügten Bilder erscheinen nicht in der app.

    InformationsquelleAutor Surya Swanoff
Schreibe einen Kommentar