react native slider intro

? React-native-slider-intro

Um pacote nativo de reação personalizável simples e completo que implementa um controle deslizante exclusivo.

Instalação

yarn add react-native-slider-intro

ou

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

Executando o projeto de exemplo

iOS

yarn example ios

Android

yarn example android

Uso

Exemplo 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 ;

O pacote inclui duas opções de renderização. Além da default render quando você pode passar data como uma variedade de adereços de sliderIntroItemProps, você pode usar uma custom render com children e propriedades numberOfSlides .

Propriedades

Nome	Tipo	Valor padrão	Descrição
data	variedade	[]	Default render - matriz de itens. As crianças serão ignoradas se os dados forem passados.
numberOfSlides	variedade	número	Custom render - Se as crianças forem aprovadas, os dados serão ignorados. Númerofslides é necessário neste caso.
children	ReactNode	nulo	Custom render - elementos JSX para renderizar.
navigationBarBottom	número	0	Valor personalizado da posição inferior do contêiner de navegação de pontos
navigationBarHeight	número	70	Altura do contêiner de navegação de pontos
animateSlideSpeed	número	15	Velocidade da animação deslizante
navContainerMaxSizePercent	número	0,5	Valor percentual da largura do contêiner de navegação
dotWidth	número	12	O raio do círculo de navegação 'ponto'
fixDotOpacity	número	0,35	Cada opacidade dos pontos que não têm animação
fixDotBackgroundColor	cor	cinza	Cada fundo de pontos que não têm uma animação
animatedDotBackgroundColor	cor	branco	Cada fundo de pontos que têm uma animação
animateDotSpeed	número	8	Velocidade de animação de pontos
animateDotBouncing	número	2	O valor de 'saltitante' de todas as animações. https://reactnative.dev/docs/animated#spring
hasReactNavigation	booleano	falso	Há um problema com o comportamento do butão quando você está usando a navegação react. Você deve usar useFocusEffect nesse caso para alcançar o comportamento esperado. Mais informações: https://reactnavigation.org/docs/custom-android-back-button-handling/#why-not-use-component-lifecycle-methods
useCustomBackHandlerEffect	função	nenhum	Como mencionei acima, às vezes devemos reescrever o comportamento básico dos traficantes . Esta propriedade será um gancho personalizado. Veja o exemplo para obter mais informações: React Naveigat Custom Hook Exemplo
backHandlerBehaviour	corda	ActiveMinusOne	Este suporte pode controlar o comportamento do butão. O valor deve ser activeMinusOne ou previous
skipLabel	corda	Pular	Etiqueta personalizada do botão de pular
nextLabel	corda	Próximo	Etiqueta personalizada do próximo botão
doneLabel	corda	Feito	Etiqueta personalizada do botão feito
renderSkipButton	função	Renderizador de botão Skip/Anterior	Use para fornecer seu próprio botão pular/anterior
renderNextButton	função	Renderizador de botão padrão padrão	Use para fornecer seu próprio botão próximo
renderDoneButton	função	Renderizador de botão padrão feito	Use para fornecer seu próprio botão feito
onDone	função	nenhum	Comportamento do botão feito
onSkip	função	nenhum	Comportamento do botão de pular
showLeftButton	booleano	verdadeiro	Mostre o skip ou o botão anterior no lado esquerdo
leftButtonType	corda	pular	O tipo de botão no lado esquerdo deve ser skip ou previous
columnButtonStyle	booleano	falso	Os botões aparecerão em uma coluna
showStatusBar	booleano	falso	Mostre a barra de status na parte superior da tela. Você pode fazer sua própria barra de status fora deste componente
statusBarColor	cor	#febe29	Cor de fundo da barra de status
renderStatusBar	função	Renderizador de barra de status padrão	Use para fornecer seu próprio componente de barra de status
limitToSlide	número	(Largura máxima do dispositivo) * 0,35	Use para alterar o limite da animação do slide. É calculado com base na propriedade gestureState.dx do PanResponder.

Exemplos

• Exemplo básico
• Exemplo de botões de coluna
• Exemplo de botões personalizados
• Exemplo de botão anterior
• Exemplo de barra de status
• Exemplo de função de renderização deslizante personalizada
• Exemplo de gancho personalizado de navegação reagir (não pode ser executado, o arquivo inclui mais informações como você pode testá -lo.)
• Outro exemplo para personalizar o pacote com bibliotecas de terceiros.

Solução de problemas

TouchableOpacity OnPress Função: criei um novo problema no repositório oficial do React-native, porque TouchableOpacity , Button e Pressable não funcionam dentro PanResponder com NavigationContainer de navegação react. Minha solução: Importar TouchableWithoutFeedback do react-native-gesture-handler em vez de react-native e usar onPressIn em vez de função onPress e depois substitua a função renderitem.

Contribuindo

Consulte o guia contribuinte para aprender a contribuir para o repositório e o fluxo de trabalho de desenvolvimento.

Licença

Mit