Una interfaz de usuario paso a paso de React Native Progress simple y completamente personalizable
react-native-progress-steps
Un componente React Native simple y completamente personalizable que implementa una interfaz de usuario progresiva.
- El contenido de cada paso se muestra dentro de un ScrollView personalizable.
- Los botones totalmente personalizables se muestran en la parte inferior del componente para moverse entre los pasos.
| Ejemplo uno | Ejemplo dos |
|---|---|
 ejemplos / ExampleOne.js |  ejemplos / ExampleTwo.js |
Instalación
Si usa hilo:
javascript mapa obtener índice|_+_|
Si usa npm:
|_+_|
Uso
|_+_|Simplemente coloque un yarn add react-native-progress-steps etiqueta para cada paso deseado dentro de npm i react-native-progress-steps envoltura.
|_+_|
Uso de estilo de botones
El contenedor de botones y el texto son completamente personalizables usando import { ProgressSteps, ProgressStep } from 'react-native-progress-steps'; accesorios.
Ejemplo de uso para cambiar el color del texto de un botón:
|_+_|Manejo de validación y error de paso actual
El prop debe usarse si es necesario validar y manejar errores al hacer clic en el botón siguiente. Si desea evitar que se procese el siguiente paso, establezca prop en This is the content within step 1! This is the content within step 2! This is the content within step 3! . Por defecto, será nextBtnStyle, nextBtnTextStyle, previousBtnStyle, and previousBtnTextStyle.
aspirantes a mentes amazonas preguntas
Ejemplo de uso de verificación de validación:
|_+_|Documentación
Componente de pasos de progreso
| Nombre | Descripción | Defecto | Escribe |
|---|---|---|---|
| ancho del borde | Ancho de la barra de progreso entre pasos | 6 | Número |
| estilo de borde | Tipo de borde para la barra de progreso | sólido | Cuerda |
| activeStepIconBorderColor | Color del borde exterior del paso activo | # 4bb543 | Cuerda |
| progressBarColor | Color de la barra de progreso predeterminada | # ebebe4 | Cuerda |
| completedProgressBarColor | Color de la barra de progreso completa | # 4bb543 | Cuerda |
| activeStepIconColor | Color del icono de paso activo | transparente | Cuerda |
| completedStepIconColor | Color del icono de paso completado | # 4bb543 | Cuerda |
| disabledStepIconColor | Color del icono de paso desactivado | # ebebe4 | Cuerda |
| labelFontFamily | Familia de fuentes para la etiqueta del icono de paso | Fuente predeterminada de iOS / Android | Cuerda |
| labelColor | Color de la etiqueta predeterminada | gris claro | Cuerda |
| activeLabelColor | Color de la etiqueta activa | # 4bb543 | Cuerda |
| completeLabelColor | Color de la etiqueta completa | gris claro | Cuerda |
| activeStepNumColor | Color del número de paso activo | negro | Cuerda |
| completedStepNumColor | Color del número de paso completado | negro | Cuerda |
| disabledStepNumColor | Color del número de paso desactivado | blanco | Cuerda |
| completedCheckColor | Color de la marca de verificación del paso completado | blanco | Cuerda |
| activeStep | Especificar manualmente el paso activo | 0 | Número |
| Esta completo | Establecer todos los pasos en estado activo | falso | Booleano |
Componente de paso de progreso
| Nombre | Descripción | Defecto | Escribe |
|---|---|---|---|
| etiqueta | Título del paso actual que se mostrará | nulo | Cuerda |
| En el siguiente | Función llamada cuando se presiona el botón de siguiente paso | nulo | funciones |
| onPrevious | Función llamada cuando se presiona el botón del paso anterior | nulo | funciones |
| onSubmit | Función llamada cuando se presiona el botón de paso de envío | nulo | funciones |
| nextBtnText | Texto para mostrar dentro del botón siguiente | próximo | Cuerda |
| previousBtnText | Texto para mostrar dentro del botón anterior | Anterior | Cuerda |
| finishBtnText | Texto para mostrar dentro del botón en el último paso | Enviar | Cuerda |
| nextBtnStyle | Objeto de estilo para proporcionar a los botones siguiente / final | {textAlign: 'center', padding: 8} | Objeto |
| nextBtnTextStyle | Objeto de estilo para proporcionar al texto del botón siguiente / finalizar | {color: '# 007aff', fontSize: 18} | Objeto |
| nextBtnDisabled | Valor para deshabilitar / habilitar el botón siguiente | falso | Booleano |
| anteriorBtnStyle | Objeto de estilo para proporcionar al botón anterior | {textAlign: 'center', padding: 8} | Objeto |
| previousBtnTextStyle | Objeto de estilo para proporcionar al texto del botón anterior | {color: '# 007aff', fontSize: 18} | Objeto |
| previousBtnDisabled | Valor para deshabilitar / habilitar el botón anterior | falso | Booleano |
| scrollViewProps | Objeto para proporcionar accesorios al componente ScrollView | {} | Objeto |
| errores | Se utiliza para ayudar con la validación del paso actual. Si es cierto, no se procesará el siguiente paso. | falso | Booleano |
| removeBtnRow | Se usa para representar el paso de progreso sin la fila del botón | falso | Booleano |
Contribuyendo
¡Las solicitudes de extracción son siempre bienvenidas! No dude en abrir un nuevo problema de GitHub para cualquier cambio que se pueda realizar.
¿Estás trabajando en tu primera solicitud de extracción? Puedes aprender como de esto gratis serie Cómo contribuir a un proyecto de código abierto en GitHub
preguntas de codificación de la entrevista de amazon
Detalles de descarga:
Autor: colbymillerdev
GitHub: https://github.com/colbymillerdev/react-native-progress-steps
# react-native # programación #react native