Tinder wie React Native Card Stack Swiper

Blog

Tinder wie React Native Card Stack Swiper

reagieren-native-kartenstapel-swiper

Tinder-ähnlicher reaktiver Kartenstapel-Swiper



Installation

npm install --save react-native-card-stack-swiper

Vorschau

App-Vorschau App-Vorschau2

import CardStack, { Card } from 'react-native-card-stack-swiper'; { this.swiper = swiper }}> A B C

Kartenstapel

CardStack-Requisiten

Requisiten Typ Bezeichnung erforderlich Ursprünglich
Stil Objekt Container-Stil {}
cardContainerStyle Objekt cardContainerStyle-Stil {}
zweiteKarteZoom Nummer Zweiter Kartenzoom 0,95
Dauer Nummer Animationsdauer 300
initialIndex Nummer erste Kartei 0
Schleife bool Wische unbegrenzt weiter falsch
renderNoMoreCards Funktion falsch
TopSwipe deaktivieren bool Top-Swipe deaktivieren falsch
deaktivierenBottomSwipe bool unten wischen deaktivieren falsch
deaktivierenLeftSwipe bool wischen nach links deaktivieren falsch
deaktivierenRightSwipe bool Swipe nach rechts deaktivieren falsch
vertikalSwipe bool vertikales Wischen aktivieren/deaktivieren wahr
horizontales Wischen bool horizontales Wischen aktivieren/deaktivieren wahr
vertikaler Schwellenwert Nummer vertikaler Wischschwellenwert Höhe / 4
horizontaler Schwellenwert Nummer horizontale Wischschwelle Breite/2
AusgabeRotationRange Array Rotationswerte für die x-Werte [‘-15deg’, ‘0deg’, ‘15deg’]

CardStack-Ereignisse

Requisiten Typ Bezeichnung
onSwipeStart Funktion Funktion, die aufgerufen wird, wenn ein Kartendurchzug beginnt
onSwipeEnd Funktion Funktion, die aufgerufen wird, wenn ein Kartendurchzug endet (Karte wird freigegeben)
aufSwiped Funktion Funktion, die aufgerufen wird, wenn eine Karte gezogen wird. es erhält die durchgezogene Kartei
aufSwipedLinks Funktion Funktion, die aufgerufen wird, wenn eine Karte nach links gezogen wird. es erhält die durchgezogene Kartei
aufSwipedRight Funktion Funktion, die aufgerufen wird, wenn eine Karte nach rechts gezogen wird. es erhält die durchgezogene Kartei
onSwipedTop Funktion Funktion, die aufgerufen wird, wenn eine Karte nach oben gezogen wird. es erhält die durchgezogene Kartei
onSwipedBottom Funktion Funktion, die aufgerufen wird, wenn eine Karte nach unten gezogen wird. es erhält die durchgezogene Kartei
aufSwipedAll asynchrone Funktion Funktion, die aufgerufen wird, wenn die letzte Karte gezogen wird. Könnte eine Aktion zum Aktualisieren von Karten auslösen
aufSwipe Funktion Funktion, die aufgerufen wird, wenn eine Karte gezogen wird. Es empfängt die aktuellen x- und y-Koordinaten

CardStack-Aktionen

Requisiten Typ
nach links wischen Funktion
wische nach rechts Funktion
nach unten streichen Funktion
wischenTop Funktion
goBackFromLeft Funktion
goBackFromRight Funktion
goBackFromBottom Funktion
goBackFromTop Funktion
{ this.swiper = swiper }}> A B { this.swiper.swipeLeft() }}> Left

Karte

Kartenrequisiten

Requisiten Typ Bezeichnung erforderlich Ursprünglich
Stil Objekt Container-Stil {}

Kartenereignisse

Requisiten Typ Bezeichnung
aufSwiped Funktion Funktion, die aufgerufen wird, wenn eine Karte gezogen wird.
aufSwipedLinks Funktion Funktion, die aufgerufen wird, wenn eine Karte nach links gezogen wird.
aufSwipedRight Funktion Funktion, die aufgerufen wird, wenn eine Karte nach rechts gezogen wird.
onSwipedTop Funktion Funktion, die aufgerufen wird, wenn eine Karte nach oben gezogen wird.
onSwipedBottom Funktion Funktion, die aufgerufen wird, wenn eine Karte nach unten gezogen wird.

Download-Details:

Autor: lhandel



GitHub: https://github.com/lhandel/react-native-card-stack-swiper

#reagieren-nativ #programmieren #reagieren