Wenn es um den Umgang mit Focus Management in React Native für TV-Apps geht, durchlaufen Entwickler möglicherweise fünf bekannte Phasen (der Trauer): ? ? ? ? ?

Fokusmanagement ist eine einzigartige Herausforderung bei der Entwicklung von TV-Anwendungen, da die Fragmentierung zwischen TV-Plattformen zu einer Vielzahl von Fokusmanagementtechniken geführt hat. Entwickler waren gezwungen, mehrere Strategien zur Fokusverwaltung zu entwickeln und zu übernehmen, wobei sie oft plattformspezifische Lösungen mit plattformübergreifenden Abstraktionen jonglieren mussten. Die Herausforderung beim Fokussieren besteht nicht nur darin, sicherzustellen, dass der Fokus korrekt gehandhabt wird, sondern auch darin, die Plattformunterschiede zu bewältigen. Android TV und Apples tvOS verfügen über unterschiedliche native Fokus-Engines, über die Sie in diesem Artikel meines Kollegen @hellonehha mehr lesen können.

Ursprünglich waren TV-spezifische Dokumente und APIs Teil der Hauptdokumentation von React Native. Mittlerweile sind die meisten TV-spezifischen Inhalte in das Projekt „react-native-tvos“ verschoben worden.

React-native-tvos

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

Das React-Native-TVOS-Projekt ist ein Open-Source-Paket, das Ergänzungen und Erweiterungen zum Kern-React-Native-Framework bereitstellt, mit besonderem Schwerpunkt auf der Unterstützung der Plattformen Apple TV und Android TV. Die meisten Änderungen in diesem Projekt konzentrieren sich auf die Handhabung der fokusbasierten Navigation auf einem SmartTV mithilfe des D-Pads auf der Fernbedienung. Das Projekt wird von (dem unglaublichen!) Doug Lowder betreut und wird allgemein als primäre Methode zur Fokusverwaltung in React Native TV-Anwendungen empfohlen.

Wie viele von der Community gepflegte Projekte hat sich das React-Native-TVOS-Projekt jedoch auf der Grundlage der Bedürfnisse von Entwicklern weiterentwickelt, und es gibt jetzt mehrere Möglichkeiten, mit dem Fokus umzugehen. Lassen Sie uns die zusätzlichen Komponenten und Verbesserungen bestehender Komponenten erkunden, die React-Native-TVOS bietet:

1. TVFocusGuideView

TVFocusGuideView bietet Unterstützung für die UIFocusGuide-API von Apple und ist auf die gleiche Weise für Android TV implementiert, um sicherzustellen, dass zu fokussierbaren Steuerelementen navigiert werden kann, auch wenn sie nicht direkt mit anderen Steuerelementen übereinstimmen - Gemäß React-Native-TVOS.

Hier ist zum Beispiel ein Raster aus 10 Pressable-Komponenten, das in einer TVFocusGuideView-Komponente gerendert wird:

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 akzeptiert einige Requisiten, die Ihnen bei der Fokussierung helfen:

Reiseziele prop

Mit TVFocusGuideView können Sie eine Reihe von Komponenten festlegen, die als „Ziele“ von TVFocusGuideView registriert werden sollen. Schauen wir uns unser Beispiel an:

• Das Festlegen der Destinations-Requisite als Verweis auf Element 8 (destinations={[item8Ref.current]}) führt dazu, dass der Fokus auf Element 8 verschoben wird, wenn wir zunächst zur TVFocusGuideView navigieren.

trapFocus prop

Diese Requisite stellt sicher, dass der Fokus in den angegebenen Richtungen nicht von der übergeordneten Komponente abweicht. Diese Requisite stellt sicher, dass der Fokus in den angegebenen Richtungen nicht von der übergeordneten Komponente abweicht. Schauen wir uns unser Beispiel an:

• Mit der trapFocusLeft-Requisite können Sie nicht mehr nach links aus dem Container navigieren

Autofokus-Requisite

Wenn der Autofokus auf „True“ eingestellt ist, verwaltet TVFocusGuideView den Fokus für Sie, indem er den Fokus auf das erste fokussierbare Kind umleitet. Es erinnert sich auch an das zuletzt fokussierte Kind und lenkt den Fokus bei den nachfolgenden Besuchen wieder darauf. Wenn diese Requisite mit der Destinations-Requisite verwendet wird, hat die von der Destinations-Requisite festgelegte Komponente Vorrang. Schauen wir uns unser Beispiel an:

• Ohne diese Requisite ging der Fokus beim Wechsel von der Header-Komponente zur TVFocusGuideView-Komponente auf die nächstgelegene Komponente – Element 3 (gemäß der auf Nähe basierenden integrierten Fokus-Engine von Android)
• Mit der Autofokus-Requisite geht es zu Punkt 1

2. Berührbar

Mit den React-Native-TVOS enthalten die Touchable-Komponenten (TouchableWithoutFeedback, TouchableHighlight und TouchableOpacity) zusätzlichen Code, um Fokusänderungen zu erkennen und die Komponenten bei Fokussierung richtig zu formatieren. Es stellt außerdem sicher, dass die entsprechenden Aktionen ausgelöst werden, wenn der Benutzer mit der TV-Fernbedienung mit den berührbaren Ansichten interagiert.

Konkret wird das onFocus-Ereignis ausgelöst, wenn die berührbare Ansicht den Fokus erhält, und das onBlur-Ereignis wird ausgelöst, wenn die Ansicht den Fokus verliert. Dies ermöglicht Ihnen die Anwendung eines einzigartigen Stils oder einer einzigartigen Logik, wenn sich die Komponente im fokussierten Zustand befindet, die mit Core React Native nicht sofort einsatzbereit ist.

Außerdem wurde die onPress-Methode so geändert, dass sie ausgelöst wird, wenn der Benutzer das Touchable auswählt, indem er die „Auswahl“-Taste auf der TV-Fernbedienung drückt (die mittlere Taste auf der Apple TV-Fernbedienung oder die mittlere Taste auf dem Android TV D-Pad). ) und das onLongPress-Ereignis wird zweimal ausgeführt, wenn die Schaltfläche „Auswählen“ für eine bestimmte Dauer gedrückt gehalten wird.

3. Drückbar

Wie Touchable wurde auch die Pressable-Komponente erweitert, sodass sie die Requisiten „onFocus“ und „onBlur“ akzeptieren kann.
Ähnlich wie der „gedrückte“ Zustand, der ausgelöst wird, wenn ein Benutzer die Komponente auf einem Touchscreen drückt, führt die pressbare Komponente „react-native-tvos“ einen fokussierten Zustand ein, der wahr wird, wenn die Komponente auf dem Fernsehbildschirm fokussiert wird.

Hier ist ein Beispiel, wenn die Pressable- und Touchable-Komponenten aus dem React Native-Kern verwendet werden und diese die onFocus- und onBlur-Requisiten nicht akzeptieren/ausführen:

Unter Verwendung der gleichen Pressable- und Touchable-Komponenten von React-Native-TVs akzeptieren und führen sie die Requisiten onFocus und onBlur aus:

4. hasTVPreferredFocus prop

Einige React Native-Komponenten verfügen über die hasTVPreferredFocus-Requisite, die Ihnen hilft, den Fokus zu priorisieren. Wenn es auf „true“ gesetzt ist, erzwingt hasTVPreferredFocus den Fokus auf dieses Element. Laut den React Native-Dokumenten sind dies die aktuellen Komponenten, die die Requisite akzeptieren:

Wenn Sie jedoch React-Native-tvOS verwenden, gibt es viel mehr Komponenten, die diese Requisite akzeptieren:

Sehen wir uns ein Beispiel an:

• Das Setzen der hasTVPreferredFocus-Requisite auf „True“ für Pressable 2 führt dazu, dass der Fokus auf Pressable 2 liegt
• Wenn wir es auf „True“ ändern, wenn wir uns auf „Pressable 3“ befinden, wird der Fokus auf „Pressable 3“ verschoben

5. nextFocusDirection prop

Die nextFocusDirection-Requisite legt die nächste Komponente fest, die den Fokus erhält, wenn der Benutzer in die angegebene Richtung navigiert, und hilft Ihnen bei der Fokusnavigation. Bei Verwendung von „react-native-tvos“ wird diese Requisite von denselben Komponenten akzeptiert, die die hasTVPreferredFocus-Requisite akzeptieren (View, TouchableHighlight, Pressable, TouchableOpacity, TextInput, TVFocusGuideView, TouchableNativeFeedback, Button). Schauen wir uns ein Beispiel an:

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

• Das Festlegen der nextFocusDown-Requisite auf Pressable 3 bewirkt, dass der Fokus auf Pressable 3 verschoben wird, wenn sich der Fokus nach unten bewegt
• Das Setzen der nextFocusRight-Requisite auf Pressable 5 führt dazu, dass sich der Fokus auf Pressable 5 bewegt, wenn sich der Fokus nach rechts bewegt

Abschluss

Wenn es um die Fokusverwaltung geht, gibt es keine einheitliche Lösung für React Native TV-Apps. Die Vorgehensweise hängt letztendlich von den spezifischen Bedürfnissen und Anforderungen Ihres Projekts ab. Während React-Native-TVOS nützliche geräteübergreifende Abstraktionen bietet, müssen Sie möglicherweise plattformspezifische Lösungen übernehmen, um häufige Fragmentierungsprobleme auf SmartTV-Plattformen zu lösen.

Nehmen Sie sich die Zeit, diese verschiedenen Fokusmanagementlösungen zu erkunden, damit Sie Ihren Benutzern ein intuitives Fokusmanagementerlebnis bieten können, unabhängig von der SmartTV-Plattform, die sie verwenden.

Verwandte Ressourcen

• 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