Saltar al contenido principal

0.36: Headless JS, la API del teclado y más

· 3 min de lectura
Héctor Ramos
Héctor Ramos
Former Developer Advocate @ Facebook
Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Hoy lanzamos React Native 0.36. Sigue leyendo para conocer las novedades.

Headless JS​

Headless JS permite ejecutar tareas en JavaScript mientras tu aplicación está en segundo plano. Puede usarse, por ejemplo, para sincronizar datos nuevos, gestionar notificaciones push o reproducir música. Por ahora, solo está disponible en Android.

Para comenzar, define tu tarea asíncrona en un archivo dedicado (ej. SomeTaskName.js):

module.exports = async taskData => {
  // Perform your task here.
};

Luego, registra tu tarea en AppRegistry:

AppRegistry.registerHeadlessTask('SomeTaskName', () =>
  require('SomeTaskName'),
);

Usar Headless JS requiere escribir código nativo Java para iniciar el servicio cuando sea necesario. ¡Consulta nuestra nueva documentación de Headless JS para aprender más!

La API del teclado​

Ahora es más fácil trabajar con el teclado en pantalla usando Keyboard. Puedes escuchar eventos nativos del teclado y responder a ellos. Por ejemplo, para ocultar el teclado activo, simplemente llama a Keyboard.dismiss():

import {Keyboard} from 'react-native';

// Hide that keyboard!
Keyboard.dismiss();

División animada​

React Native ya admitía combinar valores animados mediante suma, multiplicación y módulo. Con la versión 0.36, ahora es posible combinar valores animados mediante división. Hay casos donde un valor animado necesita invertir otro valor animado para cálculos. Por ejemplo, al invertir una escala (2x --> 0.5x):

const a = Animated.Value(1);
const b = Animated.divide(1, a);

Animated.spring(a, {
  toValue: 2,
}).start();

b seguirá entonces la animación de resorte de a y producirá el valor de 1 / a.

El uso básico es así:

<Animated.View style={{transform: [{scale: a}]}}>
  <Animated.Image style={{transform: [{scale: b}]}} />
<Animated.View>

En este ejemplo, la imagen interna no se deformará porque la escala del elemento padre se cancela. Si quieres aprender más, consulta la guía de animaciones.

Barras de estado oscuras​

Se ha añadido un nuevo valor barStyle a StatusBar: dark-content. Con esto, ahora puedes usar barStyle tanto en Android como en iOS. El comportamiento será:

  • default: Usa el valor predeterminado de la plataforma (claro en iOS, oscuro en Android).

  • light-content: Barra de estado clara con texto e iconos negros.

  • dark-content: Barra de estado oscura con texto e iconos blancos.

...y más​

Esto es solo una muestra de los cambios en 0.36. Consulta las notas de lanzamiento en GitHub para ver la lista completa de nuevas funciones, correcciones de errores y cambios importantes.

Puedes actualizar a la versión 0.36 ejecutando estos comandos en la terminal:

$ npm install --save react-native@0.36
$ react-native upgrade