react native slider intro Download - react native slider intro Code Source Download

react native slider intro

Autre code source

v2.1.18

Télécharger

? react-native-slider-intro

construire

Un package natif React simple et complet personnalisable qui implémente un curseur unique.

Installation

yarn add react-native-slider-intro

ou

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

Exécution de l'exemple de projet

ios

yarn example ios

Androïde

yarn example android

Usage

Exemple de base

 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 ;

Le package comprend deux options de rendu. Outre le default render lorsque vous pouvez transmettre data comme un tableau d'accessoires SliderintroItemprops, vous pouvez utiliser un custom render avec children et des propriétés numberOfSlides .

Propriétés

Nom	Taper	Valeur par défaut	Description
`data`	tableau	[]	`Default render` - tableau d'articles. Les enfants seront ignorés si les données sont passées.
`numberOfSlides`	tableau	nombre	`Custom render` - Si les enfants sont passés, les données seront ignorées. NuméroOfSLides est requis dans ce cas.
`children`	Reactnode	nul	`Custom render` - Éléments JSX à rendre.
`navigationBarBottom`	nombre	0	Valeur personnalisée de la position du bas du conteneur de navigation à points
`navigationBarHeight`	nombre	70	Hauteur du conteneur de navigation à points
`animateSlideSpeed`	nombre	15	Vitesse de l'animation du curseur
`navContainerMaxSizePercent`	nombre	0,5	Pourcentage de valeur de la largeur du conteneur de navigation
`dotWidth`	nombre	12	Le rayon du cercle de navigation «point»
`fixDotOpacity`	nombre	0,35	Chaque opacité de points qui n'ont pas d'animation
`fixDotBackgroundColor`	couleur	gris	Chaque fond de points qui n'a pas d'animation
`animatedDotBackgroundColor`	couleur	blanc	Chaque fond de points qui a une animation
`animateDotSpeed`	nombre	8	Vitesse de l'animation DOT
`animateDotBouncing`	nombre	2	La valeur «rebond» de toutes les animations. https://rectnative.dev/docs/animated#spring
`hasReactNavigation`	booléen	FAUX	Il y a un problème avec le comportement du bétail lorsque vous utilisez React Navigation. Vous devez utiliser `useFocusEffect` dans ce cas pour atteindre le comportement attendu. Plus d'informations: https://rectnavigation.org/docs/custom-android-back-button-handling/#why-not-use-component-lifecycle-methods
`useCustomBackHandlerEffect`	fonction	aucun	Comme je l'ai mentionné ci-dessus, nous devons parfois réécrire le comportement de base du backhandler . Cette propriété sera un crochet personnalisé. Voir l'exemple pour plus d'informations: React Navigation Custom Hook Exemple
`backHandlerBehaviour`	chaîne	activeminusone	Cet accessoire peut contrôler le comportement de l'arrière-plan. La valeur doit être `activeMinusOne` ou `previous`
`skipLabel`	chaîne	Sauter	Étiquette personnalisée du bouton de saut
`nextLabel`	chaîne	Suivant	Étiquette personnalisée du bouton Suivant
`doneLabel`	chaîne	Fait	Étiquette personnalisée du bouton Terminé
`renderSkipButton`	fonction	Skip par défaut / Rendu de bouton précédent	Utiliser pour fournir votre propre bouton Skip / Précédent
`renderNextButton`	fonction	Rendu de bouton Suivant par défaut	Utilisez pour fournir votre propre bouton Suivant
`renderDoneButton`	fonction	Rendu à bouton fait par défaut	Utiliser pour fournir votre propre bouton Terminé
`onDone`	fonction	aucun	Comportement du bouton fait
`onSkip`	fonction	aucun	Comportement du bouton de saut
`showLeftButton`	booléen	vrai	Afficher le bouton sauter ou précédent sur le côté gauche
`leftButtonType`	chaîne	sauter	Le type de bouton sur le côté gauche doit être `skip` ou `previous`
`columnButtonStyle`	booléen	FAUX	Les boutons apparaîtront dans une colonne
`showStatusBar`	booléen	FAUX	Afficher la barre d'état sur l'écran. Vous pouvez faire votre propre barre de statut en dehors de ce composant
`statusBarColor`	couleur	# febe29	Couleur d'arrière-plan de la barre d'état
`renderStatusBar`	fonction	Rendu de la barre d'état par défaut	Utiliser pour fournir votre propre composant de barre d'état
`limitToSlide`	nombre	(Largeur maximale de l'appareil) * 0,35	Utilisez pour modifier la limite de l'animation de diapositive. Il est calculé sur la base de la propriété `gestureState.dx` du Panresponder.

Exemples

Exemple de base
Exemple de boutons de colonne
Exemple de boutons personnalisés
Exemple de bouton précédent
Exemple de barre d'état
Exemple de fonction de rendu de curseur personnalisé
React Navigation Custom Hook Exemple (ne peut pas être exécuté, le fichier comprend plus d'informations sur la façon de les tester.)
Un autre exemple pour personnaliser le package avec des bibliothèques tierces.

Dépannage

Fonction ToucableOpacity OnPress: J'ai créé un nouveau problème sur le référentiel réactif officiel, car TouchableOpacity , Button et Pressable ne fonctionnent pas à l'intérieur PanResponder avec React Navigation NavigationContainer . Ma solution: Importer TouchableWithoutFeedback de react-native-gesture-handler au lieu de react-native et utilisez onPressIn au lieu de la fonction onPress , puis écrasez la fonction RendeRitem.