ays Menguruskan Fokus Dalam React Native

Mengenai Pengurusan Fokus dalam React Native untuk apl TV, pembangun mungkin mendapati diri mereka melalui lima peringkat biasa (kesedihan): ? ? ? ? ?

Pengurusan fokus ialah cabaran unik dalam pembangunan aplikasi TV, disebabkan oleh pemecahan merentasi platform TV yang telah membawa kepada pelbagai teknik pengurusan fokus. Pembangun telah dipaksa untuk mencipta dan mengguna pakai berbilang strategi untuk mengurus fokus, selalunya menyesuaikan penyelesaian khusus platform bersama abstraksi merentas platform. Cabaran fokus bukan sahaja memastikan fokus dikendalikan dengan betul tetapi mengendalikan perbezaan platform. Android TV dan tvOS Apple mempunyai enjin fokus asli yang berbeza yang boleh anda baca lebih lanjut dalam artikel ini yang ditulis oleh rakan sekerja saya @hellonehha.

Pada asalnya, dokumen dan API khusus TV adalah sebahagian daripada dokumentasi React Native utama. Kini, kebanyakan kandungan khusus TV telah berpindah ke projek react-native-tvos.

react-native-tvos

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

Projek react-native-tvos ialah pakej sumber terbuka yang menyediakan penambahan dan sambungan kepada rangka kerja React Native teras, dengan tumpuan khusus untuk menyokong Apple TV dan platform Android TV. Kebanyakan perubahan dalam projek ini tertumpu pada pengendalian navigasi berasaskan fokus pada SmartTV menggunakan D-Pad pada alat kawalan jauh. Projek ini diselenggara oleh (yang luar biasa!) Doug Lowder dan lazimnya disyorkan sebagai cara utama untuk mengendalikan pengurusan fokus dalam aplikasi React Native TV.

Walau bagaimanapun, seperti kebanyakan projek yang diselenggarakan oleh komuniti, projek react-native-tvos telah berkembang berdasarkan keperluan pembangun dan kini terdapat pelbagai cara untuk mengendalikan fokus. Mari terokai komponen tambahan dan penambahbaikan kepada komponen sedia ada yang disediakan oleh react-native-tvos:

1. TVFocusGuideView

TVFocusGuideView menyediakan sokongan untuk API UIFocusGuide Apple dan dilaksanakan dengan cara yang sama untuk Android TV, untuk membantu memastikan kawalan boleh fokus boleh dilayari, walaupun ia tidak sejajar secara langsung dengan kawalan lain - Mengikut react-native-tvos.

Sebagai contoh, berikut ialah grid 10 komponen Boleh Tekan yang dipaparkan dalam komponen 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 menerima beberapa prop yang membantu anda mengendalikan fokus:

destinasi prop

<TVFocusGuideView destinations={[]}>

Dengan TVFocusGuideView anda boleh menetapkan pelbagai komponen untuk mendaftar sebagai 'destinasi' TVFocusGuideView. Mari lihat contoh kami:

• Menetapkan prop destinasi menjadi Ruj kepada item 8 (destinations={[item8Ref.current]}) menyebabkan fokus beralih ke item 8 apabila kita mula-mula menavigasi ke TVFocusGuideView.

perangkapFokus prop

<TVFocusGuideView trapFocusUp|trapFocusDown|trapFocusLeft|trapFocusRight  />

Prop ini memastikan tumpuan tidak terlepas daripada komponen induk untuk arah yang diberikan. Penyangga ini memastikan tumpuan tidak terlepas daripada komponen induk untuk arahan yang diberikan. Mari lihat contoh kami:

• Dengan prop trapFocusLeft anda tidak lagi boleh menavigasi ke Kiri keluar dari bekas

prop autofokus

 <TVFocusGuideView autoFocus />

Apabila autofokus ditetapkan kepada benar, TVFocusGuideView akan mengurus fokus untuk anda dengan mengubah hala fokus kepada kanak-kanak pertama yang boleh difokuskan. Ia juga mengingati kanak-kanak fokus terakhir dan mengalihkan fokus kepadanya pada lawatan berikutnya. Jika prop ini digunakan dengan prop destinasi, komponen yang ditetapkan oleh prop destinasi akan diutamakan. Mari lihat contoh kami:

• Tanpa prop ini apabila kami beralih daripada komponen Header ke fokus TVFocusGuideView pergi ke komponen terdekat - item 3 (mengikut enjin fokus terbina dalam berasaskan jarak dekat)
• Dengan prop autofokus ia pergi ke item 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

Atas ialah kandungan terperinci ays Menguruskan Fokus Dalam React Native. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!