web-dev-qa-db-fra.com

réagir natif: Comment définir Image defaultSource sur Android

réagir natif: Comment définir Image defaultSource sur Android.

J'ai lu le document React native 1.58. J'ai trouvé les accessoires Image defaultSource pris en charge par iOS uniquement.

Je dois définir l'image par défaut lorsque l'erreur de chargement d'image du réseau.

J'avais l'habitude d'écrire le code comme ceci: 

{ ImageUrl?
                <Image style={styles.docimg}
                       source={{uri: ImageUrl}}/>
                  :
                <Image style={styles.docimg}
                       source={require('../../../resource/default.png')}/>
              }

Maintenant, il y a un problème. Lorsque l'URL est un type de chaîne, mais que l'image réseau n'est pas correcte. Comme l'URL est true, l'image ne montrera rien. 

J'ai vu les accessoires Image onError peut-être résoudre mon problème. 

Je dois définir l'image de marque de réservation.

imagereact-native
7
jiexishede

Vous venez d’essayer et d’espérer que cela fonctionne ...

// initially showDefault will be false
var icon = this.state.showDefault ? require('../../../resource/default.png') : {uri: ImageUrl};

return(
  <Image
    style={styles.docimg}
    source={icon}
    onLoadStart={() => this.setState({showDefault: true})}  
    onLoad={() => this.setState({showDefault: false})}
  />
)

La définition de showDefault = false dans onLoad () ne doit pas déclencher à nouveau l'extraction de l'URL , Car les images sont mises en cache par défaut dans Android et IOS.

4
Ravi Raj

J'ai essayé d'utiliser la réponse de-Ravi Raj mais ne semble pas être liée à un échec au chargement de l'image.
À côté de la réponse, l’image continue à clignoter entre l’image par défaut et l’image réelle. (L'erreur que @vzhen met) 

Par conséquent, j'ai développé sur la base de sa réponse et généré ce composant. Voyez si cela vous convient;)

progressive-image.js - Composant <ProgressiveImage/>

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

export default class ProgressiveImage extends Component {
  state = { showDefault: true, error: false };

  render() {
    var image = this.state.showDefault ? require('loading.png') : ( this.state.error ? require('error.png') : { uri: this.props.uri } );

    return (
      <Image style={this.props.style} 
             source={image} 
             onLoadEnd={() => this.setState({showDefault: false})} 
             onError={() => this.setState({error: true})}
             resizeMode={this.props.resizeMode}/>
    );
  }
}

Puis importez et appelez le composant comme ceci: 

import ProgressiveImage from './progressive-image';

<ProgressiveImage style={{width: 100, height: 100}} 
                  uri={'http://abc.def/ghi.jpg'} 
                  resizeMode='contain'/>

J'espère que cette réponse peut vous aider;)

1
Wing Choy

Selon le docs , la propriété defaultSource est ignorée sous Android sur les versions Debug. Par conséquent, si vous recherchez un espace réservé pendant le chargement de la source réelle (et non en cas d'erreur), veillez à tester en mode de publication. avant d'implémenter des solutions de contournement pour le charger uniquement à cause du mode débogage.

"Remarque: sous Android, l'hôte source par défaut est ignoré dans les versions de débogage."

1
GucaTEC