- Lo que queremos construir, cómo encaja en nuestro producto & propósito, revisar los diseños
- Comenzando con la configuración del entorno & “hola mundo”
- Introducción a la animación de React Native
- Paso 1: Hacer girar la rueda al presionar un botón
- Paso 2: Arrastrar la rueda para darle velocidad
- Paso 3: Agregar fricción a la rueda para frenarla
- Paso 4 (extra): Agregar hápticos para una sensación inmersiva
This workshop has been presented at React Summit Remote Edition 2021, check out the latest edition of this React Conference.
FAQ
Los presentadores son Oli, desarrollador front end y líder técnico, y Alan, desarrollador back end que también trabaja con React Native.
La masterclass se centra en construir una 'rueda de la fortuna' interactiva utilizando React Native, una característica destinada a ser atractiva para los usuarios.
Clio es una aplicación de gestión de finanzas personales que busca ir más allá del ahorro y la presupuestación para cambiar la relación de las personas con su dinero. Su misión es luchar por la salud financiera del mundo.
Los pasos incluyen arrastrar la rueda, añadir impulso y animación, y algunas tácticas competitivas junto con mejoras adicionales.
Se utiliza Expo para facilitar el desarrollo con una plantilla de inicio en React Native, además de las bibliotecas core de React Native como 'pan responder' y 'animated' para manejar gestos y animaciones.
Clio utiliza ahorros gamificados y vinculados a premios para motivar a los usuarios a ahorrar más, basándose en la investigación que demuestra que esto puede incrementar significativamente los ahorros anuales de las personas.
Esta masterclass se centra en la construcción de una característica interactiva de rueda de la fortuna con React Native. La característica, llamada gira para ganar, incentiva a los usuarios a ahorrar más al permitirles girar una rueda y contribuir a sus ahorros. El tutorial cubre la configuración del pan responder para detectar gestos de usuario, calcular la rotación utilizando el manejo de gestos, mapear los valores de animación a la rotación, agregar impulso a la rueda para un efecto de giro realista, y abordar problemas como la rotación incorrecta y la falta de velocidad. La masterclass también explora extensiones como agregar confeti y retroalimentación háptica para una mejor experiencia de usuario.
1. Introducción al Tutorial de la Rueda de la Fortuna
Short description:
Comencemos. Genial. Gracias a todos por unirse y bienvenidos a este tipo de masterclass. Vamos a hablar sobre cómo construir una rueda de la fortuna interactiva o animación de gira para ganar con React Native. Daremos una rápida visión general de Clio y nuestra misión, así como de la idea de girar para ganar. Luego, nos pondremos en marcha con Expo y repasaremos los pasos principales de arrastrar la rueda, añadir impulso y animación, e implementar tácticas competitivas y mejoras adicionales. Concluiremos con una sesión de preguntas y respuestas. Clio es una aplicación de dinero que tiene como objetivo redefinir la gestión de finanzas personales cambiando cómo las personas sienten acerca de su dinero. Nuestra aplicación impulsada por IA ayuda a los usuarios con la presupuestación, el ahorro, la gestión de facturas y la construcción de puntajes de crédito. Luchamos por la salud financiera del mundo. La idea de girar para ganar se alinea con nuestra misión al ayudar a los usuarios a construir un colchón de seguridad. Sumérgete en el tutorial y crea una característica atractiva para nuestros usuarios.
Comencemos. Genial. Así que sí, gracias a todos por unirse y bienvenidos a este tipo de masterclass. Mi nombre es Oli, soy un desarrollador front end y líder técnico en Clio y estoy acompañado por Alan también. Sí, soy Alan, soy un desarrollador back end pero sí, también hago algo de React, React cosas nativas de vez en cuando. Y he estado en Clio también durante un par de años. Así que sí, vamos a hablar o más bien a recorrer un pequeño tutorial sobre cómo construir una especie de rueda de la fortuna interactiva o algo así como girar para ganar como nos gusta llamarlo animation con React nativo. Así que esto es algo de lo que hablaremos un poco más en unos minutos, pero algo que hemos construido o hemos estado hablando de construir bastante en Clio y algo que hemos encontrado que es una característica realmente atractiva, supongo, para nuestros usuarios. Así que sí, una rápida visión general de la agenda. Sí, como una rápida introducción a Clio y lo que estamos tratando de lograr en nuestra misión. Una rápida visión general de la idea de girar para ganar, sabes, de dónde vino, dónde existe en el producto. Y también, también tenemos algunos diseños de Trev, uno de los increíbles diseñadores de Clio también. Así que un gran agradecimiento a él por proporcionar los diseños. Luego vamos a empezar con Expo. Tenemos un repositorio con un tipo de plantilla de inicio en él. Así que he publicado un enlace a eso en el chat de Discord. Pero si alguien no tiene acceso a eso, simplemente avise. Hay un par de instrucciones para empezar en eso también. Así que siéntete libre de empezar con eso. Pero también lo repasaremos durante un par de minutos también. Asegurémonos de que todos estén al día y listos para empezar. Y luego sí, lo hemos dividido, supongo, en tres pasos principales. Tenemos el tipo de arrastrar la rueda, añadir impulso y algo de animation, y luego algunas tácticas competitivas agradables de tener y otras mejoras adicionales. Y luego una rápida recapitulación y QA. Así que creo que estamos apuntando a ser menos de una hora, esperemos. Intentaremos terminarlo bastante rápido. Pero si alguien tiene alguna pregunta o problema o algo así, no dude en gritar en el Discord o en el chat de Zoom también. Como, sí, ambos podemos saltar y ayudar a cualquiera o sí, encantados de responder cualquier pregunta en el camino también. Así que genial. Así que sí, supongo que empezando un poco sobre Clio y nuestra misión. Así que Clio es una aplicación de dinero que te respalda. Con Clio, estamos tratando de definir una especie de nueva categoría de aplicaciones de gestión de finanzas personales, y una que va más allá del ahorro y la presupuestación para cambiar realmente cómo las personas sienten acerca de su dinero. Así que durante los últimos años, hemos construido una AI que más de 4 millones de personas están utilizando en los Estados Unidos, Canadá y el Reino Unido para ser criticados sobre su gasto para presupuestar y ahorrar también, ayudar a gestionar sus facturas, obtener adelantos de salario y también entender y construir su puntaje de crédito. Así que todo esto se entrega de una manera de chat primero. Tenemos una especie de, supongo, sí, como una pantalla de chatbot, que es donde podemos entregarle sus percepciones. Y también puedes preguntarle a Clio sobre tu dinero. Y esto es entregado en un tono de voz atractivo. Y supongo que lo que estamos tratando de hacer finalmente es crear ese amigo que está cuidando de ti y de tu dinero. Es alguien que tiene tu espalda y también no tiene miedo de decirte cuando la has cagado. Así que sí, esa es la visión general de Clio. Y supongo que nuestra misión general es que estamos tratando de luchar por la salud financiera del mundo. Y eso es, sí, eso es lo que estamos tratando de lograr. La idea de girar para ganar se alinea bastante bien con eso. El último trimestre, Alan y yo estábamos trabajando en el escuadrón de ahorros. Y nuestra misión del escuadrón para el trimestre era ayudar a los usuarios a construir un colchón de seguridad para ese día lluvioso. El problema que estábamos enfrentando era que los usuarios venían al producto y nunca habían ahorrado antes. No tenían ahorros, ahorros existentes, y no tenían colchón de seguridad. Sabes, un mal día podría volcarlos
2. Construyendo la Función de Girar para Ganar
Short description:
Queríamos ayudar a los usuarios a comenzar a ahorrar por primera vez y a construir una red de seguridad. Los ahorros gamificados o los ahorros vinculados a premios pueden incentivar a los usuarios a ahorrar más. Se nos ocurrió la idea de un girar para ganar, donde los usuarios pueden girar una rueda y contribuir a sus ahorros. Esta característica atractiva promueve el ahorro regular y ayuda a los usuarios a ahorrar más. Usaremos Expo para construir esta característica rápidamente. Si tienes alguna pregunta, no dudes en preguntar en el chat. Comencemos con la construcción. Primero, añadiremos rotación a la rueda a medida que el usuario mueve su dedo.
al límite. Así que su coche se avería y no tienen el dinero para arreglarlo. Podrían, ya sabes, no ser capaces de ir a su trabajo. Pierden su trabajo, se endeudan. Y esto era algo, ya sabes, problemas reales que veíamos, o problemas que los usuarios enfrentaban. Así que nuestro desafío o nuestra misión para el trimestre era ayudar a los usuarios a empezar a ahorrar por primera vez y construir esta red de seguridad para que pudieran, sí, para que pudieran, supongo, sí, si tienen un mal día, podrían permitirse arreglarlo ellos mismos. Y sí, una de las cosas que investigamos junto con los ahorros automáticos y redondeos que ya habíamos construido fue la idea de los ahorros gamificados o los ahorros vinculados a premios. Y esto era algo, no es una idea nueva, y de hecho he enlazado un par de, supongo, artículos y documentos sobre esto. Pero la idea general es que podríamos incentivar a los usuarios a ahorrar más gamificándolo o vinculando premios a la acción de ahorrar. Y se ha demostrado que esto aumenta la cantidad de dinero que la gente ahorra en un año en una cantidad bastante sustancial. Así que supongo que es una situación en la que todos ganan, donde hemos construido un producto que puede incentivar a los usuarios a ahorrar más y a construir esa red de seguridad, al mismo tiempo que construimos una característica atractiva y divertida. Y sí, la idea, supongo, que se nos ocurrió fue esta idea de un girar para ganar. Así que en su forma más básica, teníamos una pantalla que después de ahorrar o en cualquier momento que depositaras manualmente en tu cuenta de ahorros, podrías girar una rueda, te daría un número aleatorio y ese número también contribuiría a tus ahorros. Esa era, esa era la idea, supongo que nuestra hipótesis era que esta sería una característica atractiva para los usuarios y también promovería la idea de ahorros regulares y en última instancia ayudaría a los usuarios a ahorrar más y a construir esa red de seguridad. Así que esa es la idea general. Alan, no sé si tienes algo que quieras añadir sobre eso. No, creo, creo que eso resume bastante bien. Lo interesante, supongo, es que a la gente le gusta mucho la idea de pagar, de dar dinero potencialmente, si eso significa que recibirán una gran recompensa, como una idea, como una de las cosas que realmente demuestra eso es, supongo, si piensas en los billetes de lotería, mucha gente gastará dinero en billetes de lotería, pero será menos probable que ponga el dinero que pagaron en los billetes en una cuenta de ahorros. Así que sí, es, creo, pensamos que era una forma muy interesante de intentar que los usuarios ahorren. Pero sí, eso es genial. Sí, y sí, supongo que este GIF es lo que vamos a intentar construir en los próximos 40 minutos o así. Y sí, como mencioné antes, es un poco un MVP. Así que, ya sabes, estábamos intentando sacar esto y ver si era una característica atractiva para empezar. Pero sí, vamos a empezar con la construcción. Y sí, como mencioné antes, si alguien tiene alguna pregunta mientras avanzamos, no dude en ponerlas en el Discord o en el chat de Zoom. Y sí, podemos responder a cualquiera de esas. Genial. Así que para empezar, vamos a usar Expo para construir esto encima. Así que hemos construido, sí, supongo que para cualquiera que no haya usado Expo antes, es una especie de envoltorio alrededor de React Native que gestiona muchas de las dependencias y te permite poner en marcha muy rápido. Así que es el caso de uso perfecto para este tipo de cosas donde sólo queremos demostrar una característica rápida. Tenemos un repositorio, he puesto el enlace aquí y también en el Discord donde puedes clonar la, nuestra aplicación de inicio. Si nunca has usado Expo antes, puedes instalar el CLI usando este script y luego, sí, clonar el repositorio e instalar las dependencias y ejecutar Expo start para ponerlo en marcha. Luego, creo que después de que Expo haya empezado, creo que puedes pulsar la tecla I si estás en un Mac y se abrirá un simulador de iOS localmente, o puedes pulsar la tecla W y se abrirá en la página web y puedes desarrollarlo allí. Así que sí. Sí, copiaré los enlaces en el chat, lo siento. Así que sí, las diapositivas están en un Google Drive, pero la aplicación de inicio está en ese enlace de GitHub, que debería llevarte al lugar para empezar. Daré unos minutos para que la gente se ponga en marcha allí. Pero sí, si consigues poner esto en marcha, esta debería ser la pantalla que ves. Así que tenemos una aplicación muy simple, sí, React Native funcionando en Expo. Hemos añadido algunos componentes de inicio a ella. Así que tenemos nuestro título, tenemos una pequeña flecha y luego el spinner, que es sólo una imagen en este momento. Y vamos a usar esto como nuestra plantilla de inicio. Así que genial. ¿Creemos que estamos bien para seguir adelante? Sí, si alguien tiene problemas para poner eso en marcha, grita en el chat. Y sí, podemos volver sobre cualquier parte. Pero si no, empezaré a empezar. Así que la primera cosa que vamos a querer hacer, así que supongo que volviendo un poco atrás, esto es lo que queremos, o vamos a querer construir al final. La idea es que puedes hacer clic o supongo que tocar y mantener la rueda, la rueda giratoria. Y luego vas a querer moverla con tu pulgar. Y a medida que mueves ese gesto alrededor o hacia abajo, vamos a querer rotar esa rueda a lo largo. Y creo que, supongo, lo hemos dividido más o menos en tres pasos. Así que el primero es simplemente añadir una rotación a esa imagen a medida que mueves tu dedo,
3. Configurando el Pan Responder
Short description:
Necesitamos detectar cuando un usuario arrastra la rueda y mapear eso a su rotación. Usaremos la biblioteca pan responder para lograr esto. La biblioteca pan responder nos permite escuchar gestos y engancharnos a diferentes acciones que el usuario está realizando. Configuraremos el pan responder en el componente de la rueda y lo conectaremos a la rotación de la rueda. El primer callback que estamos agregando a la configuración es el on move should set pan responder, que asegura que el componente reciba los callbacks. El siguiente callback que nos interesa es on pan responder move, respond to new, que se llama cuando el usuario comienza a mover su pulgar alrededor del componente. Podemos verificar el contenido del estado del gesto en este callback. Finalmente, agregaremos la configuración del pan responder al componente de la imagen para establecer los callbacks en vivo y ver el console.warn disparado cuando movemos el gesto.
que puedes ver en esta etapa del juego. El segundo es, supongo, el tipo de flick y el tipo de la adición real de la velocidad a ese giro. Moviendo ese momentum de nuevo a cero con el tiempo o animándolo. Y luego el tercero es, supongo, lo que realmente sucede cuando terminas. Así que con eso en mente. El primer paso que vamos a abordar es el queremos ser capaces de detectar cuando un usuario lo arrastra. Vamos a querer mapear eso a una rotación de la rueda. Y entonces deberíamos estar listos para ir. Así que, lo siento, interrupción. Así que, genial. Sí, hay enlaces a la documentation de los dos tipos de, supongo, bibliotecas de React Native que vamos a usar. Así que la primera es el pan responder. Y la segunda es la biblioteca animada. Así que ambas están incluidas en el núcleo de React Native bibliotecas. Vamos a usar el pan responder para detectar el gesto. Y luego vamos a usar la documentación animada, lo siento, la biblioteca animada para realmente mapear ese gesto en un valor, un valor inicial. Así que, mal camino. Genial. Así que para empezar, supongo que lo primero que queremos hacer es ser capaces de detectar ese gesto cuando un usuario empieza a mover su pulgar alrededor de esa imagen. Y como mencioné antes, vamos a usar la biblioteca pan responder para hacer eso. Así que lo primero que podemos hacer es configurar el pan responder. Y Alan, creo que tú, como hablábamos de esto antes, y me describiste los manejadores de pan muy bien. Así que no sé si quieres. Sí, así que creo que la idea es que estableces un oyente en un componente. Y así la idea es que vamos a establecer esa rueda en el medio para escuchar los gestos. Así que cuando un usuario toca la pantalla, ese pan responder emitirá eventos a los que podemos escuchar. Y pan responder viene con un montón de funciones de callback que podemos establecer en la configuración aquí, como Ollie va a hacer ahora, donde podemos decir y nos permite engancharnos a un montón de diferentes acciones que el usuario está haciendo y hacer cosas basadas en esas acciones. Y así que sí, como dijo Ollie, vamos a engancharnos a esa rueda en el medio y conectarla a los gestos que el usuario está haciendo. Y podemos y de esa manera podemos conectarlo a la rotación del componente real. Como puedes ver. Sí. Sí, genial. Así que sí, creo que eso me hizo clic. Sí, supongo que la biblioteca pan responder es, en última instancia, está juntando todos los diferentes toques y gestos que un usuario está haciendo en un solo conjunto de funciones de callback a las que luego podemos engancharnos. Así que el primero que estamos llamando, o estamos añadiendo a la configuración aquí es el on move should set pan responder. Y creo que esto es principalmente para asegurarse de que el que el componente al que adjuntamos el pan responder realmente recibe los callbacks y que no se propaga hacia arriba o hacia abajo dependiendo de si hay otros componentes alrededor que también están buscando los callbacks. Y luego el siguiente en el que estamos interesados es para cuando y cuando el movimiento realmente comienza. Así que en pan responder move, respond to new. Así que este es el tipo de callback que se llamará cuando el usuario empiece a mover su pulgar alrededor del componente al que adjuntamos este manejador. Así que supongo que la forma en que podemos comprobar eso es escribiendo este callback. Así que toma dos, toma dos argumentos. El primero es el tipo de evento que está sucediendo. Y el segundo es el tipo de estado del gesto. Así que el estado del gesto actual. Así que sólo para como comprobar que esto está funcionando. Podemos comprobar, supongo, el contenido del estado del gesto aquí. Así que ahora tenemos nuestro así que tenemos nuestra configuración de pan responder. El siguiente paso es realmente añadir esta configuración a uno de los componentes para establecer los callbacks en vivo para realmente añadir el manejador. Y la forma en que puedes hacer eso es simplemente extendiendo el camino. Así que lo que esto está haciendo ahora es decir que este componente de imagen tiene el tipo de pan los callbacks del manejador adjuntos a él. Así que esta es la configuración que hemos establecido y deberíamos estar empezando
4. Cálculo de la Rotación con el Manejo de Gestos
Short description:
Nos preocuparemos por la propiedad dy, que representa la distancia desde donde el usuario comenzó a arrastrar hasta donde terminó de arrastrar. Queremos traducir el movimiento Y en el gesto a una rotación de la imagen utilizando las APIs animadas de React Native. Utilizaremos la funcionalidad de valor animado dentro de la biblioteca animada para mapear la distancia en una rotación de grados.
para ver el console.warn disparado cuando movemos el gesto dentro de aquí. Y si lo hacemos y empezamos a arrastrar, deberíamos ver que obtenemos una serie de advertencias con el contenido completo de ese estado de gesto. Genial. ¿Alguna pregunta hasta ahora? ¿Estamos bien? Creo que sería bueno si solo advertimos el estado del gesto.dy para que podamos ver como el... Sí, sí. Porque sí, el dy es la propiedad que nos importará para empezar. dy es la distancia desde donde el usuario comenzó a arrastrar hasta donde terminó de arrastrar. Sí. Así que sí, dentro de este tipo de estado de gesto que es pasado al callback, obtenemos mucha información sobre el gesto. Y como mencioné, uno de esos es dy, que es, sí, la distancia desde donde comenzó el toque hasta donde realmente se movió, supongo. Hay otros como, ya sabes, la coordenada real del pulgar, supongo, en la pantalla. Pero sí, el que más nos interesa aquí es realmente el movimiento del pulgar. Así que podemos console.log.dy. Y esto nos va a dar los números como, o supongo que el número de píxeles desde donde comenzó el toque. Y en realidad, supongo que este es probablemente un buen momento para hablar de lo que estamos tratando de lograr con el manejo del gesto, el toque. Y creo que, sí, nuestra idea de cómo debería funcionar esto es que queremos traducir un movimiento Y en el gesto a una rotación de la imagen. Y podemos hacer eso muy bien usando las APIs animadas de React Native. Pero supongo que la forma en que vamos a querer calcular eso es mirando la distancia desde donde comenzó el toque hasta donde terminó el toque. Y como, sí, mapeando esta distancia en una rotación de grados. Así que con este code que hemos añadido hasta ahora, tenemos este pedazo aquí, como no estoy seguro de que incluso voy a poder escribir esto. Pero como esto, esta cantidad aquí es el dy. Y como, suponiendo que empezamos aquí, lo siento mucho, esto es un garabato terrible. Sí, se ve bien. Es más claro. Y sí, entonces supongo que el siguiente paso entonces. Así que tenemos nuestro, tenemos nuestro pan responder, tenemos esta distancia aquí, ahora queremos traducir eso en un valor animado, o un valor de rotación. Y para hacer eso, vamos a usar la funcionalidad de valor animado, ¿cómo se llama?, dentro de la biblioteca animada. Y supongo que efectivamente, lo que esto es, es una especie de flujo de valores hecho para ser super eficiente. Y luego podemos usar varias funciones o funcionalidades alrededor de eso para permitirnos mapear entre los valores de entrada y salida que le damos. Así que en este caso, si mi editor alguna vez quiere volver, si no lo hace, un segundo, déjame intentar reiniciar eso. Alan, ¿algo que añadir mientras tenemos las anotaciones? Creo que estás haciendo un gran trabajo explicando. Sí, creo que una cosa, la anotación todavía está en la pantalla. No sé si podrías... Bueno, creo que eso fue todo. Sí. ¿Cuál era tu otra cosa por cierto? ¿Tu editor estaba congelado? Creo que podría haber estado dibujando encima de él. No creo que estuviera realmente congelado. Genial. Bueno, lo intentaremos de nuevo. Pero sí, ¿hay alguna pregunta sobre esto en este momento? Vale. Sí, no duden en publicar cualquier pregunta en el Discord o el Zoom y podemos intentar responderlas en el camino. Genial. Vale. Vale. ¿Puedes acercar un poco, por favor? Oh, sí. Lo siento. Sí. Bien. Gracias.
5. Convirtiendo la Distancia en Rotación
Short description:
Casi estamos allí. Tenemos la distancia desde cuando el usuario comienza su gesto hasta cuando lo termina. Convertiremos ese valor en un valor de rotación en la rueda giratoria utilizando el valor animado o la biblioteca animada. Crearemos un nuevo valor animado y lo envolveremos en una ref para asegurar la consistencia.
Vale. Casi estamos allí. Vale. Entonces, sí, como mencioné antes, tenemos la distancia ahora desde cuando el usuario comienza su gesto o comienza a arrastrar hasta cuando, supongo, lo continúa y lo termina. Lo siguiente que queremos hacer es realmente convertir ese valor en un valor de rotación en la rueda giratoria. Y sí, como mencioné antes, vamos a usar el valor animado o la biblioteca animada, que incluye un flujo de valores, efectivamente. Entonces, la forma en que hacemos esto es que usamos el animado... Entonces, creamos un nuevo valor animado y vamos a empezarlo más o menos en cero, supongo, cero movimiento porque queremos que, sí, comience desde el principio. Y luego, la única otra cosa que hay que recordar cuando se usan valores animados en componentes funcionales es que queremos envolverlo en una ref para que siempre sea el mismo. Entonces, vamos a usar el valor animado solo que queremos envolverlo en una ref para que siempre sea el mismo valor entre los prestadores.
6. Mapeando Valores de Animación a Rotación
Short description:
El valor de rotación es nuestro conducto o tubería de valores de animación que estableceremos a medida que el usuario mueve su pulgar. Mapearemos estos valores en la rotación añadiéndolo manualmente al componente de imagen. La biblioteca animada de React Native nos permite pasar un valor animado a la propiedad de rotación de la imagen. Al convertir la imagen en una imagen animada, podemos vincular el valor de rotación al valor de rotación en la imagen.
Entonces, sí, el valor de rotación ahora es, supongo, nuestro tipo de conducto o tubería de valores de animation que vamos a establecer a medida que el usuario mueve su pulgar. Y luego lo que queremos hacer es mapear esos valores en la rotación. Así que, lo primero que queremos hacer es simplemente establecer este valor. Y vamos a establecer ese valor cuando el usuario mueve ese pulgar.
Entonces, usando esto, la parte que estábamos mostrando anteriormente en la declaración de console. Entonces, en este punto, cuando tú, quiero decir, no va a pasar nada, pero cuando tú... Cuando tú, sí, cuando mueves tu pulgar sobre, tocas y arrastras sobre la rueda, vamos a estar empujando el Y, ese cambio de valor Y en el valor de rotación, como, sí, tubería, supongo. Pero no estamos haciendo nada con ello. Solo lo estamos estableciendo en este momento. Así que, lo siguiente que queremos hacer es realmente añadir esa rotación a la imagen. Y la forma, supongo, podemos empezar a hacer eso es, supongo, simplemente hacerlo manualmente. Así que, podemos pasar la rotación real al componente de imagen. Y como, sí, así que podemos pasar React Native te permite pasar esta propiedad de rotación por la propiedad de estilo de transformación. Y puedes, sí, establecer esto a un cierto número de grados, y puedes ver esa imagen girando alrededor a medida que aumentamos eso. Entonces, lo que vamos a querer hacer es vincular este valor de rotación al valor de rotación en esa imagen. Y podemos hacer eso realmente fácilmente usando la biblioteca animada de React Native de nuevo. Lo primero es que realmente tenemos, o la biblioteca envuelve muchos de los componentes base en React Native con, como, las versiones animadas de ellos. Y lo que esto te permite hacer es pasar, en lugar de, supongo, valores fijos o variables aquí, en realidad te permite pasar un valor animado directamente. Entonces, ese es el primer paso es simplemente convertir
7. Mapeando Valores de Píxeles a Rotación
Short description:
Queremos mapear el número de píxeles del gesto a un número de grados de rotación utilizando la función de interpolación animada. Al especificar el rango de entrada y el rango de salida, podemos controlar el mapeo. Por ejemplo, cuando el usuario mueve su pulgar un píxel, queremos que eso se traduzca en un grado de rotación. Podemos ajustar este mapeo para crear una interacción más realista. El valor interpolado se puede utilizar directamente para rotar la imagen, mapeando el gesto al valor de rotación. Este paso mapea con éxito el cambio en el gesto Y a un valor de rotación en la imagen.
esto en una imagen animada. El segundo paso es que queremos proporcionar un mapeo del tipo de valores de píxeles que estamos introduciendo aquí. Así que, recuerda, este dy es el número de píxeles desde donde comenzó un gesto hasta donde el gesto realmente terminó, o está actualmente. Queremos mapear eso desde, como, supongo, un píxel vertical a un número de grados de rotación. Y la forma en que podemos hacer eso es usando la función de interpolación animada. Así que, lo que hacemos, y sí, esto va a ser algo así como pasado al spinner como un estilo de rotación. Así que, podemos decir que eso va a ser nuestro valor de rotación, y queremos interpolar eso. Así que, interpolar es una función que es, algo así como, supongo, existe en el valor de rotación. No, no es. Es esto. Es animado. No, sí. ¿De qué estoy hablando? Sí, lo es. Genial. Pasamos en el rango de entrada. Así que, el rango de entrada es el, supongo, el tipo de los valores que nos interesa interpolar entre. Y el rango de salida es, de nuevo, el tipo de, como, la salida que queremos ver de la función de interpolación. Y en este caso, podemos pasar en realidad un número, un tipo de valor de grados en una cadena, y la biblioteca entenderá que esto significa que es una rotación y realmente transformará estos dos valores. Así que, efectivamente, lo que esto está diciendo es que cuando el usuario ha movido su pulgar por uno, por cero píxeles, queremos que eso se traduzca en cero grados de rotación, lo que tiene sentido. Si simplemente pones tu pulgar ahí y no lo mueves, como, no queremos que ese spinner se mueva. Ahora estamos diciendo que si mueves eso por un píxel hacia abajo, queremos que eso se traduzca en un grado de rotación. Así que, esto no tiene que ser un uno, sabes, un tipo de uno-a-uno mapeo. Podríamos usar este valor para realmente afinar la interacción y hacer que se sienta como si realmente estuvieras tirando de ese spinner hacia abajo. Pero podemos, sabes, podemos jugar con este valor más tarde y averiguar ese mapeo exacto. Y también es algo que creo que sería mucho más tipo de, como, o mucho mejor para tenerlo en tu mano y jugando en tu teléfono para ver cómo se siente. Así que, lo dejaremos como, supongo, un píxel iguala un mapeo de rotación de un grado por ahora. Así que, para usar realmente este valor interpolado, podemos pasar esta rotación de spinner directamente en el estilo de rotación como esto. Y lo que deberíamos ver ahora o ser capaces de hacer es cuando haces ese gesto, vemos ese tipo de mapeo a un valor de rotación en la imagen. Así que, sí, eso es, supongo, el inicial tipo de paso que queríamos hacer. Hemos mapeado un cambio en el gesto Y a un valor de rotación en la imagen. Y sí, es algo así como, supongo, se siente bastante bien. Alan, ¿algo perdido? ¿Algo? No, creo que suena genial. Lo único que creo que es interesante es que el rango de entrada y el rango de salida que especificamos, esos no son necesariamente límites. Esos son simplemente especificando la, supongo, es la línea, el ángulo, la inclinación de cuán rápido queremos que la entrada afecte la salida. Pero eso no significa que sólo afectaremos cosas que son menos de un píxel o el DY que es menos de uno. Así que, seguirá yendo. Es más, es más definiendo una línea. Y como dice Ollie, podríamos hacer que ese movimiento de un píxel se traduzca en más de un grado, como una cosa de dos grados. Y eso simplemente significaría que giraría más rápido para una cosa. Y realmente podemos jugar con eso para hacerlo más realista. Sí. Sí, muy buen punto. Sí. Sí. Así que, sólo la pregunta en el Zoom es exactamente sobre eso. Sí. Así que, esto es, sí, exactamente como mencionó Alan, es un tipo de mapeo de relación. Así que, un valor de lo que está efectivamente diciendo es que como un valor de dos aquí sería dos grados. Y puedes realmente especificar eso si quisieras que no fuera un mapeo lineal. Sabes, podrías cambiar eso dependiendo de lo que necesites de la interpolación exacta. Pero sí,
8. Manejo de la Rotación y Reinicio
Short description:
Podemos usar la configuración para limitar la rotación entre cero y un grado. Sin embargo, hay algunas advertencias a considerar. En primer lugar, el enfoque actual se basa en el movimiento vertical, por lo que la rotación puede ser incorrecta al moverse por el lado izquierdo. En segundo lugar, si iniciamos un segundo gesto, la rueda se reinicia a cero. Para solucionar esto, podemos agregar un botón de reinicio y usar la función de resorte animada para animar suavemente la rotación de vuelta a cero. Estas animaciones proporcionan una experiencia visualmente atractiva. ¿Alguna otra pregunta o algo más que añadir en este momento?
para nosotros, sólo necesitamos ese mapeo lineal, que es genial. Otra cosa que puedes hacer es que puedes usar, puedes usar algunas de estas, algunas de las configuraciones aquí para realmente limitar entre ellas. Sí, es la cosa de la extrapolación. Entonces, sabes, podrías limitarlo si quisieras que fuera algo entre cero y uno va a cero y un grado. Eso fue para realmente, sí, salir de este rango. Entonces, sí. Así que, estamos contentos con ese mapeo lineal. Genial. Bueno. Supongo que otra cosa a mencionar en este punto es que hay algunas advertencias a esto o este enfoque para empezar que creo que estamos, sería bueno hablar de ello, pero también ser conscientes de ello y es algo que podemos volver a tratar. Entonces, la primera es que estamos confiando en este movimiento DY del pulgar del usuario, mientras que en realidad el gesto podría ser circular. Y en este momento, si tú como mapeas esto alrededor o sigues el gesto alrededor, como pasando la horizontal, y luego como yendo, empezando a subir de nuevo, verás que estamos rotando en la dirección equivocada cuando subes por el lado izquierdo. Y la razón de eso es que estamos siguiendo el movimiento vertical desde donde empezaste. Así que, tiene sentido que empiece a rotar hacia atrás cuando vuelves a subir a ese primer punto. Así que, eso es lo primero. Y creo que hay varias formas, supongo, de solucionar eso. Y como, sí, eso es definitivamente algo de lo que podemos hablar en un poco más tarde. La otra cosa es que en este momento, si arrastramos y soltamos, y terminamos ahí, qué, y luego si arrastramos y soltamos de nuevo, notarás que nuestra rueda empieza de nuevo desde cero. Y la razón de eso es que estamos estableciendo este valor a cero grados, lo siento, cero píxeles desde el inicio del gesto. Así que, estamos empezando un segundo gesto, y estamos reiniciando ese valor de rotación a cero, lo cual es por qué está saltando. Entonces, una, supongo, forma bastante agradable de solucionar eso es que, bueno, hay un par de formas de solucionarlo. La primera o la más técnica sería como, sabes, en lugar de reiniciarlo a cero, como usamos un desplazamiento para asegurarnos de que siempre estamos moviendo las cosas desde donde se dejó por última vez. Pero en realidad, supongo, pensando en el problema o en lo que estamos tratando de lograr aquí, como estamos tratando de hacer una rueda de giro para ganar para que el usuario gire una vez y luego averigüe como un premio que ganan o algo así. Sabes, puede que no haya realmente un caso de uso para girar varias veces. Así que, esto podría ser algo que vemos en desarrollo. Pero como, supongo, para resolverlo para nosotros mismos, podría ser bastante agradable tener una forma de reiniciar esto a cero sin que salte de nuevo. Así que, lo que podríamos hacer es simplemente añadir un botón, un botón de reinicio. Lo llamaremos reinicio. Y luego al presionar, sólo queremos llamar a una nueva función de reinicio que podemos escribir aquí arriba. Y todo lo que el reinicio va a hacer es que quiere establecer el valor de rotación de nuevo a cero. Así que, ahora deberíamos tener ese botón de reinicio aquí. Así que, cuando hacemos clic y arrastramos y hacemos nuestro primer gesto y pulsamos el botón de reinicio, podemos ver que salta de nuevo a cero. Y este es, supongo, también un buen momento para introducir algunas de las animations de ayuda de React animation o React native animated. Y te permiten hacer varias cosas o manipular valores animados de varias formas para proporcionar animations interactivas o visuales realmente agradables. Y una de ellas se llama resorte. Así que, podríamos usar el resorte. Así que, en lugar de simplemente restablecer el valor a cero aquí, podríamos animarlo de vuelta a cero de una manera fluida. Así que, podemos hacer eso usando la función de resorte animada. Así que, lo que hacemos es llamamos a animated.spring y le decimos a la función que nuestro valor de rotación es el que queremos que resorte y que queremos que resorte de vuelta a cero. Así que, sólo para mostrarte cómo se ve antes de hablar de ello, lo que va a hacer es que cuando haces clic en reiniciar, en lugar de saltar de vuelta a cero, es... En lugar de saltar... Intentémoslo de nuevo. En lugar de saltar de vuelta a cero, se animará y volverá a cero. Así que, supongo que lo que está pasando debajo es esta función es como hemos establecido el valor a un valor fijo aquí. La función de resorte está calculando una, sabes, basada en una curva de suavizado, el siguiente valor que debería poner en y actualizando esto... O volver a cero. El segundo argumento a la configuración es sólo asegurándonos de que estamos siempre usando el controlador nativo, o, sí, usando el controlador nativo, que es como el nuevo rendimiento con la biblioteca animada. Genial. Así que, tenemos nuestro botón de reinicio funcionando y eso es, sí, volviendo a cero, lo cual es sólo un poco agradable de tener para nosotros. ¿Alguna otra pregunta o algo más que añadir en este momento?
9. Añadiendo Momentum a la Rueda
Short description:
Hemos detectado cuando un usuario arrastra hacia abajo en la rueda y mapeado ese arrastre a una rotación utilizando el pan responder y las bibliotecas animadas de React Native. Ahora, necesitamos añadir momentum a la rueda para hacerla girar. Tomaremos la velocidad del gesto en el punto de liberación y la descompondremos a cero con el tiempo. Al engancharnos en la función de liberación del pan responder, podemos obtener la velocidad del gesto y usarla para seguir moviendo la rueda a esa velocidad, ralentizándola gradualmente usando una función de fricción. Esto imita el comportamiento del mundo real de girar una rueda y detenerse gradualmente. La velocidad se mide en píxeles por milisegundo y se puede usar para determinar el número de grados de rotación por milisegundo. Usaremos la función de decaimiento de la biblioteca animada para lograr esto, pasando la velocidad como una configuración.
No para mí. Vale, genial. Entonces, supongo, volviendo un poco a nuestro plan, hemos detectado cuando un usuario arrastra hacia abajo en la rueda. Luego hemos mapeado ese arrastre a una rotación. Y, sí, las dos bibliotecas que hemos usado aquí son el pan responder, que son las devoluciones de llamada de manejo de gestos y el conjunto de funciones animadas de React Native para mapear valores a estilos efectivamente dentro de nuestra aplicación nativa.
Genial. Entonces, supongo, sí, la siguiente pieza del rompecabezas es realmente añadir momentum a esta rueda. Así que, la tenemos en este momento. La tenemos de manera que puedes hacer clic y arrastrar y soltar y se detiene. Cuando estás girando una rueda, queremos, sabes, vamos a querer añadir algo de momentum ahí. Pero obviamente, si haces eso en este momento, simplemente se va a detener tan pronto como levantes el dedo. Así que, obviamente, eso no es genial. Así que, lo siguiente que vamos a hacer es que vamos a querer añadir algo de momentum a esta rueda para, sí, hacerla girar. Y supongo que, al igual que hicimos con la función de resorte aquí, también tenemos un método de ayuda realmente agradable en la biblioteca animada que puede ayudarnos aquí. Y efectivamente, lo que vamos a hacer es que vamos a querer tomar la velocidad del gesto en el punto de liberación. Y vamos a querer descomponer esa velocidad a cero con el tiempo. Así que, supongo que en términos de lo que realmente está pasando es, como, estás moviendo tu pulgar por la pantalla hasta que estás tocando y arrastrando y moviendo tu pulgar. En el punto en que sueltas tu pulgar, queremos tomar la velocidad a la que se movía tu pulgar. Y vamos a querer seguir moviendo la rueda a esa velocidad. Pero lentamente, como, sabes, usando una función de fricción, empujar lentamente esa velocidad a cero. Así que, sabes, como si estuvieras girando la rueda, iba a hacer tic, tic, tic, tic, tic, y lentamente se va haciendo más lenta y más lenta y más lenta y luego, sabes, aterriza en el valor que tienes. Así que, tratando de, supongo, imitar, como, el mundo real, sí, el mundo real, lo que pasaría en el mundo real, realmente. Así que, sí. Supongo que para empezar con eso, vamos a engancharnos en la función de liberación del pan responder. Así que, esta es la parte que, sí, como acabo de mencionar, queremos obtener la velocidad de tu movimiento cuando sueltas el pulgar de la pantalla. Así que, en el manejador de pan liberar. Así que, esta es otra devolución de llamada. Toma los mismos argumentos que el manejador de pan mover. Y como hicimos antes, podemos simplemente, como, registrar el estado del gesto. Y dentro del estado del gesto está este VY. Así que, esta es la velocidad del tipo de el eje Y de ese gesto en el punto de liberación. Así que, si hacemos eso ahora, hacemos clic y arrastramos y soltamos, podemos ver que obtenemos un valor aquí. Y creo que, sí, como si intentaras girarlo más duro o más rápido y luego soltaras, obtenemos un número más grande. Y creo que, Alan, tú hiciste, conseguiste averiguar lo que este número realmente significa. Sí. Así que, ese número es, así que, en el punto de liberación, son los píxeles por milisegundo que el gesto estaba moviendo. Así que, si lo haces de nuevo. Así que, sí, Oli estaba moviendo su ratón a 11 píxeles o punto 18, 1.9 milisegundos, lo siento, píxeles por milisegundo. Así que, sí. Así que, esa es la parte, esa es la unidad que obtenemos de vuelta como este valor de estado de gesto dot VY que podemos usar en adelante. Así que, tenemos, sí. Así que, tenemos este valor, que es, sí, píxeles por milisegundo. Y ese es entonces, como, supongo, también el valor que, porque tenemos este mapeo uno a uno en este momento, como, también podemos decir que es, como, sabes, el número de grados de rotación por milisegundo también. Así que, sí. Lo siguiente que vamos a querer hacer es empezar a mapear o usar esta velocidad. Queremos darle a este valor animado eso o seguir aumentando el valor usando esa velocidad, pero descomponiéndolo a cero. Y como supongo, aludí, tenemos esta función de decaimiento que está incluida en la biblioteca animada. Y funciona de la misma manera que la de resorte. Así que, podemos pasar como primer argumento, el valor animado que queremos descomponer. Y el
10. Añadiendo Velocidad y Abordando Problemas
Short description:
Hemos añadido velocidad a la animación. Cuando el usuario suelta su pulgar o dedo del gesto, tomamos la velocidad a la que se movían y continuamos esa velocidad en la rotación, descomponiéndola lentamente a cero con una función de desaceleración. Sin embargo, hay algunos agujeros obvios en la implementación actual. Cuando se gira hacia arriba y alrededor, la rueda comienza a bajar a cero. Si el usuario la arrastra a un valor específico y la suelta, no se añade velocidad. Necesitamos abordar estos problemas y considerar mejoras adicionales, como un área de gesto para arrastrar hacia arriba, una velocidad mínima o aleatoriedad para prevenir trampas, e introducir cierta aleatoriedad para otorgar dinero o ingresar a los usuarios en un sorteo para hacerlo lo más seguro posible.
config, pasamos la velocidad real de nuestro gesto. Así que, esto podría ser cualquier velocidad que nosotros queramos. Pero en nuestro caso, queremos pasar la velocidad del gesto. Así que, esa velocidad a la que el usuario suelta su pulgar. Así que, voy a, vamos a empezar eso al soltar. Genial. Así que, lo que deberíamos ver ahora en un poco de magia es que cuando sueltas ese pulgar, la rueda continúa girando y lentamente descompone la velocidad a cero usando una función de fricción o, sabes, algún tipo de desaceleración. Y supongo que la forma en que puedes comprobar eso es si tú vas muy lento en la liberación, rápidamente va a cero. Si le das un gran giro y lo haces girar fuerte, en realidad seguirá girando y lentamente bajará a cero. Así que, sí, hemos, supongo, hemos conseguido gran parte de nuestra funcionalidad allí, lo cual es realmente genial. Y ha sido bastante simple usando sólo, sabes, una combinación del Panresponder y las funciones de ayuda animadas. Hay algunos otros bits y piezas que supongo que sería genial jugar con. Así que, la primera es en realidad como esta función de desaceleración o esta velocidad a la que descomponemos la velocidad de la rotación a cero. Sí, podemos jugar un poco con eso e intentar hacer que se sienta tan realista como sea posible o, sabes, realmente aumentar esa anticipación de que va, de que la velocidad baja a cero. Así que, en la configuración que pasamos a la función de descomposición, también podemos pasar un valor de desaceleración. Creo que esto es 0.997 por defecto. Así que, esto debería ser lo mismo. En realidad no sé qué significa 0.997. Supongo que es sólo un valor. Pero con lo que podemos jugar es si, sí, si cambias ese valor a ser diferente, verás que con un valor de desaceleración más bajo, bajamos a cero mucho más rápido. ¿Tiene sentido? Se detiene más rápido. Más rápido, gracias. Y luego, sí, si nosotros aumentamos esta carga, creo que lo que deberíamos ver es que esta rueda simplemente gira para siempre. Así que, eso es probablemente un poco excesivo. Nunca va a parar. Los rodamientos en eso. Sí. Y en realidad, cuando estaba jugando con esto antes, y realmente lo estropeé. Genial. Cuando estaba jugando con esto antes, el valor que pensé que se sentía mejor era 0.9989. Y no había absolutamente nada aparte de prueba y error para llegar allí. Pero como, sí, juega con unos cuantos valores diferentes y grita si alguien encuentra uno mejor. Pero esto pareció hacer un muy buen trabajo de, supongo, hacer que esa anticipación de que gira dure tanto como sea posible mientras todavía estás como, ¿qué voy a conseguir? Así que, si le das un giro ahora, baja y sigue yendo, yendo, yendo, yendo y finalmente se detiene en tu valor. Así que, no sé, sentí que daba un buen nivel de anticipación mientras lo estás girando. Sí. Podría ver eso para siempre. Genial. Así que, supongo que, sí, tenemos nuestro, sí, como parte de esto, hemos añadido nuestra velocidad a la animation. Así que, cuando el usuario suelta su pulgar o su dedo del gesto, tomamos la velocidad a la que se estaban moviendo y continuamos esa velocidad en la rotación, pero la descomponemos lentamente a cero con una función de desaceleración. Así que, desde un punto de vista funcional o, supongo, un tipo de camino feliz, como esto es, sabes, la mayor parte de lo que necesitábamos y queríamos construir. Pero sí, supongo, como mencionamos un poco antes, hay algunos agujeros bastante obvios en esto en este momento. El primero es que, sí, si giras hacia arriba y alrededor, como empieza a bajar a cero, lo cual es un poco, un poco brap. Y luego el otro es, supongo, si vamos a empezar a jugar con la idea de que esto sea algo de lo que podrías ganar dinero o que podrías usar para ganar, como si lo arrastras hasta ese 500 y lo sueltas, no tenemos velocidad, así que no añadimos ninguna velocidad en. Así que, y sí, podemos confiar en los usuarios para que siempre encuentren una forma de hacer eso. Así que, supongo que lo primero que querríamos intentar hacer, en realidad, creo que tengo una diapositiva para esto. Sí, bien. Así que, estas son las mejoras o ideas adicionales que estábamos hablando de hacer. Sí, tenemos una especie de área de gesto donde estás arrastrando hacia arriba. Tenemos esta idea de una velocidad mínima o aleatoriedad si estás tratando de engañar a ese sistema. Y también la idea de que si vamos a otorgar dinero con esto o, sabes, simplemente ingresar a los usuarios en un sorteo o lo que sea, como, tal vez queremos que esto sea un poco aleatorio para, sí, hacerlo lo más
11. Mejorando la Velocidad y los Efectos en React Native
Short description:
Para darle algo de velocidad a la rueda, podemos establecer una velocidad mínima y generar un valor aleatorio si la velocidad está por debajo del mínimo. También podemos explorar la adición de confeti y retroalimentación háptica para mejorar la experiencia del usuario. Sería interesante escuchar sus ideas sobre cómo mejorar la característica o incluso extenderla a algo más emocionante. También podríamos considerar la posibilidad de hacer parpadear los elementos individuales cuando la rueda cae sobre ellos y utilizar un valor XY animado para permitir el movimiento en ambos ejes, X e Y. En cuanto a decidir a qué campo gira finalmente la rueda, aún no hemos cubierto eso, pero podemos empezar a explorar formas de mapear el valor de rotación al valor del segmento. ¡Se aceptan sugerencias!
seguro posible. Entonces, sí, supongo que cómo podríamos hacer eso es bastante simple para el aleatorio de todos modos. Entonces, supongo que volviendo al problema, el tipo de problema es que puedes arrastrar y soltar esto y soltarlo en el 500 y no tienes velocidad. Entonces, tal vez todo lo que necesitamos hacer es dar un velocidad mínima aquí. Y si tenemos algo menos que el mínimo, entonces generamos un valor aleatorio. Entonces, lo que podemos hacer es simplemente crear una velocidad aquí. Y luego vamos a decir, como, si el estado del gesto, si la velocidad es mayor que, digamos, uno, entonces estamos contentos con ella. De lo contrario, como, vamos a crear un aleatorio o sacar un valor aleatorio de algún lugar. Y aquí he añadido simplemente un más uno sólo para darle, como, un impulso inicial de velocidad, sólo para que se mueva algo similar. Y luego podemos pasar esto directamente a esa configuración. Entonces, si ahora reiniciamos esto, lo que deberíamos ver es que lo giramos como de costumbre y estamos bien. Pero si reiniciamos eso a cero, si ahora arrastro y suelto eso y simplemente lo dejo ir, obtenemos esa especie de velocidad que se nos da. Y hemos añadido una, ya sabes, hemos añadido una función aleatoria aquí. Entonces, si lo hicieras de nuevo, y no deberíamos, ya sabes, no deberíamos obtener siempre el mismo valor. Entonces, deberíamos ser capaces de obtener algo que sea diferente a ese 50. Entonces, sí. Entonces, eso resuelve, supongo, una cosa. La otra cosa es, como, si queríamos mantener esto bonito y limpio, podríamos tener una especie de, como, velocidad mínima. En allí. Y, sí, eso nos da un poco de control sobre el, sí, del tipo de, del gesto, supongo. Alan, ¿alguna otra idea sobre los otros bits? Quiero decir, hay eso, hay algunas, sólo algunas ideas. React Native tiene, como, una biblioteca de confeti nativa que podrías pegar. Hay una captura de pantalla al principio de la presentación con confeti en ella. Y hápticos, retroalimentación háptica. Sería genial si, si alguna vez has visto, como, una de esas ruedas de la fortuna donde hay, como, pequeños bits entre cada cuadrante, o no cuadrante, pero sección que lo sostiene, y hace un tic entre, a medida que se ralentiza, hace un tic entre. Y así, podríamos, podríamos hacer eso. Entonces, sí, quiero decir, sería realmente interesante ver qué tipo de ideas cualquiera de ustedes tiene, como, cómo podríamos mejorar esto, o, o sería genial si lo bajas y, como, lo reconstruyes y luego lo extiendes a algo que pensaste que era genial. Creo que eso sería realmente genial, sí. Sí, seguro. Sí, como, esto es muy parecido a, sí, primero, primera implementación. Entonces, hay, sí, cualquier otra idea para hacerlo impresionante sería genial. Sé, como, una de las otras cosas de las que hablamos es, supongo, usar, como, una especie de imagen aquí y rotarla es una forma un poco tramposa de hacerlo. Pero, ya sabes, ¿qué tal si podríamos hacer parpadear los elementos individuales cuando aterrizamos en ellos, y, ya sabes, en realidad construir esto como su propio componente que estábamos rotando, en lugar de una imagen, y, ya sabes, entonces podríamos, como, hacer parpadear el segmento en el que aterrizamos y hacer que, como, emita el confeti, o, sí, algo así sería bastante genial. Sí, el comentario de Paul sobre llevar al DX es, sí, definitivamente una buena idea. Animado, como, podríamos usar el valor animado, en lugar de ser sólo un tipo de, sí, un solo tipo de valor, podríamos usar el ayudante XY para, ayudante XY para permitirnos mover cosas en los ejes Y y X al mismo tiempo. Y de esa manera podríamos, sí, podríamos usar el valor X, también, y tener esa rotación, ese valor X mapear con el, sí, con el movimiento a lo largo del eje Y, también. Pero, sí, creo que podría haber formas más fáciles de resolver el problema con, sobre, como, mover el pulgar alrededor de él. Por ejemplo, como, simplemente, como, detectar cuando mueves tu pulgar, como, más a la izquierda que el punto medio, y luego empezar, como, tomando, sí, negando el valor, que es, de nuevo, un poco de trampa, pero... ¿Todavía cubrirás cómo decidir a qué campo giramos finalmente? Esa es una muy buena pregunta. No hemos, como, llegado tan lejos todavía. Definitivamente es algo, como, creo que podríamos intentar empezar, sí, a juntarlo. Creo que la forma en que, supongo, podemos, como, pensar en cómo hacer eso es que, en este momento, este valor, sí, hemos mapeado esto, lo hemos mantenido bastante fácil para nosotros mismos porque estos valores están mapeados de un píxel o uno, sí, una unidad en el valor, en el valor animado igual a un grado de rotación. Y si, como, sí, decimos que tenemos, como, 10 segmentos aquí, cada segmento va a ser 36 grados de valor, o 36, como, píxeles en el valor. Entonces, lo que podemos hacer es esta función de inicio te da un callback al final. Así que, vamos a comprobar cuál es este valor. Entonces, lo que deberíamos ver ahora es si dejamos que eso gire, deberíamos ver, como, el valor final aquí. Genial. Y lo que queremos hacer entonces es decir, como, queremos saber el resultado o el valor actual en el momento del final. Y luego queremos ser capaces de, supongo, como, dividirlo por 10 para darnos
12. Añadiendo Listener y Extensiones
Short description:
Sí, una parte es que no tenemos acceso al valor bruto del valor animado. Podemos configurar un listener para este valor y añadirlo al estado. Luego, en la función de finalización, podemos calcular el segmento en el que cae el usuario basándonos en el valor. También podríamos añadir extensiones como disparar confeti y utilizar retroalimentación háptica para mejorar la experiencia del usuario. Sería genial escuchar cualquier pensamiento o idea de todos.
el, sí, el, tipo de, segmento. ¿Es eso correcto? ¿Dividirlo por 10? Sí. Aquí vamos. Sí, está bien, inténtalo. Entonces, una parte es que no tenemos el real, con este valor animado, no podemos realmente, tipo de, obtener acceso al valor bruto de esto. Así que, lo que necesitaremos hacer es configurar un listener para este valor y, tipo de, añadirlo al estado. Así que, vamos a, tipo de, como, juntar esto bastante rápido. Así que, lo que voy a hacer es añadir un listener al valor de rotación. Y vamos a establecer el valor cuando se llame a eso. En nuestro efecto, también podemos devolver una limpieza. Vale. Sí, esto es, estoy, tipo de, juntando esto para mostrar cómo se podría hacer. Pero lo que deberíamos tener ahora es, en este estado, tenemos nuestro, tipo de, valor. Y lo que podemos hacer entonces es, en esta función de finalización, podemos, tipo de, comprobar cuál es nuestro valor. Así que, si lo giramos alrededor, ahora tenemos, eso no es lo que, sí. Así que, lo que tendremos en este punto es el valor en el que terminamos en esto, o lo que deberíamos tener es el valor en el que terminamos en este callback. Y luego podemos, sí, como mencioné, usar eso para calcular que comienza en. Así que, estamos empezando en medio del segmento. Seremos, tipo de, como, menos 5 y más 5, lo siento, 6, 6, 2, 2. Seremos menos 18 y más 18 desde el principio será nuestro primer segmento. Así que, sí, podríamos, tipo de, calcular los desplazamientos desde eso y, tipo de, averiguar qué ese valor, en qué segmento cae el usuario basado en, como, el módulo de eso, si eso tiene sentido. Andre, ¿tiene sentido eso para el, tipo de, decidir cuál ha sido girado? Genial. Y no estoy exactamente seguro de por qué esto no está funcionando en este momento. Estoy seguro de que hay algo estúpido pasando. Pero, sí, eso es más o menos cómo funcionaría. Genial. ¿Alguna otra pregunta? ¿Algún otro pensamiento sobre, como, sobre, sí, supongo, extensiones que podríamos hacer aquí o, como, pequeños detalles agradables que suceden también? Como, siéntete libre de dispararlos en cualquier lugar. Pero, sí, como mencionó Adam, como, sí, hay algunas bibliotecas pequeñas y agradables como la del confeti. Así que, sí, lo que podríamos hacer es, sí, podríamos usar esto, tipo de, esta biblioteca para disparar un poco de confeti cuando, sí, en este punto, cuando terminamos esa descomposición, cuando esa velocidad vuelve a cero, podríamos disparar un poco de confeti. Los hápticos son también una idea muy buena. Así que, creo que una de las cosas que encontramos es que los hápticos añaden, como, sabes, tipo de otra dimensión a, a cómo se siente una aplicación. Y obviamente, en eso mundo real, cuando estás girando ese spinner, obtienes esos clics y puedes sentirlo. Y eso es una gran parte del proceso. Y de la misma manera, como, como podríamos calcular el segmento en el que, tipo de, aterriza el spinner, también podríamos calcular cada vez que ese spinner pasa por un segmento, podríamos disparar un poco de retroalimentación háptica, por ejemplo, y eso, ya sabes, eso sería una extensión realmente agradable también. Pero sí, si no tenemos ninguna otra pregunta o algo así, siento que una cosa que no hemos hecho es añadir, añadir ninguna información de contacto para nosotros, porque creo que sería genial, sí, escuchar cualquier pensamiento sobre cómo, cómo le fue a todos o, sí, cualquier otra idea sobre lo que podríamos estar construyendo o, sí, simplemente, como, detalles agradables para tener. Sí. Alan, ¿algún otro detalle final? No, creo que has cubierto todo perfectamente bien. Genial. Dulce. Bueno, sí, gracias a todos. Creo que tenemos alrededor de una hora, así que sí, gracias mucho a todos los que se presentaron. Espero que haya sido, como, supongo, interesante o agradable y fácil de seguir, especialmente si nunca has trabajado con React Native antes. Y sí, como, espero escuchar de todos ustedes en el futuro. Eso sería genial. Bien. Adiós.
Presentando FlashList: Construyamos juntos una lista performante en React Native
Top Content
Featured Workshop
3 authors
En esta masterclass aprenderás por qué creamos FlashList en Shopify y cómo puedes usarlo en tu código hoy. Te mostraremos cómo tomar una lista que no es performante en FlatList y hacerla performante usando FlashList con mínimo esfuerzo. Usaremos herramientas como Flipper, nuestro propio código de benchmarking, y te enseñaremos cómo la API de FlashList puede cubrir casos de uso más complejos y aún así mantener un rendimiento de primera categoría.Sabrás:- Breve presentación sobre qué es FlashList, por qué lo construimos, etc.- Migrando de FlatList a FlashList- Enseñando cómo escribir una lista performante- Utilizando las herramientas proporcionadas por la biblioteca FlashList (principalmente el hook useBenchmark)- Usando los plugins de Flipper (gráfico de llamas, nuestro perfilador de listas, perfilador de UI & JS FPS, etc.)- Optimizando el rendimiento de FlashList utilizando props más avanzados como `getType`- 5-6 tareas de muestra donde descubriremos y solucionaremos problemas juntos- Preguntas y respuestas con el equipo de Shopify
A diferencia de las pruebas unitarias, las pruebas de extremo a extremo buscan interactuar con su aplicación tal como lo haría un usuario real. Y como todos sabemos, puede ser bastante desafiante. Especialmente cuando hablamos de aplicaciones móviles. Las pruebas dependen de muchas condiciones y se consideran lentas e inestables. Por otro lado, las pruebas de extremo a extremo pueden dar la mayor confianza de que su aplicación está funcionando. Y si se hace correctamente, puede convertirse en una herramienta increíble para aumentar la velocidad del desarrollador. Detox es un marco de pruebas de extremo a extremo en caja gris para aplicaciones móviles. Desarrollado por Wix para resolver el problema de la lentitud e inestabilidad y utilizado por React Native en sí como su herramienta de pruebas E2E. Únete a mí en esta masterclass para aprender cómo hacer que tus pruebas de extremo a extremo móviles con Detox sean excelentes. Prerrequisitos- iOS/Android: MacOS Catalina o más reciente- Solo Android: Linux- Instalar antes de la masterclass
Desplegar aplicaciones React Native manualmente en una máquina local puede ser complejo. Las diferencias entre Android e iOS requieren que los desarrolladores utilicen herramientas y procesos específicos para cada plataforma, incluidos los requisitos de hardware para iOS. Los despliegues manuales también dificultan la gestión de las credenciales de firma, las configuraciones de entorno, el seguimiento de las versiones y la colaboración en equipo. Appflow es la plataforma de DevOps móvil en la nube creada por Ionic. Utilizar un servicio como Appflow para construir aplicaciones React Native no solo proporciona acceso a potentes recursos informáticos, sino que también simplifica el proceso de despliegue al proporcionar un entorno centralizado para gestionar y distribuir tu aplicación en múltiples plataformas. Esto puede ahorrar tiempo y recursos, permitir la colaboración, así como mejorar la confiabilidad y escalabilidad general de una aplicación. En este masterclass, desplegarás una aplicación React Native para su entrega en dispositivos de prueba Android e iOS utilizando Appflow. También aprenderás los pasos para publicar en Google Play y Apple App Stores. No se requiere experiencia previa en el despliegue de aplicaciones nativas, y obtendrás una comprensión más profunda del proceso de despliegue móvil y las mejores prácticas para utilizar una plataforma de DevOps móvil en la nube para enviar rápidamente a gran escala.
Así que has configurado Detox para probar tu aplicación React Native. ¡Buen trabajo! Pero aún no has terminado: todavía hay muchas preguntas que necesitas responder. ¿Cuántas pruebas escribes? ¿Cuándo y dónde las ejecutas? ¿Cómo te aseguras de que hay datos de prueba disponibles? ¿Qué haces con partes de tu aplicación que utilizan APIs móviles que son difíciles de automatizar? Podrías invertir mucho esfuerzo en estas cosas, ¿vale la pena? En esta masterclass de tres horas abordaremos estas preguntas discutiendo cómo integrar Detox en tu flujo de trabajo de desarrollo. Saldrás con las habilidades e información que necesitas para hacer de las pruebas Detox una parte natural y productiva del desarrollo diario. Tabla de contenidos: - Decidir qué probar con Detox vs React Native Testing Library vs pruebas manuales- Configuración de una capa de API falsa para pruebas- Cómo hacer que Detox funcione en CI en GitHub Actions de forma gratuita- Decidir cuánto de tu aplicación probar con Detox: una escala móvil- Integración de Detox en tu flujo de trabajo de desarrollo local Prerrequisitos - Familiaridad con la construcción de aplicaciones con React Native- Experiencia básica con Detox- Configuración de la máquina: un entorno de desarrollo CLI de React Native en funcionamiento que incluye Xcode o Android Studio
Sabemos que React es para la web y React Native es para Android e iOS. Pero ¿has oído hablar de react-native-web? ¡Para escribir una aplicación para Android, iOS y la web en un solo código base! Al igual que React Native abstrae los detalles de iOS y Android, React Native Web también abstrae los detalles del navegador. Esto abre la posibilidad de compartir aún más código entre plataformas. En este masterclass, aprenderás a configurar el esqueleto de una aplicación React Native Web que funcione de manera excelente y se vea increíble. Puedes utilizar el código resultante como base para construir la aplicación que desees, utilizando los paradigmas de React y muchas bibliotecas de JavaScript a las que estás acostumbrado. ¡Te sorprenderá la cantidad de tipos de aplicaciones que realmente no requieren un código base separado para móvil y web! Qué se incluye1. Configuración de navegadores de cajón y de pila con React Navigation, incluyendo la capacidad de respuesta2. Configuración de React Navigation con URLs3. Configuración de React Native Paper, incluyendo el estilo del cajón y los encabezados de React Navigation4. Configuración de un tema de color personalizado que admita el modo oscuro5. Configuración de favicons/iconos de aplicaciones y metadatos6. Qué hacer cuando no puedes o no quieres proporcionar la misma funcionalidad en la web y en el móvil Requisitos previos- Familiaridad con la construcción de aplicaciones con React o React Native. No es necesario conocer ambos.- Configuración de la máquina: Node LTS, Yarn, ser capaz de crear y ejecutar correctamente una nueva aplicación Expo siguiendo las instrucciones en https://docs.expo.dev/get-started/create-a-new-app/
¿Estás satisfecho con tus suites de pruebas? Si dijiste que no, no estás solo, la mayoría de los desarrolladores no lo están. Y hacer pruebas en React Native es más difícil que en la mayoría de las plataformas. ¿Cómo puedes escribir pruebas en JavaScript cuando el código JS y nativo están tan entrelazados? ¿Y qué diablos se supone que debes hacer con esa persistente advertencia de act()? Ante estos desafíos, algunos equipos nunca logran avanzar en las pruebas de su aplicación de React Native, y otros terminan con pruebas que no parecen ayudar y solo requieren tiempo adicional para mantener. Pero no tiene que ser así. React Native Testing Library (RNTL) es una excelente biblioteca para pruebas de componentes, y con el modelo mental adecuado puedes usarla para implementar pruebas de bajo costo y alto valor. En este taller de tres horas aprenderás las herramientas, técnicas y principios que necesitas para implementar pruebas que te ayudarán a lanzar tu aplicación de React Native con confianza. Saldrás con una visión clara del objetivo de tus pruebas de componentes y con técnicas que te ayudarán a superar cualquier obstáculo que se interponga en ese objetivo.aprenderás:- Los diferentes tipos de pruebas en React Native, y dónde encajan las pruebas de componentes- Un modelo mental para pensar en las entradas y salidas de los componentes que pruebas- Opciones para seleccionar elementos de texto, imagen y código nativo para verificar e interactuar con ellos- El valor de las simulaciones y por qué no se deben evitar- Los desafíos con la asincronía en las pruebas de RNTL y cómo manejarlos- Opciones para manejar funciones y componentes nativos en tus pruebas de JavaScript Requisitos previos:- Familiaridad con la construcción de aplicaciones con React Native- Experiencia básica en la escritura de pruebas automatizadas con Jest u otro framework de pruebas unitarias- No necesitas experiencia previa con React Native Testing Library- Configuración de la máquina: Node 16.x o 18.x, Yarn, ser capaz de crear y ejecutar con éxito una nueva aplicación Expo siguiendo las instrucciones en https://docs.expo.dev/get-started/create-a-new-app/
This Talk discusses Rack Native at Microsoft and the efforts to improve code integration, developer experience, and leadership goals. The goal is to extend Rack Native to any app, utilize web code, and increase developer velocity. Implementing web APIs for React Native is being explored, as well as collaboration with Meta. The ultimate aim is to make web code into universal code and enable developers to write code once and have it work on all platforms.
React Server Components (RSC) offer a more accessible approach within the React model, addressing challenges like big initial bundle size and unnecessary data over the network. RSC can benefit React Native development by adding a new server layer and enabling faster requests. They also allow for faster publishing of changes in mobile apps and can be integrated into federated super apps. However, implementing RSC in mobile apps requires careful consideration of offline-first apps, caching, and Apple's review process.
The Talk discusses the combination of React Native and Kotlin Multiplatform for cross-platform app development. Challenges with native modules in React Native are addressed, and the potential improvements of using Kotlin Multiplatform Mobile are explored. The integration of Kotlin Multiplatform with React Native streamlines native implementation and eliminates boilerplate code. Questions about architecture and compatibility, as well as the possibility of supporting React Native Web, are discussed. The React Native toolkit works with native animations and has potential for open-source development.
This Talk discusses building cross-platform component libraries for React and React Native, based on a successful project with a large government-owned news organization. It covers the requirements for React Native knowledge, building cross-platform components, platform-specific components, styling, and the tools used. The Talk also highlights the challenges of implementing responsive design in React Native.
Micro frontends are an architectural style where independent deliverable frontend applications compose a greater application. They allow for independent development and deployment, breaking down teams into feature verticals. React Native's architecture enables updating the JavaScript layer without going through the app store. Code Push can be used to deploy separate JavaScript bundles for each micro frontend. However, there are challenges with managing native code and dependencies in a micro frontend ecosystem for mobile apps.
Comments