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?
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
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]} />
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!
// - 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>
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>);
}