La gestion des images dans votre application en React Native

  • Avoir une image par défaut en attendant que l’image soit chargée.
  • Avoir une vision du chargement de l’image en cours.
  • Avoir une gestion des erreurs de chargement.
  • Avoir une bonne gestion du cache pour une utilisation de l’application offline de meilleure qualité.

Image de React Native

J’ai créé une application contenant une grille de photos qui sont stockées sur une serveur personnel qui n’est pas optimisé pour la gestion des médias. Nous allons donc avoir une vision où l’application va devoir combler — dans certain cas — les limitations du serveur.

imageCell = ({item, index}) => {
const imageMargin = 10;
const imageSize = ((Dimensions.get('screen').width-5*imageMargin)/4);
return (
<View style={{width:imageSize, height:imageSize, marginRight:imageMargin, marginBottom:imageMargin}}>
<Image style={{width:imageSize, height:imageSize}} source={{uri:item}} />
</View>
)
}
Première étape très simple
  • Si vous n’avez pas d’image par défaut, vous pouvez tout simplement ajouter une couleur de fond à votre images.
  • Si vous avez une image par défaut (dans mon exemple j’ai trouvé celle-ci http://www.bagherra.eu/accueil/orionthemes-placeholder-image/), vous pouvez la stocker dans votre application est l’afficher en lieu et place de votre image tant que celle-ci n’a pas correctement fini de charger grace à l’attribut defaultSource.
imageCell = ({ item, index }) => {
const imageMargin = 10;
const imageSize = ((Dimensions.get(‘screen’).width — 5 * imageMargin) / 4);
return (
<View style={{ width: imageSize, height: imageSize, marginRight: imageMargin, marginBottom: imageMargin }}>
<Image
style={{ width: imageSize, height: imageSize, backgroundColor: ‘#EFEFEF’ }}
defaultSource={require(‘./placeholder.png’)}
source={{ uri: item }} />
</View>
)
}
On peut voir à gauche sur iOS que le placeholder fonctionne bien, alors qu’à droite sur Android l’image ne s’affiche pas. On a donc recourt à la couleur de fond.
imageCell = ({ item, index }) => {
const imageMargin = 10;
const imageSize = ((Dimensions.get(‘screen’).width — 5 * imageMargin) / 4);
if (this.state.failed.includes(item)) {
return (
<View style={{ width: imageSize, height: imageSize, marginRight: imageMargin, marginBottom: imageMargin }}>
<Image
style={{ width: imageSize, height: imageSize, backgroundColor: ‘#EFEFEF’ }}
source={require(‘./unavailable.jpg’)} />
</View>
)
}
return (
<View style={{ width: imageSize, height: imageSize, marginRight: imageMargin, marginBottom: imageMargin }}>
<Image
style={{ width: imageSize, height: imageSize, backgroundColor: ‘#EFEFEF’ }}
defaultSource={require(‘./placeholder.png’)}
onError={() => this.onError(item)}
source={{ uri: item }} />
</View>
)
}
onError = (item) => {
let { failed } = this.state;
failed.push(item);
this.setState({failed});
}
L’image est ici différente en cas d’échec
Gestion de base du cache

react-native-fast-image de DylanVann

Nous allons donc mettre en place react-native-fast-image de DylanVann.

yarn add react-native-fast-image
cd ios && pod install && cd ..
import FastImage from ‘react-native-fast-image’;
[…]
imageCell = ({ item, index }) => {
const imageMargin = 10;
const imageSize = ((Dimensions.get(‘screen’).width — 5 * imageMargin) / 4);
return (
<View style={{ width: imageSize, height: imageSize, marginRight: imageMargin, marginBottom: imageMargin }}>
<FastImage
style={{ width: imageSize, height: imageSize }}
source={{ uri: item }} />
</View>
)
}
Utilisation de react-native-fast-image
imageCell = ({ item, index }) => {
const imageMargin = 10;
const imageSize = ((Dimensions.get(‘screen’).width — 5 * imageMargin) / 4);
if (this.state.failed.includes(item)) {
return (
<View style={{ width: imageSize, height: imageSize, marginRight: imageMargin, marginBottom: imageMargin }}>
<Image
style={{ width: imageSize, height: imageSize, backgroundColor: ‘#EFEFEF’ }}
source={require(‘./unavailable.jpg’)} />
</View>
)
}
return (
<View style={{ width: imageSize, height: imageSize, marginRight: imageMargin, marginBottom: imageMargin }}>
<FastImage
style={{ width: imageSize, height: imageSize, backgroundColor: ‘#EFEFEF’ }}
onError={() => this.onError(item)}
source={{ uri: item }} />
</View>
)
}
Gestion hors ligne des images
Avec Image de React Native
Avec FastImage

--

--

Show Runner de projets mobiles. Développeur React Native et passionné par les challenges du monde mobile.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Axel de Sainte Marie

Axel de Sainte Marie

Show Runner de projets mobiles. Développeur React Native et passionné par les challenges du monde mobile.