Cuando se trata de manejar Focus Management en aplicaciones React Native para TV, los desarrolladores pueden encontrarse pasando por cinco etapas familiares (de duelo): ? ? ? ? ?

La gestión del enfoque es un desafío único en el desarrollo de aplicaciones de TV, debido a la fragmentación entre plataformas de TV que ha llevado a una variedad de técnicas de gestión del enfoque. Los desarrolladores se han visto obligados a crear y adoptar múltiples estrategias para gestionar el enfoque, a menudo haciendo malabares con soluciones específicas de plataforma junto con abstracciones multiplataforma. El desafío del enfoque no es solo garantizar que se maneje correctamente, sino también manejar las diferencias de plataforma. Android TV y tvOS de Apple tienen distintos motores de enfoque nativos sobre los que puedes leer más en este artículo escrito por mi colega @hellonehha.

Originalmente, los documentos y API específicos de TV formaban parte de la documentación principal de React Native. Ahora, la mayor parte del contenido específico de TV se ha trasladado al proyecto react-native-tvos.

reaccionar-nativo-tvos

"react-native": "npm:react-native-tvos@latest"

El proyecto react-native-tvos es un paquete de código abierto que proporciona adiciones y extensiones al marco central de React Native, con un enfoque específico en la compatibilidad con las plataformas Apple TV y Android TV. La mayoría de los cambios en este proyecto se centran en el manejo de la navegación basada en enfoque en un SmartTV usando el D-Pad en el control remoto. El proyecto es mantenido por (¡el increíble!) Doug Lowder y comúnmente se recomienda como la forma principal de manejar la gestión del enfoque en las aplicaciones React Native TV.

Sin embargo, como muchos proyectos mantenidos por la comunidad, el proyecto reaccionar-nativo-tvos ha evolucionado en función de las necesidades de los desarrolladores, y ahora hay múltiples formas de manejar el enfoque. Exploremos los componentes adicionales y las mejoras a los componentes existentes que proporciona react-native-tvos:

1. TVFocusGuideView

TVFocusGuideView brinda soporte para la API UIFocusGuide de Apple y se implementa de la misma manera para Android TV, para ayudar a garantizar que se pueda navegar a los controles enfocables, incluso si no están directamente en línea con otros controles - Según reaccionar-nativo-tvos.

Por ejemplo, aquí hay una cuadrícula de 10 componentes Pressable renderizados dentro de un componente TVFocusGuideView:

import { TVFocusGuideView } from 'react-native';

const TVFocusGuideViewExample = () => {
  const [focusedItem, setFocusedItem] = useState(null);

  const renderGridItem = number => (
     setFocusedItem(number)}
      onBlur={() => setFocusedItem(null)}>
      {number}
    
  );

  return (
    
      

      
        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(num => renderGridItem(num))}
      
    >
  );
};

TVFocusGuideView acepta algunos accesorios que te ayudarán a manejar el enfoque:

destinos prop

Con TVFocusGuideView puede configurar una serie de componentes para registrarlos como "destinos" de TVFocusGuideView. Veamos nuestro ejemplo:

• Establecer el accesorio de destino para que sea una referencia al elemento 8 (destinations={[item8Ref.current]}) hace que el foco se mueva al elemento 8 cuando navegamos inicialmente a TVFocusGuideView.

trampa de enfoque

Este accesorio garantiza que el foco no se escape del componente principal para las instrucciones dadas. Este accesorio garantiza que el foco no se escape del componente principal en las direcciones dadas. Veamos nuestro ejemplo:

• Con el accesorio trapFocusLeft ya no puedes navegar hacia la izquierda fuera del contenedor

apoyo de enfoque automático

Cuando el enfoque automático está configurado en verdadero, TVFocusGuideView administrará el enfoque por usted redirigiendo el enfoque al primer niño enfocable. También recuerda al último niño enfocado y redirige la atención hacia él en las visitas posteriores. Si este accesorio se usa con el accesorio de destino, el componente establecido por el accesorio de destino tendrá prioridad. Veamos nuestro ejemplo:

• Sin este accesorio, cuando pasamos del componente Encabezado al TVFocusGuideView, el enfoque fue al componente más cercano: elemento 3 (según el motor de enfoque integrado basado en proximidad de Android)
• Con el accesorio de enfoque automático se pasa al elemento 1

2. Tocable

Con react-native-tvos, los componentes Touchable (TouchableWithoutFeedback, TouchableHighlight y TouchableOpacity) incluyen código adicional para detectar cambios de enfoque y diseñar adecuadamente los componentes cuando están enfocados. También garantiza que se activen las acciones apropiadas cuando el usuario interactúa con las vistas táctiles utilizando el control remoto del televisor.

Específicamente, el evento onFocus se activa cuando la vista táctil gana foco, y el evento onBlur se activa cuando la vista pierde el foco. Esto le permite aplicar un estilo o una lógica únicos cuando el componente está en un estado enfocado que no viene de fábrica con el núcleo React Native.

Además, el método onPress se ha modificado para que se active cuando el usuario selecciona Touchable presionando el botón "seleccionar" en el control remoto del televisor (el botón central en el control remoto del Apple TV o el botón central en el D-Pad de Android TV). ) y el evento onLongPress se ejecuta dos veces cuando se mantiene presionado el botón "seleccionar" durante un período determinado.

3. Presionable

Al igual que Touchable, el componente Pressable se ha mejorado para permitirle aceptar los accesorios onFocus y onBlur.
De manera similar al estado "presionado" que se activa cuando un usuario presiona el componente en una pantalla táctil, el componente Pressable react-native-tvos introduce un estado enfocado que se vuelve verdadero cuando el componente está enfocado en la pantalla del televisor.

Aquí hay un ejemplo cuando se utilizan los componentes Pressable y Touchable del núcleo de React Native y no aceptan/ejecutan los accesorios onFocus y onBlur:

Utilizando los mismos componentes presionables y táctiles de react-native-tvos, aceptan y ejecutan los accesorios onFocus y onBlur:

4. hasTVPreferredFocus accesorio

Algunos componentes de React Native tienen el accesorio hasTVPreferredFocus, que te ayuda a priorizar el enfoque. Si se establece en verdadero, hasTVPreferredFocus forzará el foco en ese elemento. Según los documentos de React Native, estos son los componentes actuales que aceptan la propiedad:

Sin embargo, si estás usando react-native-tvOS, hay muchos más componentes que aceptan este accesorio:

Veamos un ejemplo:

• Establecer la propiedad hasTVPreferredFocus en verdadero para Pressable 2 hace que el foco esté en Pressable 2
• Cambiarlo para que sea verdadero cuando estamos en Pressable 3 hace que el foco se mueva a Pressable 3

5. Accesorio nextFocusDirection

La propiedad nextFocusDirection designa el siguiente componente que recibirá el foco cuando el usuario navega en la dirección especificada, lo que le ayuda a manejar la navegación del foco. Cuando se usa react-native-tvos, este accesorio es aceptado por los mismos componentes que aceptan el accesorio hasTVPreferredFocus (View, TouchableHighlight, Pressable, TouchableOpacity, TextInput, TVFocusGuideView, TouchableNativeFeedback, Button). Veamos un ejemplo:

nextFocusDown={pressableRef3.current}
nextFocusRight={pressableRef5.current}>

• Establecer el accesorio nextFocusDown en Pressable 3 hace que el enfoque se mueva a Pressable 3 cuando el enfoque se mueve hacia abajo
• Establecer el accesorio nextFocusRight en Pressable 5 hace que el enfoque se mueva a Pressable 5 cuando el enfoque se mueve hacia la derecha

Conclusión

Cuando se trata de manejar la gestión del enfoque, no existe una solución única para todas las aplicaciones React Native TV. El enfoque depende en última instancia de las necesidades y requisitos específicos de su proyecto. Si bien react-native-tvos proporciona abstracciones útiles entre dispositivos, es posible que deba adoptar soluciones específicas de la plataforma para manejar problemas de fragmentación comunes en las plataformas SmartTV.

Tómese el tiempo para explorar estas diversas soluciones de gestión de enfoque para poder ofrecer una experiencia intuitiva de manejo de enfoque a sus usuarios, independientemente de la plataforma SmartTV que estén utilizando.

Recursos relacionados

• https://dev.to/amazonappdev/tv-navigation-in-react-native-a-guide-to-using-tvfocusguideview-302i
• https://medium.com/xite-engineering/revolutionizing-focus-management-in-tv-applications-with-react-native-10ba69bd90
• https://reactnative.dev/docs/0.72/building-for-tv