Möglichkeiten zur Fokusverwaltung in React Native

Wenn es um die Handhabung des Fokusmanagements 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 häufig plattformspezifische Lösungen mit plattformübergreifenden Abstraktionen jonglierten. 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 fernsehspezifischen 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 wurde:

import { TVFocusGuideView } from 'react-native';

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

  const renderGridItem = number => (
    <Pressable
      style={[styles.gridItem, focusedItem === number && styles.focusedItem]}
      key={number}
      onFocus={() => setFocusedItem(number)}
      onBlur={() => setFocusedItem(null)}>
      <Text style={styles.gridItemText}>{number}</Text>
    </Pressable>
  );

  return (
    <>
      <Header headerText="Movies" />
      <TVFocusGuideView trapFocusLeft style={styles.grid}>
        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(num => renderGridItem(num))}
      </TVFocusGuideView>
    </>
  );
};

TVFocusGuideView akzeptiert einige Requisiten, die Ihnen beim Fokussieren helfen:

Reiseziele prop

<TVFocusGuideView destinations={[]}>

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

<TVFocusGuideView trapFocusUp|trapFocusDown|trapFocusLeft|trapFocusRight  />

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

 <TVFocusGuideView autoFocus />

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. Touchable

With the react-native-tvos, the Touchable component's ( TouchableWithoutFeedback, TouchableHighlight and TouchableOpacity) include additional code to detect focus changes and properly style the components when focused. It also ensures that the appropriate actions are triggered when the user interacts with the Touchable views using the TV remote control.

Specifically, the onFocus event is fired when the Touchable view gains focus, and the onBlur event is fired when the view loses focus. This enables you to apply unique styling or logic when the component is in the focused state that doesn’t come out of the box with core React Native.

Additionally the onPress method has been modified to be triggered when the user selects the Touchable by pressing the "select" button on the TV remote (the center button on the Apple TV remote or the center button on the Android TV D-Pad) and the onLongPress event is executed twice when the "select" button is held down for a certain duration.

3. Pressable

Like Touchable, the Pressable component been enhanced to allow it to accept the onFocus and onBlur props.
Similar to the ‘pressed’ state that is triggered when a user presses the component on a touchscreen, the react-native-tvos Pressable component introduces a focused state that becomes true when the component is focused on the TV screen.

Here’s an example when using the Pressable and Touchable components from React Native core and they do not accept / execute the onFocus and onBlur props:

Using the same Pressable and Touchable components from react-native-tvos they accept and execute the onFocus and onBlur props:

4. hasTVPreferredFocus prop

Some React Native components have the hasTVPreferredFocus prop, which helps you prioritise focus. If set to true, hasTVPreferredFocus will force the focus to that element. According to the React Native docs these are the current components that accept the prop:

However, if you are using react-native-tvOS, there are a lot more components that accept this prop:

<View hasTVPreferredFocus />
<Pressable hasTVPreferredFocus />
<TouchableHighlight hasTVPreferredFocus />
<TouchableOpacity hasTVPreferredFocus />
<TextInput hasTVPreferredFocus />
<Button hasTVPreferredFocus />
<TVFocusGuideView hasTVPreferredFocus />
<TouchableNativeFeedback hasTVPreferredFocus />
<TVTextScrollView hasTVPreferredFocus />
<TouchableWithoutFeedback hasTVPreferredFocus />

Lets look at an example:

• Setting the hasTVPreferredFocus prop to true for Pressable 2 causes focus be on Pressable 2
• Changing it to be true when we are on Pressable 3 causes focus to move to Pressable 3

5. nextFocusDirection prop

The nextFocusDirection prop designates the next Component to receive focus when the user navigates in the specified direction helping you handle focus navigation. When using react-native-tvos, this prop is accepted by the same components that accept the hasTVPreferredFocus prop (View, TouchableHighlight, Pressable, TouchableOpacity, TextInput, TVFocusGuideView, TouchableNativeFeedback, Button). Lets look at an example:

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

• Setting the nextFocusDown prop to Pressable 3 causes focus to move to Pressable 3 when the focus moves down
• Setting the nextFocusRight prop to Pressable 5 causes focus to move to Pressable 5 when the focus moves right

Conclusion

When it comes to handling focus management, there is no one-size-fits-all solution for React Native TV apps. The approach ultimately depends on the specific needs and requirements of your project. While the react-native-tvos provides a useful cross-device abstractions, you may have to adopt platform-specific solutions to handle common fragmentation issues across SmartTV platforms.

Take the time to explore these various focus management solutions so that you can deliver an intuitive focus handling experience for your users, regardless of the SmartTV platform they are using.

Related resources

• 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

Das obige ist der detaillierte Inhalt vonMöglichkeiten zur Fokusverwaltung in React Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!