web-dev-qa-db-fra.com

require () doit avoir un seul argument littéral de chaîne React Native

J'ai un composant dans mon application qui fonctionne bien si on lui attribue une valeur de chaîne directe ("someImage.png"), mais si j'essaie de l'assigner en stockant le nom de l'image dans une variable locale, il donne cette exception "require () must have un argument littéral de chaîne unique " Cette ligne fonctionne correctement

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

Un problème survient dans ce cas

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

J'ai également constaté que le même problème était signalé ici , mais personne n'a encore répondu à cette question. Pouvez-vous m'aider ici?

javascriptimagereact-native
13
Zubair

Cet exemple d'images dynamiques peut également montrer comment affecter correctement une variable avec la valeur source de l'image. La recommandation est d’affecter l’ensemble require dans une variable, au lieu de simplement sa valeur.

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

J'espère que ça aide

16
soutot

Si vous avez des index dans les données, mon approche du problème est la suivante:

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

Voici un composant d'aide que j'utilise assez souvent:

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

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

getImage = name => images[name];

export default getImage;

Ensuite, à l'intérieur du composant, vous avez besoin de l'image:

import getImage from '<path>';

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

L'importation de l'image dans la fonction d'assistance supprime la nécessité d'utiliser require().

À partir de là, vous pouvez importer toutes vos images dans le composant getImage.

Si vous souhaitez aller plus loin, vous pouvez créer un nouveau composant Image qui prend name comme accessoire. Par exemple:

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;

Importer Image à l'aide de as RNImage permet d'éviter une erreur de déclaration en double.

Ensuite

import Image from '<path>';

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

Cela vous laisse également la possibilité d'utiliser source comme accessoire dans le nouveau composant Image au cas où vous auriez besoin d'utiliser un URI au lieu d'un chemin relatif. Avec tous les autres accessoires, vous devez passer.

À partir de là, vous aurez accès au composant getImage sans avoir à l'importer dans plusieurs composants de votre application.

J'espère que cela t'aides!

2
Chris Poe

// - Convertir le chemin de l'image en liste de tableaux

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

//-flux de données--

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
    }
  ];

//-rendre--

 <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

Si vous avez plus de deux choix, la solution consiste à passer le résultat de require en tant que paramètre au lieu de faire un require (param) dans la méthode.

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