react native slider intro

? react-nativo-red-intro

Un paquete nativo React Simple y completo personalizable que implementa un control deslizante único.

Instalación

yarn add react-native-slider-intro

o

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

Ejecutando el proyecto de ejemplo

iOS

yarn example ios

Androide

yarn example android

Uso

Ejemplo básico

 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 ;

El paquete incluye dos opciones de renderizado. Además del default render cuando puede pasar data como una variedad de accesorios SliderIntroItMprops, puede usar un custom render con children y las propiedades numberOfSlides .

Propiedades

Nombre	Tipo	Valor predeterminado	Descripción
data	formación	[]	Default render : matriz de artículos. Los niños serán ignorados si se pasan los datos.
numberOfSlides	formación	número	Custom render : si se aprueban los niños, los datos serán ignorados. NumberOfSlides se requiere en este caso.
children	Reactnodo	nulo	Custom render - elementos JSX para renderizar.
navigationBarBottom	número	0	Valor personalizado de la posición inferior del contenedor de navegación de puntos
navigationBarHeight	número	70	Altura del contenedor de navegación de puntos
animateSlideSpeed	número	15	Velocidad de la animación del control deslizante
navContainerMaxSizePercent	número	0.5	Porcentaje de valor del ancho del contenedor de navegación
dotWidth	número	12	El radio del círculo de navegación 'puntos'
fixDotOpacity	número	0.35	Cada opacidad de puntos que no tiene animación
fixDotBackgroundColor	color	gris	Cada fondo de puntos que no tiene una animación
animatedDotBackgroundColor	color	blanco	Cada fondo de puntos que tienen una animación
animateDotSpeed	número	8	Velocidad de la animación del punto
animateDotBouncing	número	2	El valor de 'rebote' de todas las animaciones. https://reactnative.dev/docs/animated#spring
hasReactNavigation	booleano	FALSO	Hay un problema con el comportamiento de backbutton cuando está utilizando react-navegación. Debe usar useFocusEffect en este caso para alcanzar el comportamiento esperado. Más información: https://reactnavigation.org/docs/custom-doid-back-button-handling/#why-not-use-component-lifecycle-methods
useCustomBackHandlerEffect	función	ninguno	Como mencioné anteriormente, a veces debemos reescribir el comportamiento básico de fondo . Esta propiedad será un gancho personalizado. Vea el ejemplo para obtener más información: React Navigation Personal Hook Ejemplo
backHandlerBehaviour	cadena	activeminusona	Este accesorio puede controlar el comportamiento de la burbuja. El valor debe ser activeMinusOne o previous
skipLabel	cadena	Saltar	Etiqueta personalizada del botón Skip
nextLabel	cadena	Próximo	Etiqueta personalizada del botón siguiente
doneLabel	cadena	Hecho	Etiqueta personalizada del botón Hecho
renderSkipButton	función	Rensor de botón de omisión/botón anterior predeterminado	Use para suministrar su propio botón de omisión/anterior
renderNextButton	función	Representador de botón siguiente predeterminado	Use para proporcionar su propio botón siguiente
renderDoneButton	función	Renderizador de botón predeterminado	Use para suministrar su propio botón hecho
onDone	función	ninguno	Comportamiento del botón Hecho
onSkip	función	ninguno	Comportamiento del botón Skip
showLeftButton	booleano	verdadero	Mostrar omisión o botón anterior en el lado izquierdo
leftButtonType	cadena	saltar	El tipo de botón en el lado izquierdo debe skip o previous
columnButtonStyle	booleano	FALSO	Los botones aparecerán en una columna
showStatusBar	booleano	FALSO	Mostrar la barra de estado en la parte superior de la pantalla. Puede hacer su propia barra de estado fuera de este componente
statusBarColor	color	#febe29	Color de fondo de la barra de estado
renderStatusBar	función	Renderizador de barra de estado predeterminada	Uso para suministrar su propio componente de barra de estado
limitToSlide	número	(Ancho máximo del dispositivo) * 0.35	Use para cambiar el límite de la animación de diapositivas. Se calcula en función de la propiedad gestureState.dx de PanResponder.

Ejemplos

• Ejemplo básico
• Ejemplo de botones de columna
• Ejemplo de botones personalizados
• Ejemplo de botón anterior
• Ejemplo de barra de estado
• Ejemplo de función de render de control deslizante personalizado
• React Navigation Custom Hook Ejemplo (no se puede ejecutar, el archivo incluye más información sobre cómo puede probarlo).
• Otro ejemplo para personalizar el paquete con bibliotecas de terceros.

Solución de problemas

TouchablePacity OnPress Función: He creado un nuevo problema en el repositorio oficial de reaccionamiento-nativo, porque TouchableOpacity , Button y Pressable no funcionan dentro de PanResponder con React-Navigation NavigationContainer . Mi solución: importe TouchableWithoutFeedback de react-native-gesture-handler en lugar de react-native y use onPressIn en lugar de la función onPress y luego sobrescribe la función de renderitem.

Que contribuye

Consulte la guía contribuyente para aprender a contribuir al repositorio y al flujo de trabajo de desarrollo.

Licencia

MIT