web-dev-qa-db-fra.com

React Native require (image) renvoie le nombre

J'ai un fichier js avec un composant EventCard, qui prend le nom de l'événement, la date, l'image de l'événement, etc. Si l'image de l'événement n'existe pas, je souhaite charger une image de marque de réservation. Maintenant, cette déclaration ressemble à ceci

constructor(props){
    super(props);
    let imgUrl = props.image ? props.image : require("../assets/images/image.jpg");
    this.state = {image: imgUrl}
}

J'utilise this.state inside render pour la source comme 

source={{uri: this.state.image}}

Je reçois étrangement 11 lorsque je crée une exigence pour l’image de marque de réservation et que le test natif de réaction génère une erreur indiquant que la valeur de uri ne peut pas être convertie de Double en Chaîne.

L'aide est très appréciée.

Merci

javascriptreactjsreact-nativerequire
4
Kireeti K

Vous devez attribuer directement la source de l'image lors de l'utilisation de require.

constructor(props){
  super(props);
  let imgUrl = props.image ? { uri: props.image } : require("../assets/images/image.jpg");
  this.state = { image: imgUrl };
}

et ensuite dans votre rendu:

source={this.state.image}
4
Fawaz

Vous pouvez simplement faire ceci

constructor(props){
    super(props);
    let imgUrl = props.image ? props.image : null
    this.state = {image: imgUrl}
}

source={imgUrl == null ? require("../assets/images/image.jpg") : this.state.image}
1
Haider Ali

Après quelques recherches et l'aide de @Fawaz et @Haider, j'ai compris que les retours étaient obligatoires. Cela signifie que nous pouvons utiliser un numéro directement avec la source au lieu de require et cela fonctionne.

<Image source={11} />

Cela devrait afficher une image de votre ressource locale si vous avez une image correspondant à ce numéro. Donc, lorsque vous voulez décider si vous souhaitez afficher l’URL envoyée au serveur ou une ressource locale, comme dans mon cas. nous pouvons aller avec @Fawaz answer qui insère fondamentalement un {uri: "image-link"} ou require ("image") où require sera résolu en nombre et lorsque utilisé avec la source, vous mettrez l'objet ou le nombre qui sont les moyens standard selon la documentation.

0
Kireeti K
You can try this,

import React, {Component} from 'react';
import {StyleSheet,ImageBackground} from 'react-native';

import bgSrc from './images/bgfrm.png';

export default class Wallpaper extends Component {
  constructor(props){
    super(props);
    let imgUrl = props.image ? props.image :bgSrc;
    this.state = {image: imgUrl};
}

  render() {
    return (
      <ImageBackground style={styles.picture} source={this.state.image}>
        {this.props.children}
      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  picture: {
    flex: 1,
    width: null,
    height: null,
    resizeMode: 'cover',
  },
});
0
Uthaya

N'utilisez pas la require de manière dynamique. Explication détaillée dans cet article: Module React Native - Image Required utilisant des noms dynamiques

0
gazdagergo