wake-up-neo.net

requir () muss ein einzelnes Stringliteralargument React Native haben

Ich habe eine Komponente in meiner Anwendung, die einwandfrei funktioniert, wenn ihr ein direkter Zeichenfolgenwert ("someImage.png") zugewiesen wird. Wenn ich jedoch versuche, sie durch Speichern des Abbildnamens in einer lokalen Variablen zuzuweisen, wird diese Ausnahme von "requir ()" benötigt Ein einzelnes String-Literalargument " Diese Zeile funktioniert einwandfrei

<ImageBackground source={require("./Resources/bg/imageone.png")} resizeMode='cover' style={customStyles.backdrop}>

In diesem Fall tritt ein Problem auf

let imageName = "./Resources/bg/imageone.png";          
<ImageBackground id="123" source={require(imageName)} resizeMode='cover' style={customStyles.backdrop}>

Ich fand auch dasselbe Problem hier , aber das hat noch niemand geantwortet. Kannst du mir hier draußen helfen?

13
Zubair

Dieses Beispiel für dynamische Bilder kann auch zeigen, wie eine Variable mit dem Bildquellenwert richtig zugewiesen wird. Es wird empfohlen, die gesamte Variable require anstelle eines Werts in einer Variablen zuzuweisen.

// GOOD
<Image source={require('./my-icon.png')} />;

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

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

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

Ich hoffe es hilft

16
soutot

Wenn Sie Indizes in den Daten haben, ist meine Herangehensweise an das Problem:

const image1 = require('../assets/images/image1.png');
const image2 = require('../assets/images/image2.png');
const image3 = require('../assets/images/image3.png');

const images = [image1, image2, image3];

...

<Image source={images[index]} />
5
Onuray Sahin

Hier ist eine Hilfskomponente, die ich häufig verwende:

import your-image-name from '<path-to-image>';

const images = {
  your-image-name,
};

getImage = name => images[name];

export default getImage;

Dann benötigen Sie in der Komponente das Bild:

import getImage from '<path>';

<Image source={getImage('your-image-name')} />

Durch das Importieren des Bildes innerhalb der Hilfsfunktion entfällt die Verwendung von require().

Von dort können Sie alle Ihre Bilder in die getImage-Komponente importieren.

Wenn Sie noch einen Schritt weiter gehen möchten, können Sie eine neue Image-Komponente erstellen, die name als Requisite aufnimmt. Zum Beispiel:

import { Image as RNImage } from 'react-native';

import getImage from '<path>';

const Image = ({ name, source, ...props }) => (
  <RNImage
    source={name ? getImage(name) : source}
    {...props}
  />
);

export default Image;

Importieren von Image mithilfe von as RNImage wird verwendet, um einen doppelten Deklarationsfehler zu vermeiden.

Dann

import Image from '<path>';

<Image name="your-image-name" />

Dies gibt Ihnen auch die Möglichkeit, source als Requisite innerhalb der neuen Image-Komponente zu verwenden, falls Sie jemals einen URI anstelle eines relativen Pfads verwenden müssen. Zusammen mit anderen Requisiten, die Sie übergeben müssen.

Von dort aus haben Sie Zugriff auf die Komponente getImage, ohne sie über mehrere Komponenten Ihrer App importieren zu müssen.

Hoffe das hilft!

2
Chris Poe

// - Bildpfad in Array-Liste umwandeln

   indexImag = [
    require("./img/KPN48-01.jpg"),
    require("./img/KPN48-02.jpg"),
    require("./img/KPN48-03.jpg")
  ];

// - data Feed--

dataFeed = [
    {
      id: 1,
      title: "Koisuru Fietune Cookie คุกกี้เสี่ยงทาย",
      subTitle: "128,136,082 views",
      imgId: 0
    },
    {
      id: 2,
      title: "BNK48 - คุกกี้เสี่ยงทาย Koisuru Fortune Cookie Cover",
      subTitle: "328,006,000 views",
      imgId: 1
    },
    {
      id: 3,
      title: "คลาสเด็ก - คุกกี้เสี่ยงทาย - BNK48 - Koisuru Fortune Cookie",
      subTitle: "334,111,234 views",
      imgId: 2
    },
    {
      id: 4,
      title:
        "เชิญชวนมาร่วมถ่าย MV BNK48 Koisuru Foutune Cookie คุกกี้เสี่ยงทาย",
      subTitle: "100,000,055 views",
      imgId: 0
    },
    {
      id: 5,
      title:
        "หนุ่มๆ ฟินทั้งประเทศ! ฟังเพลงฮิต คุกกี้เสี่ยงทาย อีก 3 เวอร์ชั่นจากวงพี่สาว ",
      subTitle: "400,143,634 views",
      imgId: 1
    }
  ];

//-machen--

 <View>
    <View>
      <Image

        source={require("./img/LogoPP.png")}
      />
      <View>
        <Text>{_item.textTitle} </Text>
        <Text>{_item.subTitle} </Text>
      </View>
    </View>

    <Image

      source={this.indexImag[_item.imgId]}
    />
  </View>
1
Faisol Palavan

Wenn Sie mehr als zwei Auswahlmöglichkeiten haben, besteht die Lösung darin, das Ergebnis der Anforderung als Parameter zu übergeben, anstatt eine Anforderung (param) innerhalb der Methode auszuführen.

render() {
   return (
    <ScrollView>
        {this.renderMenuItem("CATALOGO", require('../../img/hp_catalogo.jpg'), this.goToCatalogo)}
        {this.renderMenuItem("NOVITÀ PRODOTTI", require('../../img/hp_novita.jpg'), this.goToNovita)}
    </ScrollView>);
}

renderMenuItem(name, imagePath, func ){
     return (
         <TouchableOpacity onPress={func} style={styles.box}>
         <ImageBackground
           source={imagePath}
           style={styles.image}>
           <Text>{name}</Text>
         </ImageBackground>
         <TouchableOpacity>);
         }
0
Picci