首頁 > web前端 > js教程 > React Native 中管理焦點的方法

React Native 中管理焦點的方法

WBOY
發布: 2024-09-12 10:31:32
原創
402 人瀏覽過

When it comes to handling Focus Management in React Native for TV apps, developers may find themselves going through five familiar stages (of grief): ? ? ? ? ?

Focus management is a unique challenge in TV application development, due to the fragmentation across TV platforms that has led to a variety of focus management techniques. Developers have been forced to create and adopt multiple strategies for managing focus, often juggling platform-specific solutions alongside cross-platform abstractions. The challenge of focus is not only ensuring that focus is handled correctly but handling the platform differences. Android TV and Apple's tvOS have distinct native focus engines which you can read more about in this article written by my colleague @hellonehha.

ays Of Managing Focus In React Native

Originally, TV-specific docs and APIs were part of the main React Native documentation. Now, most TV-specific content has moved to the react-native-tvos project.

ays Of Managing Focus In React Native

react-native-tvos

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

The react-native-tvos project is an open source package that provides additions and extensions to the core React Native framework, with a specific focus on supporting Apple TV and Android TV platforms. Most of the changes in this project are centered around handling focus-based navigation on a SmartTV using the D-Pad on the remote control. The project is maintained by (the incredible!) Doug Lowder and is commonly recommended as the primary way to handle focus management in React Native TV applications.

However, like many community-maintained projects, the react-native-tvos project has evolved based on the needs of developers, and there are now an multiple ways to handle focus. Lets explore the additional components and enhancements to existing components that react-native-tvos provides:

1. TVFocusGuideView

TVFocusGuideView provides support for Apple's UIFocusGuide API and is implemented in the same way for Android TV, to help ensure that focusable controls can be navigated to, even if they are not directly in line with other controls - As per react-native-tvos.

For example, here’s a grid of 10 Pressable components rendered inside a TVFocusGuideView component:

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>
    </>
  );
};
登入後複製

ays Of Managing Focus In React Native

TVFocusGuideView accepts a few props that help you handle focus:

destinations prop

<TVFocusGuideView destinations={[]}>
登入後複製

With TVFocusGuideView you can set an array of components to register as ‘destinations’ of the TVFocusGuideView. Lets look at our example:

  • Setting the destinations prop to be a Ref to item 8 (destinations={[item8Ref.current]}) causes the focus to move to item 8 when we initially navigate to the TVFocusGuideView.

ays Of Managing Focus In React Native

trapFocus prop

<TVFocusGuideView trapFocusUp|trapFocusDown|trapFocusLeft|trapFocusRight  />
登入後複製

This prop ensures focus does not escape from the parent component for the given directions. This prop ensures focus does not escape from the parent component for the given directions. Lets look at our example:

  • With the trapFocusLeft prop you can no longer navigate Left out of the container

ays Of Managing Focus In React Native

autofocus prop

 <TVFocusGuideView autoFocus />
登入後複製

When autofocus is set to true, the TVFocusGuideView will manage focus for you by redirecting the focus to the first focusable child. It also remembers the last focused child and redirects the focus to it on the subsequent visits. If this prop is used with the destinations prop, the component set by the destinations prop will take precedence. Lets look at our example:

  • Without this prop when we moved from the Header component to the TVFocusGuideView focus went to the nearest component - item 3 (as per Androids proximity based built-in focus engine)
  • With the autofocus prop it goes to item 1

ays Of Managing Focus In React Native

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:

ays Of Managing Focus In React Native

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

ays Of Managing Focus In React Native

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:

ays Of Managing Focus In React Native

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

ays Of Managing Focus In React Native

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

ays Of Managing Focus In React Native

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

以上是React Native 中管理焦點的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板