Cómo animar una vista de encabezado en desplazamiento con React Native Animated (2024)

1 de octubre de 2020 | Por Aman Mittal | 8 minutos de lectura

Cómo animar una vista de encabezado en desplazamiento con React Native Animated (1)

ElAnimadoLa biblioteca de React Native proporciona una excelente manera de agregar animaciones y brindar a los usuarios de la aplicación una experiencia más fluida y amigable.

En este tutorial, exploremos una forma de crear un componente de vista de encabezado que anima en la posición de desplazamiento del componente ScrollView de React Native. Repasaremos los aspectos básicos de la creación de un nuevo valor animado y explicaremos la importancia de funciones y propiedades como interpolación, extrapolación, compensación de contenido, etc.

El código fuente está disponible en GitHub.

requisitos previos

Para seguir este tutorial, asegúrese de estar familiarizado con JavaScript/ES6 y cumpla con los siguientes requisitos en su entorno de desarrollo local.

  • Nodo.jsversión >= 12.x.x instalada

  • Tenga acceso a un administrador de paquetes como npm o yarn

  • expo-cliversión instalada o uso npx

El ejemplo del siguiente tutorial se basa en Expo SDK 38.

Instalación de dependencias

Comience creando una nueva aplicación React Native generada con expo-cli. Tenga en cuenta que todo el código mencionado en este tutorial también funciona con aplicaciones React Native simples. Abra una ventana de terminal y ejecute el siguiente comando:

npx expo-cli init animate-header-example

# después de crear el proyecto, navegue al directorio
cd animate-header-example

Para manejar dispositivos con muesca en los sistemas operativos iOS y Android, primero instalemos algunas bibliotecas. Estas bibliotecas van a agregar relleno automático en los dispositivos de muesca, de modo que la vista principal de la aplicación no se cruza con un área segura en los dispositivos habilitados para muesca. Correr:

expo install react-native-safe-area-view react-native-safe-area-context

Para usar vistas de área segura, envuelva la raíz de la aplicación React Native con SafeAreaProvider desde elreaccionar-nativo-área segura-contextobiblioteca. Abra App.js y modifíquelo como se muestra a continuación:

importar React desde 'react';
importar {Texto, Ver} desde 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';

exportar función predeterminada App() {
devolver (


¡Abre App.js para comenzar a trabajar en tu aplicación!


);
}

A continuación, ajuste el contenido del componente de la aplicación con SafeAreaView desde elReaccionar-native-safe-area-viewbiblioteca. Tendrá un prop de estilo con un flex de valor 1 y otro prop llamado forceInset. Es importante que agreguemos esto, especialmente para algunos dispositivos Android que podrían no comportarse como se esperaba. Este accesorio obligará a la aplicación a agregar un relleno de inserción en la vista de contenido. Establecer el valor de top: always siempre implicará que se fuerza el relleno en la parte superior de la vista.

// ... otras declaraciones de importación
importar SafeAreaView desde 'react-native-safe-area-view';

exportar función predeterminada App() {
devolver (



¡Abre App.js para comenzar a trabajar en tu aplicación!



);
}

Esto es lo que sucede en un dispositivo Android cuando forceInset no se usa en SafeAreaView:

Cómo animar una vista de encabezado en desplazamiento con React Native Animated (2)

Y con el accesorio forceInset aplicado:

Cómo animar una vista de encabezado en desplazamiento con React Native Animated (3)

En iOS, el comportamiento es el esperado:

Cómo animar una vista de encabezado en desplazamiento con React Native Animated (4)

El último paso en esta sección es crear un nuevo archivo de componente llamado AnimatedHeader.js dentro del directorio components/. Por ahora, no va a devolver nada.

importar React desde 'react';
importar { Animado, Vista } de 'react-native';

const encabezado animado = () => {
devolver nulo;
};

exportar encabezado animado predeterminado;

Asegúrate de importarlo en el archivo App.js:

// ... después de otras declaraciones de importación
importar AnimatedHeader desde './components/AnimatedHeader';

Creación de un componente de encabezado animado

La animación en la posición del desplazamiento en un componente ScrollView tendrá un Animated.Value de 0. Para crear una animación, se requiere Animated.Value. En el archivo App.js, importe useRef desde la biblioteca React. Luego, defina una variable llamada compensación con un nuevo valor animado. Para usar la biblioteca animada de React Native, impórtala también.

importar Reaccionar, { useRef } de 'reaccionar';
importar {Texto, Ver, Animado} de 'react-native';
// ...otras declaraciones de importación

exportar función predeterminada App() {
const offset = useRef(new Animated.Value(0)).current;

// ...
}

Para este ejemplo, no es necesario usar el gancho useRef; sin embargo, si desea modificar el valor animado, se recomienda utilizar useRef. Proporciona una propiedad actual que persiste a lo largo del ciclo de vida de un componente.

El valor del desplazamiento ahora se puede pasar como accesorio al componente AnimatedHeader.

exportar función predeterminada App() {
const offset = useRef(new Animated.Value(0)).current;

devolver (


{/* Añade el siguiente encabezado animado */}


¡Abre App.js para comenzar a trabajar en tu aplicación!



);
}

Para acceder al valor de inserción del área segura dentro del componente AnimatedHeader, la biblioteca react-native-safe-area-context proporciona un gancho llamado useSafeAreaInsets(). Este enlace devuelve un objeto de inserción de área segura con los siguientes valores:

{ arriba: número,
número correcto,
abajo: número,
izquierda: número
}

El valor de inserción de la parte superior se manipulará al definir el encabezado animado.

Primero, importemos este gancho en el archivo AnimatedHeader.js y luego definamos una constante fija HEADER_HEIGHT que será la altura inicial de Animated.View.

// ... otras declaraciones de importación
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const HEADER_HEIGHT = 200;

const encabezado animado = ({valor animado}) => {
const insertos = useSafeAreaInsets();

devolver nulo;
};

Para animar la altura de la vista del encabezado en el desplazamiento, vamos a utilizar la interpolación. La función interpolate() en Animated.Value permite que un rango de entrada se asigne a un rango de salida diferente.

En el escenario actual, cuando el usuario se desplaza, la interpolación en Animated.Value va a cambiar la escala del encabezado para deslizarse hacia la parte superior al desplazarse por el eje y. Este efecto va a minimizar el valor inicial de la altura de Animated.View.

La interpolación debe especificar un valor de extrapolación. Esto determina la escala de la altura del encabezado para que sea visible en el último valor de outputRange. Hay tres valores diferentes para extrapolar disponibles, pero vamos a usar abrazadera.

Comience declarando una variable llamada headerHeight que tendrá el valor de interpolación. Animated.Value es el valor animado de apoyo que proviene del componente principal.

El rango de entrada será de 0 a HEADER_HEIGHT más el recuadro superior. El rango de salida debe ser HEADER_HEIGHT más el recuadro superior al recuadro superior más 44.

const encabezado animado = ({valor animado}) => {
const insertos = useSafeAreaInsets();

const headerHeight = animValue.interpolate({
rango de entrada: [0, HEADER_HEIGHT + insets.top],
rango de salida: [HEADER_HEIGHT + insets.top, insets.top + 44],
extrapolar: 'abrazadera'
});

// ...
};

Ahora, agreguemos una Animated.View para renderizar desde este componente. Va a usar position: absolute para ayudar a cubrir el fondo detrás de la barra de estado, así como el mismo color que todo el encabezado.

const encabezado animado = ({valor animado}) => {
// ...
devolver (
estilo={{
posición: 'absoluto',
superior: 0,
izquierda: 0,
derecha: 0,
índice z: 10,
altura: altura del encabezado,
color de fondo: 'azul claro'
}}
/>
);
};

Esta sección finaliza con el siguiente resultado:

Cómo animar una vista de encabezado en desplazamiento con React Native Animated (5)

Manipulación de ScrollView

En el archivo App.js, se mostrará un componente ScrollView debajo del componente de encabezado y, a cambio, mostrará una lista de datos simulados.

Para este ejemplo, preparé una lista mínima de títulos de libros en un archivo separado llamado data.js.

constante DATOS = [
{
identificación: 1,
Título: 'Los juegos del hambre'
},
{
identificación: 2,
título: 'Harry Potter y la Orden del Fénix'
},
{
identificación: 3,
Título: 'Matar a un ruiseñor'
},
{
identificación: 4,
Título: 'Orgullo y prejuicio'
},
{
identificación: 5,
título: 'Crepúsculo'
},
{
identificación: 6,
Título: 'La ladrona de libros'
},
{
identificación: 7,
Título: 'Las Crónicas de Narnia'
},
{
identificación: 8,
título: 'Granja de animales'
},
{
identificación: 9,
Título: 'Lo que el viento se llevó'
},
{
identificación: 10,
título: 'La sombra del viento'
},
{
identificación: 11,
título: 'La falla en nuestras estrellas'
},
{
identificación: 12,
título: "La guía del autoestopista galáctico"
},
{
identificación: 13,
título: 'El árbol generoso'
},
{
identificación: 14,
Título: 'Cumbres Borrascosas'
},
{
identificación: 15,
título: 'El Código Da Vinci'
}
];

exportar DATOS predeterminados;

Cómo animar una vista de encabezado en desplazamiento con React Native Animated (6)

El siguiente paso es importar este archivo en App.js. Además, importe el componente ScrollView de React Native.

//...
importar { ScrollView, Text, View, Animated } de 'react-native';

importar DATOS desde './data';

A continuación, modifique el contenido del componente de la aplicación. El accesorio importante a tener en cuenta a continuación en el componente ScrollView es el accesorio onScroll. Los gestos de mapeo, como desplazarse directamente a un valor animado, se pueden realizar mediante Animated.Event. Este tipo de función de evento se pasa como valor a la propiedad onScroll.

Animated.Event acepta una matriz de objetos como primer argumento, que será contentOffset, que indica la posición actual de la vista de desplazamiento. Cambia cada vez que el usuario se desplaza hacia arriba o hacia abajo. El valor de contentOffset a lo largo del eje y será el mismo Animated.Value que se usa para interpolar la altura del componente AnimatedHeader.

Se recomienda pasar el segundo argumento de useNativeDriver en Animated.Event.

exportar función predeterminada App() {
const offset = useRef(new Animated.Value(0)).current;

devolver (



estilo = {{ flex: 1, color de fondo: 'blanco' }}
contenidoContainerStyle={{
alinear elementos: 'centro',
acolchadoTop: 220,
acolchadoHorizontal: 20
}}
muestra el indicador de desplazamiento vertical = {falso}
scrollEventThrottle={16}
onScroll={Evento.animado(
[{ nativeEvent: { contentOffset: { y: offset } } }],
{ useNativeDriver: falso }
)}
>
{DATOS.mapa(elemento => (
clave={elemento.id}
estilo={{
margen inferior: 20
}}
>

{elemento.título}


))}



);
}

Aquí está el resultado después de este paso en un dispositivo iOS:

Cómo animar una vista de encabezado en desplazamiento con React Native Animated (7)

En Android:

Cómo animar una vista de encabezado en desplazamiento con React Native Animated (8)

Conclusión

Espero que te hayas divertido leyendo este tutorial. Si está probando la biblioteca animada de React Native por primera vez, entenderlo puede llevar un poco de tiempo y esa es parte del proceso.

Algunos de los temas importantes tratados en esta publicación se enumeran como enlaces para leer más a continuación:

Finalmente, no olvide prestar especial atención si está desarrollando aplicaciones comerciales React Native que contienen lógica sensible. Puede protegerlos contra el robo de código, la manipulación y la ingeniería inversa siguiendoNuestra guía.

Jscrambler

El líder en seguridad web del lado del cliente. Con Jscrambler, las aplicaciones de JavaScript se vuelven autodefensivas y capaces de detectar y bloquear ataques del lado del cliente como Magecart.

Ver todos los artículos

Suscríbete a nuestro boletín

Cómo animar una vista de encabezado en desplazamiento con React Native Animated (2024)
Top Articles
Latest Posts
Article information

Author: Tuan Roob DDS

Last Updated:

Views: 5309

Rating: 4.1 / 5 (42 voted)

Reviews: 89% of readers found this page helpful

Author information

Name: Tuan Roob DDS

Birthday: 1999-11-20

Address: Suite 592 642 Pfannerstill Island, South Keila, LA 74970-3076

Phone: +9617721773649

Job: Marketing Producer

Hobby: Skydiving, Flag Football, Knitting, Running, Lego building, Hunting, Juggling

Introduction: My name is Tuan Roob DDS, I am a friendly, good, energetic, faithful, fantastic, gentle, enchanting person who loves writing and wants to share my knowledge and understanding with you.