React Native Deck Swiper est un composant React Native puissant inspiré de Tinder, permettant d'implémenter des interactions de balayage de cartes fluides et engageantes. Cet article explore en détail les méthodes de personnalisation des étiquettes de glissement et des calques superposés pour créer une expérience utilisateur unique et intuitive.
Principes des Étiquettes de Glissement
Au cœur de React Native Deck Swiper se trouve un système d'étiquettes qui fournit un feedback visuel directionnel lorsque l'utilisateur interagit avec une carte. Le composant définit plusieurs types d'étiquettes de base :
const DIRECTIONS_GLISSEMENT = {
AUCUNE: 'none',
GAUCHE: 'left',
DROITE: 'right',
HAUT: 'top',
BAS: 'bottom'
};
Ces étiquettes apparaissent automatiquement en fonction de la direction du balayage (gauche, droite, haut, bas), offrant des indicateurs clairs à l'utilisateur.
Personnalisation Basique des Étiquettes
La manière la plus directe de personnaliser les étiquettes de glissement est d'utiliser la propriété overlayLabels. Cette propriété permet de définir le contenu et le style des étiquettes pour chaque direction de balayage. Voici un exemple simple :
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Swiper from 'react-native-deck-swiper';
const MonComposantDeckSwiper = () => {
const cartes = [{ id: 1, text: 'Carte 1' }, { id: 2, text: 'Carte 2' }];
const rendreCarte = (carte) => (
<view style="{styles.carte}">
<text style="{styles.texteCarte}">{carte.text}</text>
</view>
);
return (
<swiper autres="" backgroundcolor:="" cards="{cartes}" color:="" distinct="" fontsize:="" fontweight:="" label:="" left:="" loop="{false}" overlaylabels="{{" prononc="" propri="" rendercard="{rendreCarte}" right:="" rouge="" stacksize="{3}" style:="" title:="" vert=""></swiper>
);
};
const styles = StyleSheet.create({
carte: {
flex: 1,
borderRadius: 8,
borderWidth: 2,
borderColor: '#E8E8E8',
justifyContent: 'center',
backgroundColor: 'white',
alignItems: 'center',
},
texteCarte: {
fontSize: 25,
backgroundColor: 'transparent'
}
});
export default MonComposantDeckSwiper;
Ce code affichera une étiquette "Passer" en rouge lors d'un balayage vers la gauche et une étiquette "Match!" en vert lors d'un balayage vers la droite.
Styles Avancés pour les Étiquettes
Le composant Deck Swiper offre des options de style étendues pour contrôler précisément l'apparence de vos étiquettes. Vous pouvez utiliser les propriétés overlayLabelStyle (pour le texte de l'étiquette) et overlayLabelWrapperStyle (pour le conteneur de l'étiquette).
Par exemple, pour créer une étiquette avec un effet de rotation et des bordures :
overlayLabelStyle: {
fontSize: 40,
fontWeight: 'bold',
color: 'white',
transform: [{ rotate: '-25deg' }], // Légère rotation
paddingVertical: 12,
paddingHorizontal: 18,
borderRadius: 12,
borderWidth: 3,
borderColor: 'white'
}
Ces définitions de style, par défaut dans le code source de Swiper.js, peuvent être facilement surchargées.
Utilisation d'Éléments Personnalisés comme Étiquettes
Au-delà du simple texte, il est possible d'utiliser n'importe quel élément React comme contenu d'étiquette, ouvrant la porte à des designs complexes avec des icônes, des images ou même des animations :
import Icon from 'react-native-vector-icons/FontAwesome'; // Assurez-vous d'avoir installé cette bibliothèque
// ... dans votre composant Swiper
overlayLabels={{
top: {
element: (
<view alignitems:="" backgroundcolor:="" borderradius:="" flexdirection:="" padding:="" style="{{">
<icon color="white" marginright:="" name="bookmark" size="{28}" style="{{"></icon>
<text color:="" fontsize:="" fontweight:="" style="{{">Sauvegarder</text>
</view>
)
}
}}
Cette approche permet de créer des étiquettes visuellement riches et informatives.
Animation de l'Opacité des Calques
React Native Deck Swiper supporte l'ajustement dynamique de l'opacité des étiquettes en fonction de la distance de glissement. En définissant animateOverlayLabelsOpacity à true, vous pouvez obtenir un effet d'apparition progressive :
<swiper animateoverlaylabelsopacity="{true}" autres="" correspondante="" de="" distance="" en="" glissement="" inputoverlaylabelsopacityrangex="{[-180," opacit="" outputoverlaylabelsopacityrangex="{[1," propri="" x=""></swiper>
Les tableaux inputOverlayLabelsOpacityRangeX et outputOverlayLabelsOpacityRangeX définissent respectivement les plages de distance de glissement et les valeurs d'opacité associées.
Désactivation des Étiquettes par Direction
Si vous souhaitez désactiver le balayage et l'affichage des étiquetttes pour une direction spécifique, uitlisez les propriétés suivantes :
disableLeftSwipedisableRightSwipedisableTopSwipedisableBottomSwipe
Définissez simplement la propriété correspondante à true pour empêcher le balayage dans cette direction et masquer l'étiquette.
Exemple Complet d'Implémentation
Voici un exemple intégré démontrant l'application de différentes techniques de personnalisation :
import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Swiper from 'react-native-deck-swiper';
import Icon from 'react-native-vector-icons/FontAwesome';
const CustomDeckSwiper = () => {
const [dataCartes, setDataCartes] = useState([
{ id: '1', text: 'Première carte' },
{ id: '2', text: 'Deuxième carte' },
{ id: '3', text: 'Troisième carte' },
{ id: '4', text: 'Quatrième carte' },
]);
const onSwiped = (cardIndex, direction) => {
console.log(`Carte ${dataCartes[cardIndex].text} balayée vers la ${direction}`);
};
const renderCardContent = (card) => (
<view style="{styles.cardContainer}">
<text style="{styles.cardText}">{card.text}</text>
</view>
);
return (
<view style="{styles.wrapper}">
<swiper cards="{dataCartes}" onswipedleft="{(index)" rendercard="{renderCardContent}"> onSwiped(index, 'gauche')}
onSwipedRight={(index) => onSwiped(index, 'droite')}
onSwipedTop={(index) => onSwiped(index, 'haut')}
onSwipedBottom={(index) => onSwiped(index, 'bas')}
overlayLabels={{
left: {
title: 'Ignorer',
style: {
label: {
backgroundColor: '#dc3545', // Rouge Bootstrap
color: 'white',
borderColor: 'white',
borderWidth: 2,
borderRadius: 10,
padding: 10,
transform: [{ rotate: '30deg' }]
},
wrapper: styles.overlayWrapperLeft
}
},
right: {
title: 'J\'aime',
style: {
label: {
backgroundColor: '#28a745', // Vert Bootstrap
color: 'white',
borderColor: 'white',
borderWidth: 2,
borderRadius: 10,
padding: 10,
transform: [{ rotate: '-30deg' }]
},
wrapper: styles.overlayWrapperRight
}
},
top: {
element: (
<view style="{styles.topOverlayElement}">
<icon color="white" name="star" size="{32}"></icon>
<text style="{styles.topOverlayText}">Favori</text>
</view>
),
style: {
wrapper: styles.overlayWrapperTop
}
}
}}
animateOverlayLabelsOpacity={true}
horizontalThreshold={120}
verticalThreshold={120}
backgroundColor={'#f0f2f5'}
stackSize={3}
loop={true}
cardIndex={0}
/>
</swiper></view>
);
};
const styles = StyleSheet.create({
wrapper: {
flex: 1,
paddingTop: 40, // Pour éviter la barre de statut
backgroundColor: '#f0f2f5'
},
cardContainer: {
flex: 0.7,
borderRadius: 15,
borderWidth: 2,
borderColor: '#e0e0e0',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ffffff',
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 3,
},
cardText: {
fontSize: 28,
fontWeight: '600',
color: '#333',
},
overlayWrapperLeft: {
flexDirection: 'column',
alignItems: 'flex-end',
justifyContent: 'flex-start',
marginTop: 30,
marginLeft: -30
},
overlayWrapperRight: {
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'flex-start',
marginTop: 30,
marginRight: -30
},
overlayWrapperTop: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'flex-end',
marginBottom: -30
},
topOverlayElement: {
backgroundColor: '#007bff', // Bleu Bootstrap
paddingVertical: 12,
paddingHorizontal: 20,
borderRadius: 20,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.2,
shadowRadius: 2,
elevation: 2,
},
topOverlayText: {
color: 'white',
fontSize: 24,
fontWeight: 'bold',
marginLeft: 10
}
});
export default CustomDeckSwiper;
Cet exemple illustre trois types d'étiquettes distinctes : "Ignorer" (rouge, avec rotation), "J'aime" (vert, avec rotation inverse), et une étiquette "Favori" personnalisée en haut avec une icône et un texte. Les styles des wrappers sont également ajustés pour positionner les étiquettes de manière plus spécifique.
Conseils pour une Expériance Utilisateur Optimale
La personnalisation des étiquettes et des calques est essentielle pour affiner l'expérience utilisateur de React Native Deck Swiper. Pour des résultats optimaux, considérez les points suivants :
- Cohérence Visuelle : Assurez-vous que les styles des étiquettes s'alignent avec la charte graphique globale de votre application.
- Clarté du Feedback : Utilisez des couleurs distinctes, des polices lisibles et des textes concis pour fournir un feedback instantané et compréhensible sur l'action de l'utilisateur.
- Modération des Animations : Les effets d'opacité et de rotation peuvent enrichir l'interaction, mais utilisez-les avec parcimonie pour éviter de surcharger l'interface.
- Tests Approfondis : Vérifiez le rendu et le comportement des étiquettes sur diverses tailles d'écran et orientations d'appareils pour garantir une expérience uniforme.
En exploitant ces options de personnalisation, vous pouvez créer des interfaces de balayage de cartes à la fois esthétiques et très fonctionnelles, ajoutant une valeur significative à vos applications React Native.