Quando se trata de lidar com o gerenciamento de foco em aplicativos React Native para TV, os desenvolvedores podem passar por cinco estágios familiares (de luto): ? ? ? ? ?

O gerenciamento de foco é um desafio único no desenvolvimento de aplicativos de TV, devido à fragmentação entre plataformas de TV que levou a uma variedade de técnicas de gerenciamento de foco. Os desenvolvedores foram forçados a criar e adotar diversas estratégias para gerenciar o foco, muitas vezes conciliando soluções específicas de plataforma com abstrações de plataforma cruzada. O desafio do foco não é apenas garantir que o foco seja tratado corretamente, mas também lidar com as diferenças de plataforma. O Android TV e o tvOS da Apple têm mecanismos de foco nativos distintos, sobre os quais você pode ler mais neste artigo escrito por meu colega @hellonehha.

Originalmente, documentos e APIs específicos para TV faziam parte da documentação principal do React Native. Agora, a maior parte do conteúdo específico de TV foi transferido para o projeto react-native-tvos.

reagir-nativo-tvos

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

O projeto react-native-tvos é um pacote de código aberto que fornece adições e extensões à estrutura principal do React Native, com foco específico no suporte às plataformas Apple TV e Android TV. A maioria das mudanças neste projeto está centrada no manuseio da navegação baseada em foco em uma SmartTV usando o D-Pad no controle remoto. O projeto é mantido pelo (incrível!) Doug Lowder e é comumente recomendado como a principal forma de lidar com o gerenciamento de foco em aplicativos React Native TV.

No entanto, como muitos projetos mantidos pela comunidade, o projeto react-native-tvos evoluiu com base nas necessidades dos desenvolvedores e agora existem várias maneiras de lidar com o foco. Vamos explorar os componentes adicionais e melhorias nos componentes existentes que o react-native-tvos fornece:

1. TVFocusGuideView

TVFocusGuideView fornece suporte para a API UIFocusGuide da Apple e é implementado da mesma maneira para Android TV, para ajudar a garantir que os controles focáveis ​​possam ser navegados, mesmo que não estejam diretamente alinhados com outros controles - De acordo com react-native-tvos.

Por exemplo, aqui está uma grade de 10 componentes pressionáveis ​​renderizados dentro de um 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 aceita alguns acessórios que ajudam você a lidar com o foco:

suporte de destinos

Com o TVFocusGuideView você pode definir uma série de componentes para registrar como ‘destinos’ do TVFocusGuideView. Vejamos nosso exemplo:

• Definir a propriedade destinations como uma Ref para o item 8 (destinations={[item8Ref.current]}) faz com que o foco se mova para o item 8 quando navegamos inicialmente para o TVFocusGuideView.

suporte trapFocus

Esta propriedade garante que o foco não escape do componente pai para as direções fornecidas. Esta propriedade garante que o foco não escape do componente pai nas direções fornecidas. Vejamos nosso exemplo:

• Com a propriedade trapFocusLeft você não pode mais navegar para a esquerda fora do contêiner

suporte de foco automático

Quando o foco automático está definido como verdadeiro, o TVFocusGuideView gerenciará o foco para você, redirecionando o foco para o primeiro filho focável. Ele também lembra a última criança focada e redireciona o foco para ela nas visitas subsequentes. Se esta propriedade for usada com a propriedade destinations, o componente definido pela propriedade destinations terá precedência. Vejamos nosso exemplo:

• Sem esse suporte, quando passamos do componente Header para o TVFocusGuideView, o foco foi para o componente mais próximo - item 3 (de acordo com o mecanismo de foco integrado baseado em proximidade do Android)
• Com o suporte de foco automático, ele vai para o item 1

2. Tocável

Com o react-native-tvos, os componentes Touchable (TouchableWithoutFeedback, TouchableHighlight e TouchableOpacity) incluem código adicional para detectar alterações de foco e estilizar adequadamente os componentes quando focados. Ele também garante que as ações apropriadas sejam acionadas quando o usuário interage com as visualizações tocáveis ​​usando o controle remoto da TV.

Especificamente, o evento onFocus é acionado quando a visualização Touchable ganha foco, e o evento onBlur é acionado quando a visualização perde o foco. Isso permite que você aplique um estilo ou lógica exclusivo quando o componente está no estado focado que não sai da caixa com o React Native principal.

Além disso, o método onPress foi modificado para ser acionado quando o usuário seleciona o Touchable pressionando o botão "select" no controle remoto da TV (o botão central no controle remoto da Apple TV ou o botão central no D-Pad da Android TV ) e o evento onLongPress é executado duas vezes quando o botão "selecionar" é pressionado por um determinado período.

3. Pressionável

Como Touchable, o componente Pressable foi aprimorado para permitir aceitar os adereços onFocus e onBlur.
Semelhante ao estado ‘pressionado’ que é acionado quando um usuário pressiona o componente em uma tela sensível ao toque, o componente pressionável react-native-tvos introduz um estado focado que se torna verdadeiro quando o componente é focado na tela da TV.

Aqui está um exemplo ao usar os componentes Pressable e Touchable do núcleo React Native e eles não aceitam/executam os adereços onFocus e onBlur:

Usando os mesmos componentes Pressable e Touchable do react-native-tvos, eles aceitam e executam os adereços onFocus e onBlur:

4. suporte hasTVPreferredFocus

Alguns componentes do React Native têm a propriedade hasTVPreferredFocus, que ajuda a priorizar o foco. Se definido como verdadeiro, hasTVPreferredFocus forçará o foco para esse elemento. De acordo com a documentação do React Native, estes são os componentes atuais que aceitam a propriedade:

No entanto, se você estiver usando react-native-tvOS, há muito mais componentes que aceitam esta propriedade:

Vejamos um exemplo:

• Definir a propriedade hasTVPreferredFocus como true para Pressable 2 faz com que o foco esteja em Pressable 2
• Mudá-lo para verdadeiro quando estamos em Pressable 3 faz com que o foco mude para Pressable 3

5. suporte nextFocusDirection

A propriedade nextFocusDirection designa o próximo componente a receber o foco quando o usuário navega na direção especificada, ajudando você a lidar com a navegação de foco. Ao usar react-native-tvos, esta prop é aceita pelos mesmos componentes que aceitam a prop hasTVPreferredFocus (View, TouchableHighlight, Pressable, TouchableOpacity, TextInput, TVFocusGuideView, TouchableNativeFeedback, Button). Vejamos um exemplo:

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

• Definir a propriedade nextFocusDown como Pressable 3 faz com que o foco se mova para Pressable 3 quando o foco se move para baixo
• Definir a propriedade nextFocusRight como Pressable 5 faz com que o foco se mova para Pressable 5 quando o foco se move para a direita

Conclusão

Quando se trata de lidar com o gerenciamento de foco, não existe uma solução única para todos os aplicativos React Native TV. A abordagem depende, em última análise, das necessidades e requisitos específicos do seu projeto. Embora o react-native-tvos forneça abstrações úteis entre dispositivos, pode ser necessário adotar soluções específicas da plataforma para lidar com problemas comuns de fragmentação em plataformas SmartTV.

Reserve um tempo para explorar essas diversas soluções de gerenciamento de foco para que você possa oferecer uma experiência intuitiva de gerenciamento de foco para seus usuários, independentemente da plataforma SmartTV que eles estejam usando.

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