façons de gérer la concentration dans React Native

Quand il s'agit de gérer la gestion de la concentration dans les applications React Native pour TV, les développeurs peuvent se retrouver à traverser cinq étapes (de deuil) familières : ? ? ? ? ?

La gestion des focus est un défi unique dans le développement d'applications TV, en raison de la fragmentation entre les plates-formes TV qui a conduit à une variété de techniques de gestion des focus. Les développeurs ont été contraints de créer et d'adopter plusieurs stratégies pour gérer le focus, jonglant souvent avec des solutions spécifiques à la plateforme et des abstractions multiplateformes. Le défi du focus n’est pas seulement de garantir que le focus est géré correctement, mais aussi de gérer les différences entre les plateformes. Android TV et tvOS d'Apple ont des moteurs de focus natifs distincts sur lesquels vous pouvez en savoir plus dans cet article rédigé par mon collègue @hellonehha.

À l'origine, les documents et API spécifiques à la télévision faisaient partie de la documentation principale de React Native. Désormais, la plupart des contenus spécifiques à la télévision ont été déplacés vers le projet React-Native-TVOS.

réagir-native-tvos

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

Le projet React-native-tvos est un package open source qui fournit des ajouts et des extensions au framework principal React Native, avec un accent spécifique sur la prise en charge des plates-formes Apple TV et Android TV. La plupart des changements de ce projet sont centrés sur la gestion de la navigation basée sur la mise au point sur une SmartTV à l'aide du D-Pad de la télécommande. Le projet est maintenu par (l'incroyable !) Doug Lowder et est généralement recommandé comme principal moyen de gérer la gestion du focus dans les applications React Native TV.

Cependant, comme de nombreux projets maintenus par la communauté, le projet react-native-tvos a évolué en fonction des besoins des développeurs, et il existe désormais plusieurs façons de gérer le focus. Explorons les composants supplémentaires et les améliorations des composants existants fournis par React-native-tvos :

1. TVFocusGuideView

TVFocusGuideView prend en charge l'API UIFocusGuide d'Apple et est implémenté de la même manière pour Android TV, pour garantir que les commandes focalisables peuvent être consultées, même si elles ne sont pas directement alignées avec d'autres commandes - Selon React-Native-Tvos.

Par exemple, voici une grille de 10 composants Pressable rendus à l'intérieur d'un composant TVFocusGuideView :

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 accepte quelques accessoires qui vous aident à gérer la mise au point :

accessoire de destination

<TVFocusGuideView destinations={[]}>

Avec TVFocusGuideView, vous pouvez définir un ensemble de composants à enregistrer en tant que « destinations » de TVFocusGuideView. Regardons notre exemple :

• Définir l'accessoire de destinations comme étant une référence à l'élément 8 (destinations={[item8Ref.current]}) provoque le déplacement du focus vers l'élément 8 lorsque nous naviguons initialement vers TVFocusGuideView.

accessoire trapFocus

<TVFocusGuideView trapFocusUp|trapFocusDown|trapFocusLeft|trapFocusRight  />

Cet accessoire garantit que le focus ne s'échappe pas du composant parent pour les directions données. Cet accessoire garantit que le focus ne s'échappe pas du composant parent pour les directions données. Regardons notre exemple :

• Avec la prop trapFocusLeft, vous ne pouvez plus naviguer à gauche hors du conteneur

accessoire de mise au point automatique

 <TVFocusGuideView autoFocus />

Lorsque la mise au point automatique est définie sur vrai, TVFocusGuideView gérera la mise au point pour vous en redirigeant la mise au point vers le premier enfant pouvant être focalisé. Il mémorise également le dernier enfant ciblé et redirige l'attention vers lui lors des visites ultérieures. Si cette prop est utilisée avec la prop destinations, le composant défini par la prop destinations sera prioritaire. Regardons notre exemple :

• Sans cet accessoire, lorsque nous sommes passés du composant Header au focus TVFocusGuideView, nous sommes allés au composant le plus proche - élément 3 (selon le moteur de focus intégré basé sur la proximité d'Android)
• Avec l'accessoire de mise au point automatique, cela va à l'élément 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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!