La gestion des images dans votre application en React Native

Image de React Native

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
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

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