Saltar al contenido

Cómo construir tarjetas React Native Swipe inspiradas en Tinder »Wiki Ùtil Instamobile

Ya sea que esté creando un clon de React Native Tinder o una aplicación de citas original, eventualmente terminará implementando la interfaz de usuario para React Native Swipe Cards. En Instamobile, creamos un componente de tarjetas Tinder en React Native, para nuestra aplicación Tinder Clone. Si está buscando aprender a crear una aplicación como Tinder en React Native, este tutorial es el lugar perfecto para comenzar.

¿Usaste Tinder? En caso afirmativo, es posible que esté familiarizado con la función de deslizamiento, donde un deslizamiento hacia la derecha significa “me gusta” y un deslizamiento hacia la izquierda significa “no me gusta”. Para aquellos que no lo saben, dos usuarios se deslizan el uno sobre el otro y luego pueden comenzar a chatear en la aplicación. En el artículo de hoy, vamos a crea un componente de deslizamiento de tarjetas similar a Tinder en React Native.

El componente de deslizador de tarjeta proporciona una apariencia y una sensación asombrosas para mostrar información. Espero que no seas nuevo en React Native porque ya hemos discutido cómo configurar React Native y otras cosas en tutoriales anteriores. Después de configurar React Native, creemos una matriz de imágenes que se mostrará al deslizar el dedo. Eche un vistazo al código que se proporciona a continuación:

Implementación de la vista principal de imágenes deslizables

En primer lugar, crearemos una matriz de imágenes. Es solo una simple matriz de imágenes, codificadas en JavaScript puro.

Ahora definamos la capa de vista para deslizadores de tarjetas como dimensión, ancho y alto. Preparando la etapa de la tarjeta:

Para compatibilidad entre dispositivos, obtenemos el dispositivo ancho y altura de una variable de entorno, que es dinámica y corresponde a la altura y el ancho del dispositivo. Usamos Dimension y almacenamos los valores en dos constantes:

Animación de imágenes con vista animada

es la biblioteca que estamos usando para crear hermosas animaciones de interfaz de usuario, como la animación Swipe similar a Tinder. Se envía con React Native, por lo que no es necesario agregar ningún paquete adicional.

Vamos a importar la biblioteca de animaciones. primero, y luego podemos comenzar a usarlo en nuestro proyecto.

Agregue una imagen a la capa de vista de nuestra aplicación para asegurarse de que el estilo inicial funcione como se esperaba. Ahora podemos usar Animated.View, como se muestra en el fragmento de código React Native a continuación:

Como puede ver, primero agregamos la biblioteca animada a nuestro proyecto. Después de eso, agregamos la vista animada para la animación en la pantalla / Observe cómo usamos la altura y el ancho del dispositivo para definir el estilo. Esto asegura que las tarjetas de Tinder se mostrarán correctamente en todos los tamaños de dispositivos.

En segundo lugar, agregaremos una imagen y usaremos ancho y altura de su contenedor. También agregamos un poco de estilo para que la imagen encaje bien dentro del contenedor.

Para especificar la fuente de la URL de la imagen, estamos usando la matriz codificada, que agregamos al principio. Ejecute su aplicación en su iPhone o Android y debería ver el siguiente resultado:Reaccionar tarjetas deslizantes nativas

Generación de la pila de tarjetas React Native Swipe

En el siguiente paso, estamos generando la pila React Native Swipe Cards con las imágenes deslizables. He creado una nueva función que se está utilizando para representar las imágenes de una matriz con el iterador del mapa.

Como puede ver, tomamos cada imagen animada aprovechando el método del mapa, luego obtenemos el URI de la imagen de la matriz con la ayuda de una variable iteradora. Pero con este código, recibimos una advertencia del compilador como se muestra en la imagen. Profundicemos y codifiquemos un poco más para mitigar las advertencias de compilación.

El compilador nos dice que agreguemos una clave única a cada nodo hijo, así que hagámoslo primero.

Ok, ejecutemos nuestra aplicación de citas nuevamente. La advertencia debería desaparecer, pero las imágenes no se acumulan como nos gustaría.

Para resolver este nuevo problema que acaba de surgir, mejoremos la temática, usando una posición absoluta para las tarjetas de Tinder:

Ahora, su aplicación debería mostrar las imágenes apiladas muy bien.Aplicación React Native Dating

Funcionalidad de arrastre de tarjetas con PanResponder

Ahora que tenemos toda la capa de la interfaz de usuario resuelta, llegó el momento de abordar la parte más difícil: arrastrar, animar y rotar. En esta sección, nos ocupamos del movimiento de animación. Para eso, necesitamos importar una biblioteca más llamada Panresponder.

Inicialicemos un evento panresponder y agreguemos la biblioteca al componente.

¿Qué estamos haciendo en el código anterior? En este fragmento de código, estamos creando un objeto PanResponder y lo asignamos al componente. Después de eso, estamos agregando tres métodos. onStartShouldSetPanResponder para inicializar, onPanResponderMove controlador de eventos para el gesto en movimiento y onPanResponderRelease para el gesto del controlador de eventos de liberación.

A continuación, conectamos la posición del gesto a la biblioteca animada usando Animated.ValueXY. Cree un constructor y una nueva variable para manejar la posición del vector:

Asignemos el valor del vector con onPanResponderMove. Usamos el valor ajustado método y luego obtener el valor XY de gestoEstado.

Conectemos ahora el controlador de eventos y el objeto de animación para que funcionen juntos. Aplicamos el controlador de eventos a la etapa de Animación y aplicamos una posición de vector al estilo:

Probemos la implementación del primer movimiento. Mira la siguiente pantalla:

Limitando Panresponder a solo la primera carta

Actualmente, puede ver que todas las imágenes de la pila de imágenes se mueven mientras usamos gestos. Pero necesitamos aplicar un controlador de eventos para que solo se mueva la primera carta al usar nuestra animación de gestos. Para hacer eso, definimos la primera posición del índice. Con la ayuda de la posición del índice, podremos acceder a la primera imagen de la pila de imágenes de la matriz.

Ahora, aplicamos la animación panorámica solo al primer índice:

Ahora actualice su pantalla nuevamente y mueva la primera imagen nuevamente:Tinder clon React Native

Si me estás siguiendo, puedes ver no funciona. Porque la primera imagen en la que estamos aplicando la animación está en la parte inferior de la pila y la imagen que ves es el último índice. ¿Entonces, qué debemos hacer?

Es fácil. Invirtamos la pila con el contrarrestar método:

Actualice la aplicación móvil nuevamente. ¡Auge! Ahora puede ver que solo se mueve una imagen. Definamos los movimientos y gestos para las tarjetas React Native Swipe.

Diseñando el movimiento de las cartas de Tinder

Como viste antes, podemos mover una tarjeta Tinder a cualquier camino, en cualquier dirección. Esto no es como el Tinder Swipe y queremos construir un clon de Tinder perfecto, así que diseñemos un movimiento de tarjeta correcto para construir una aplicación como Tinder. Entonces, primero, limitamos la curva de movimiento de la tarjeta:

Creamos una variable llamada girar. En esta variable, llamaremos interpolar() en esta posición. interpolar()es un método que está disponible para ser llamado en cualquier Animated.Value e interpola el valor de la coordenada, antes de actualizar la propiedad de la interfaz de usuario (por ejemplo, mapeando 0-1 a 0-100).

Entonces, en nuestro ejemplo:

rango de entrada es una longitud del área que puede alcanzar la animación. El primer valor es para moverse a la izquierda, el segundo valor es un valor inicial, el tercer valor es para moverse a la derecha.

outputRange cuando se mueve hacia la derecha, la tarjeta caerá -10 grados y cuando se mueve hacia la izquierda, la tarjeta caerá 10 grados. La segunda variable es el valor inicial y extrapolar se utiliza para evitar que el valor de salida exceda outputRange.

A continuación, aplicamos la propiedad transform.

Aplique la propiedad también a la etapa de animación:

Ahora, cuando desliza el dedo hacia la izquierda y hacia la derecha, puede ver que las tarjetas deslizantes se arrastran exactamente como en la aplicación Tinder.

Agregar etiquetas Me gusta / No

Agreguemos un poco de texto que muestre las etiquetas “Me gustó” o “No”, exactamente como en la aplicación de Tinder. Dentro de la primera tarjeta, agregamos dos componentes de texto en la parte superior de la tarjeta.

Reinicie la aplicación React Native y ahora puede ver que se ve exactamente como Tinder:deslizamiento de yesca

Añadiendo opacidad

Al principio, el texto debe estar oculto y luego se desvanecerá en la pantalla mientras el usuario se desliza por los perfiles de citas.

rango de entrada define un área a la que se puede mover la animación: primer valor significa izquierda, tercer valor significa derecha.

outputRange define cómo cambia el valor cuando la animación se mueve hacia la izquierda o hacia la derecha.

Como puede notar, la diferencia entre “Me gustó” y “No” cuando se mueve hacia la derecha, el valor aumentará y cuando se mueve hacia la izquierda, el valor opuesto aumentará en su lugar:

Luego, después de agregar la función a la etapa de animación.

Ahora puedes jugar con el resultado como se muestra a continuación:

Añadiendo el siguiente efecto de carta

Estamos agregando una animación a la siguiente tarjeta con opacidad, aparición gradual y aumento de escala.

rango de entrada y outputRange tienen exactamente las mismas definiciones que antes:

Luego aplique estas transformaciones a la siguiente tarjeta:

Ahora puede ver la animación más suave con varios efectos:

Liberar una tarjeta de yesca

Como puede ver en Tinder, cuando se lance en algún momento, la tarjeta desaparecerá. Para implementar este comportamiento de liberación, vamos a implementar un onPanResponderRelease controlador de eventos. Animación primavera nos permite definir valores que se animarán de principio a fin, sin tener que definir una cantidad de tiempo específica (a diferencia de momento, por ejemplo).

Cuando movemos la tarjeta (como definimos como izquierda o derecha), usamos el resorte de animación para crear un nuevo valor y establecer un nuevo índice:

Si la carta no alcanzó el umbral de acción (por lo que debe retroceder), definimos una posición que ayuda primavera moverlo de nuevo al valor predeterminado:

Y finalmente lo logramos. Puedes ver el resultado final en la pantalla. Aquí están sus tarjetas React Native Swipe inspiradas en Tinder. Felicitaciones, acaba de crear un clon de Tinder:

En este tutorial de React Native, hemos aprendido una lección avanzada de React Native. Hemos hablado de animaciones, controlando el eje y efectos de la animación, así como el trabajo con imágenes animadas. Finalmente hicimos lo que prometimos: una tarjeta deslizante similar a Tinder en React Native.

Esperamos que haya aprendido algo que pueda utilizar en su proyecto. Si está creando su propia aplicación de citas en React Native, considere usar nuestra Plantilla de aplicación de citas para evitar reinventar la rueda. Las tarjetas React Native Swipe son solo una pequeña parte, tendrás que esforzarte 100 veces más para crear una aplicación de citas completa desde cero; piensa solo en cuánto tiempo te tomaría conectar las tarjetas magnéticas a Firebase. backend, por ejemplo.

Puede encontrar el código fuente final en este repositorio de Github React Native Tinder.

Si te gusta este tutorial, así como el código final, compártelo con los demás. Si te quedas atascado en algún lugar, deja un comentario en la sección siguiente y estaremos encantados de ayudarte. ¡Feliz codificación!

Próximos pasos

Este contenido se publicó originalmente aquí.