react native slider intro Download - react native slider intro Quellcode Download

react native slider intro

Anderer Quellcode

v2.1.18

Herunterladen

? React-Native-Slider-Intro

bauen

Ein einfaches und vollständig anpassbares reagierbares natives Paket, das einen einzigartigen Schieberegler implementiert.

Installation

yarn add react-native-slider-intro

oder

npm install react-native-slider-intro --save

Ausführen des Beispielprojekts

iOS

yarn example ios

Android

yarn example android

Verwendung

Grundlegendes Beispiel

 import React from 'react' ;
import SliderIntro from 'react-native-slider-intro' ;

const slides = [
  {
    index : 1 ,
    title : 'First step' ,
    text : 'Simple description.' ,
    link : 'https://pccontroller.rnstudio.hu' ,
    image : require ( './images/step1.png' ) ,
    backgroundColor : '#febe29' ,
  } ,
  {
    index : 2 ,
    title : 'Second step' ,
    text : 'Simple description for the second step.' ,
    image : require ( './images/step2.png' ) ,
    backgroundColor : '#febe29' ,
  } ,
] ;

const BasicExample = ( { closeExample } : { closeExample : ( ) => void } ) => {
  return (
    < SliderIntro data = { slides } onDone = { closeExample } onSkip = { closeExample } / >
  ) ;
} ;

export default BasicExample ;

Das Paket enthält zwei Renderoptionen. Neben dem default render , wenn Sie data als Array von SliderIntroItemprops -Requisiten übergeben können, können Sie ein custom render mit children und numberOfSlides -Eigenschaften verwenden.

Eigenschaften

Name	Typ	Standardwert	Beschreibung
`data`	Array	[]	`Default render` - Array von Elementen. Kinder werden ignoriert, wenn Daten übergeben werden.
`numberOfSlides`	Array	Nummer	`Custom render` - Wenn Kinder übergeben werden, werden Daten ignoriert. In diesem Fall sind NummerOfslides erforderlich.
`children`	Reactnode	NULL	`Custom render` - JSX -Elemente zum Rendern.
`navigationBarBottom`	Nummer	0	Benutzerdefinierte Wert der Punktnavigationsposition der Punkte
`navigationBarHeight`	Nummer	70	Höhe des Punktnavigationsbehälters
`animateSlideSpeed`	Nummer	15	Geschwindigkeit der Slider -Animation
`navContainerMaxSizePercent`	Nummer	0,5	Prozentsatz der Breite des Navigationsbehälters
`dotWidth`	Nummer	12	Der Radius des Navigationskreises "Punkt"
`fixDotOpacity`	Nummer	0,35	Jede DOTS -Deckkraft, die keine Animation hat
`fixDotBackgroundColor`	Farbe	grau	Jeder Punkt Hintergrund, der keine Animation hat
`animatedDotBackgroundColor`	Farbe	Weiß	Jeder Punkt Hintergrund, der eine Animation hat
`animateDotSpeed`	Nummer	8	Geschwindigkeit der Punktanimation
`animateDotBouncing`	Nummer	2	Der 'Bounciness' -Wert aller Animationen. https://reactnative.dev/docs/animated#spring
`hasReactNavigation`	boolean	FALSCH	Es besteht ein Problem mit dem Verhalten des Backbutton, wenn Sie die Reaktionsnavigation verwenden. Sie sollten in diesem Fall `useFocusEffect` verwenden, um das erwartete Verhalten zu erreichen. Weitere Informationen: https://reactnavigation.org/docs/custom-android-back-button-handling/#why-not-use-component-lifecycle-methods
`useCustomBackHandlerEffect`	Funktion	keiner	Wie ich oben erwähnt habe, sollten wir manchmal das grundlegende Backhandler -Verhalten umschreiben. Diese Eigenschaft wird ein benutzerdefinierter Haken sein. Weitere Informationen finden Sie im Beispiel für weitere Informationen: React Navigation Custom Hook Beispiel
`backHandlerBehaviour`	Saite	Activeminuson	Diese Requisite kann das Verhalten des Backbutton kontrollieren. Der Wert sollte `activeMinusOne` oder `previous` sein
`skipLabel`	Saite	Überspringen	Benutzerdefinierte Beschriftung der Skip -Schaltfläche
`nextLabel`	Saite	Nächste	Benutzerdefinierte Etikett der nächsten Schaltfläche
`doneLabel`	Saite	Erledigt	Benutzerdefinierte Beschriftung der Taste Done
`renderSkipButton`	Funktion	Standard -Skip/vorherige Schaltfläche Rendererer	Verwendet, um Ihre eigene Skip/vorherige Taste zu liefern
`renderNextButton`	Funktion	Standard -Schaltfläche Nächste Schaltfläche Rendererer	Verwendet, um Ihren eigenen nächsten Schaltflächen zu liefern
`renderDoneButton`	Funktion	Standard -Taste mit Taste erledigt	Verwenden Sie, um Ihre eigene Taste zu versorgen
`onDone`	Funktion	keiner	Verhalten von Taste Taste
`onSkip`	Funktion	keiner	Verhalten der Skip -Taste
`showLeftButton`	boolean	WAHR	Zeigen Sie den Übersprung oder die vorherige Taste auf der linken Seite
`leftButtonType`	Saite	überspringen	Der Tastentyp auf der linken Seite sollte `skip` oder `previous` sein
`columnButtonStyle`	boolean	FALSCH	Tasten werden in einer Spalte angezeigt
`showStatusBar`	boolean	FALSCH	Zeigen Sie die Statusleiste auf dem Bildschirm an. Sie können Ihre eigene Statusleiste außerhalb dieser Komponente erstellen
`statusBarColor`	Farbe	#FEBE29	Hintergrundfarbe der Statusleiste
`renderStatusBar`	Funktion	Standard -Statusleiste -Renderer	Verwendet, um Ihre eigene Statusleistenkomponente zu liefern
`limitToSlide`	Nummer	(Gerät maximal Breite) * 0,35	Verwenden Sie, um die Grenze der Dia -Animation zu ändern. Es wird basierend auf der Panresponder -Geste.dx -Eigenschaft des `gestureState.dx` berechnet.

Beispiele

Grundlegendes Beispiel
Beispiel für Spaltenschaltflächen
Beispiel für benutzerdefinierte Schaltflächen
Vorheriges Schaltfläche Beispiel
Beispiel für Statusleisten
Beispiel für benutzerdefinierte Slider -Renderfunktion
React Navigation Custom Hook Beispiel (kann nicht ausgeführt werden, die Datei enthält weitere Informationen, wie Sie sie testen können.)
Ein weiteres Beispiel zum Anpassen des Pakets mit Bibliotheken von Drittanbietern.

Fehlerbehebung

Berührungsvermögen Onpress-Funktion: Ich habe ein neues Problem im offiziellen React-nativen Repository erstellt, da TouchableOpacity , Button und Pressable im PanResponder nicht mit React-Navigation NavigationContainer arbeiten. Meine Lösung: Importierbar TouchableWithoutFeedback von react-native-gesture-handler anstelle von react-native und verwenden Sie onPressIn anstelle von onPress -Funktion und überschreiben Sie die RenderItem-Funktion.