web-dev-qa-db-fra.com

React Native - Module d'exigence d'image utilisant des noms dynamiques

Je suis en train de créer une application de test avec React Native. Le module Image fonctionne jusqu'à présent très bien.

Par exemple, si j'avais une image nommée avatar, l'extrait de code ci-dessous fonctionne correctement.

<Image source={require('image!avatar')} />

Mais mais si je le change en une chaîne dynamique, je reçois

<Image source={require('image!' + 'avatar')} />

Je reçois l'erreur:

 Requérant le module inconnu "image! Avatar". Si vous êtes sûr que le module est présent, essayez de redémarrer le conditionneur.

Évidemment, il s'agit d'un exemple artificiel, mais les noms d'images dynamiques sont importants. Est-ce que React Native ne prend pas en charge les noms d’images dynamiques?

React native error with dynamic image name

javascriptreact-nativejsx
59
Shaheen Ghiassy

Ceci est couvert dans la documentation sous la section " Ressources statiques ":

Le seul moyen autorisé de faire référence à une image du groupe consiste à écrire littéralement require ("image! Nom-du-bien") dans la source.

// GOOD
<Image source={require('image!my-icon')} />

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

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

Toutefois, vous devez également vous rappeler d’ajouter vos images à un ensemble xcassets dans votre application Xcode, bien que cela ressort apparemment de votre commentaire.

http://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your-app-using-images-xcassets

45
Colin Ramsay

Cela a fonctionné pour moi:

J'ai créé un composant image personnalisé qui utilise un booléen pour vérifier si l'image provient du Web ou est en cours de transmission à partir d'un dossier local.

// In index.ios.js after importing the component
<CustomImage fromWeb={false} imageName={require('./images/logo.png')}/>

// In CustomImage.js which is my image component
<Image style={styles.image} source={this.props.imageName} />

Si vous voyez le code, au lieu d'utiliser l'un de ceux-ci:

// NOTE: Neither of these will work
source={require('../images/'+imageName)} 
var imageName = require('../images/'+imageName)

J'envoie juste la require('./images/logo.png') entière comme accessoire. ça marche!

43
BK7

PERTINENT SI VOUS AVEZ DES IMAGES CONNUES (URLS):

La façon dont je me suis frayé un chemin à travers ce problème:

J'ai créé un fichier avec un objet qui stockait l'image et le nom de l'image:

const images = {
  dog: {
    imgName: 'Dog', 
    uri: require('path/to/local/image')
  },
  cat: {
    imgName: 'Cat on a Boat', 
    uri: require('path/to/local/image')
  }
}

export { images };

Ensuite, j'ai importé l'objet dans le composant sur lequel je veux l'utiliser et je fais mon rendu conditionnel comme suit:

import { images } from 'relative/path';

if (cond === 'cat') {
  let imgSource = images.cat.uri;
}

<Image source={imgSource} />

Je sais que ce n’est pas le moyen le plus efficace, mais c’est définitivement une solution de contournement.

J'espère que ça aide!

25
Walter Monecke

Si vous cherchez un moyen de créer une liste en parcourant un tableau JSON de vos images et descriptions, par exemple, cela fonctionnera pour vous.

  1. Créez un fichier (qui contient notre base de données JSON), par exemple ProfilesDB.js:
const Profiles=[
          {
          "id" : "1",
          "name" : "Peter Parker",
          "src" : require('../images/user1.png'),
          "age":"70",
        },
        {
        "id" : "2",
        "name" : "Barack Obama",
        "src" : require('../images/user2.png'),
        "age":"19",
        },
        {
        "id" : "3",
        "name" : "Hilary Clinton",
        "src" : require('../images/user3.png'),
        "age":"50",
        }
]
export default Profiles;
  1. Importez ensuite les données dans notre composant et parcourez la liste à l’aide d’une liste à plat:
import Profiles from './ProfilesDB.js';

<FlatList    
 data={Profiles}
 keyExtractor={(item, index) => item.id}
 renderItem={({item}) => <View>
                            <Image source={item.src} />
                            <Text>{item.name}</Text>
                         </View>
   }
/>

Bonne chance!

6
Moso Akinyemi

vous pouvez utiliser

<Image source={{uri: 'imagename'}} style={{width: 40, height: 40}} />

pour montrer l'image.

de:

https://facebook.github.io/react-native/docs/images.html#images-from-hybrid-app-s-resources

3
SamYang

Comme le React Native Documentation dit , toutes vos sources d'images doivent être chargées avant de compiler votre bundle

Donc, une autre façon d’utiliser des images dynamiques consiste à utiliser une instruction switch. Supposons que vous vouliez afficher un avatar différent pour un personnage différent, vous pouvez faire quelque chose comme ceci:

class App extends Component {
  state = { avatar: "" }

  get avatarImage() {
    switch (this.state.avatar) {
      case "spiderman":
        return require('./spiderman.png');
      case "batman":
        return require('./batman.png');
      case "hulk":
        return require('./hulk.png');
      default:
        return require('./no-image.png');
    }
  }

  render() {
    return <Image source={this.avatarImage} />
  }
}

Vérifiez la collation: https://snack.expo.io/@abranhe/dynamic-images

De plus, rappelez-vous que si votre image est en ligne, vous n'avez aucun problème, vous pouvez faire:

let superhero = "spiderman";

<Image source={{ uri: `https://some-website.online/${superhero}.png` }} />
1
Abraham Hernandez
 <StyledInput text="NAME" imgUri={require('../assets/userIcon.png')} ></StyledInput> 

<Image
            source={this.props.imgUri}
            style={{
              height: 30,
              width: 30,
              resizeMode: 'contain',
            }}
          />

dans mon cas, j'ai tellement essayé mais finalement ça a marché nom du composant StyledInput image à l'intérieur du StyledInput si vous ne comprenez toujours pas, faites le moi savoir

0
Naved Khan

Partie importante ici: Nous ne pouvons pas concaténer le nom de l'image à l'intérieur de require, comme [require ('item' + vairable + '. Png')]

Étape 1: nous créons un fichier ImageCollection.js avec la collection de propriétés d'image suivante

ImageCollection.js
================================
export default images={
    "1": require("./item1.png"),
    "2": require("./item2.png"),
    "3": require("./item3.png"),
    "4": require("./item4.png"),
    "5": require("./item5.png")
}

Étape 2: importez une image dans votre application et manipulez-la si nécessaire

class ListRepoApp extends Component {

    renderItem = ({item }) => (
        <View style={styles.item}>
            <Text>Item number :{item}</Text>
            <Image source={Images[item]}/>
        </View>
    );

    render () {
        const data = ["1","2","3","4","5"]
        return (
            <FlatList data={data} renderItem={this.renderItem}/>
        )
    }
}

export default ListRepoApp;

Si vous souhaitez une explication détaillée, vous pouvez suivre le lien ci-dessous Visiter https://www.thelearninguy.com/react-native-require-image-using-dynamic-names

Courtoisie: https://www.thelearninguy.com

0
Ritesh Chitrakar
import React, { Component } from 'react';
import { Image } from 'react-native';

class Images extends Component {
  constructor(props) {
    super(props);
    this.state = {
           images: {
                './assets/RetailerLogo/1.jpg': require('../../../assets/RetailerLogo/1.jpg'),
                './assets/RetailerLogo/2.jpg': require('../../../assets/RetailerLogo/2.jpg'),
                './assets/RetailerLogo/3.jpg': require('../../../assets/RetailerLogo/3.jpg')
            }
    }
  }

  render() {
    const {  images } = this.state 
    return (
      <View>
        <Image
                            resizeMode="contain"
                            source={ images['assets/RetailerLogo/1.jpg'] }
                            style={styles.itemImg}
                        />
     </View>
  )}
}
0
Royal.O

Je sais que c'est vieux, mais je vais ajouter ceci ici car j'ai trouvé cette question tout en cherchant une solution. Les docs autorisent un uri: 'Network Image'

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

Pour moi, j'ai des images qui travaillent de manière dynamique avec cela

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