TV アプリの React Native でフォーカス管理を処理することになると、開発者はよく知られた 5 つの（悲しみの）段階を経験することになるかもしれません。 ? ? ? ?

フォーカス管理は、TV プラットフォーム全体の断片化によりさまざまなフォーカス管理手法が導入されているため、TV アプリケーション開発における独特の課題です。開発者は、焦点を管理するために複数の戦略を作成して採用することを余儀なくされており、多くの場合、プラットフォーム固有のソリューションとクロスプラットフォームの抽象化を両立させなければなりません。フォーカスの課題は、フォーカスが正しく処理されることを保証するだけでなく、プラットフォームの違いに対処することです。 Android TV と Apple の tvOS には、独自のネイティブ フォーカス エンジンがあります。詳細については、私の同僚 @hellonehha が書いたこの記事をご覧ください。

元々、TV 固有のドキュメントと API はメインの React Native ドキュメントの一部でした。現在、ほとんどの TV 固有のコンテンツは、react-native-tvos プロジェクトに移動しています。

反応ネイティブtvos

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

react-native-tvos プロジェクトは、Apple TV および Android TV プラットフォームのサポートに特に焦点を当てた、コア React Native フレームワークへの追加と拡張機能を提供するオープンソース パッケージです。このプロジェクトの変更のほとんどは、リモコンの D-Pad を使用した SmartTV でのフォーカスベースのナビゲーションの処理を中心としています。このプロジェクトは (素晴らしい!) Doug Lowder によって管理されており、React Native TV アプリケーションでフォーカス管理を処理する主な方法として一般的に推奨されています。

ただし、コミュニティが管理する多くのプロジェクトと同様、react-native-tvos プロジェクトは開発者のニーズに基づいて進化しており、現在ではフォーカスを処理する方法が複数あります。追加のコンポーネントと、react-native-tvos が提供する既存のコンポーネントの拡張機能を見てみましょう:

1.TVフォーカスガイドビュー

TVFocusGuideView は Apple の UIFocusGuide API のサポートを提供し、Android TV と同じ方法で実装されており、他のコントロールと直接並んでいない場合でも、フォーカス可能なコントロールに確実に移動できるようにします -反応ネイティブtvosによると。

たとえば、TVFocusGuideView コンポーネント内でレンダリングされた 10 個の Pressable コンポーネントのグリッドを次に示します。

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 は、フォーカスの処理に役立ついくつかの小道具を受け入れます:

目的地小道具

TVFocusGuideView を使用すると、TVFocusGuideView の「宛先」として登録するコンポーネントの配列を設定できます。 例を見てみましょう:

• destinations プロパティを項目 8 への参照 (destinations={[item8Ref.current]}) に設定すると、最初に TVFocusGuideView に移動したときにフォーカスが項目 8 に移動します。

トラップフォーカスプロップ

この小道具は、指定された方向に対してフォーカスが親コンポーネントから逃げないことを保証します。このプロパティにより、指定された方向に対してフォーカスが親コンポーネントから逃げないようになります。例を見てみましょう:

• trapFocusLeft プロパティを使用すると、コンテナの外側に移動できなくなります

オートフォーカスプロップ

オートフォーカスが true に設定されている場合、TVFocusGuideView はフォーカスを最初のフォーカス可能な子にリダイレクトすることでフォーカスを管理します。また、最後にフォーカスした子を記憶し、その後の訪問時にフォーカスをその子にリダイレクトします。このプロパティが destinations プロパティと一緒に使用される場合、destinations プロパティによって設定されたコンポーネントが優先されます。例を見てみましょう:

• このプロパティがないと、Header コンポーネントから TVFocusGuideView に移動したときに、フォーカスが最も近いコンポーネント - 項目 3 に移動しました (Android の近接ベースの組み込みフォーカス エンジンによる)
• オートフォーカス小道具を使用すると項目 1 に進みます

2.タッチ可能

react-native-tvos を使用すると、Touchable コンポーネント (TouchableWithoutFeedback、TouchableHighlight、TouchableOpacity) に、フォーカスの変更を検出し、フォーカスされたときにコンポーネントのスタイルを適切に設定するための追加コードが含まれます。また、ユーザーがテレビのリモコンを使用して Touchable ビューを操作するときに、適切なアクションが確実にトリガーされるようにします。

具体的には、Touchable ビューがフォーカスを取得したときに onFocus イベントが発生し、ビューがフォーカスを失ったときに onBlur イベントが発生します。これにより、コンポーネントがコア React Native ではそのままでは提供されないフォーカス状態にあるときに、独自のスタイルやロジックを適用できるようになります。

さらに、ユーザーが TV リモコンの「選択」ボタン (Apple TV リモコンの中央ボタンまたは Android TV D-Pad の中央ボタン) を押して Touchable を選択したときにトリガーされるように、onPress メソッドが変更されました。 )、「選択」ボタンを一定時間押し続けると、onLongPress イベントが 2 回実行されます。

3. プレス可能

Touchable と同様に、Pressable コンポーネントも強化され、onFocus および onBlur プロパティを受け入れられるようになりました。
ユーザーがタッチスクリーン上のコンポーネントを押したときにトリガーされる「押された」状態と同様に、react-native-tvos Pressable コンポーネントは、コンポーネントが TV 画面上でフォーカスされたときに true になるフォーカスされた状態を導入します。

これは、React Native コアの Pressable および Touchable コンポーネントを使用し、onFocus および onBlur プロパティを受け入れまたは実行しない場合の例です:

react-native-tvos の同じ Pressable コンポーネントと Touchable コンポーネントを使用して、onFocus プロパティと onBlur プロパティを受け入れて実行します。

4. hasTVPreferredFocus プロパティ

一部の React Native コンポーネントには、フォーカスの優先順位付けに役立つ hasTVPreferredFocus プロパティがあります。 true に設定すると、hasTVPreferredFocus はその要素にフォーカスを強制します。 React Native のドキュメントによると、これらは prop:

ただし、react-native-tvOS を使用している場合は、このプロパティを受け入れるコンポーネントがさらに多くなります:

例を見てみましょう:

• Pressable 2 の hasTVPreferredFocus プロパティを true に設定すると、Pressable 2 にフォーカスが置かれます
• Pressable 3 のときに true に変更すると、フォーカスが Pressable 3 に移動します

5. nextFocusDirection 小道具

nextFocusDirection プロパティは、ユーザーが指定された方向に移動したときにフォーカスを受け取る次のコンポーネントを指定し、フォーカス ナビゲーションの処理に役立ちます。 React-native-tvos を使用する場合、このプロパティは hasTVPreferredFocus プロパティ (View、TouchableHighlight、Presable、TouchableOpacity、TextInput、TVFocusGuideView、TouchableNativeFeedback、Button) を受け入れるのと同じコンポーネントによって受け入れられます。例を見てみましょう:

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

• nextFocusDown プロパティを Pressable 3 に設定すると、フォーカスが下に移動したときにフォーカスが Pressable 3 に移動します
• nextFocusRight プロパティを Pressable 5 に設定すると、フォーカスが右に移動したときにフォーカスが Pressable 5 に移動します

結論

フォーカス管理の処理に関しては、React Native TV アプリに万能のソリューションはありません。このアプローチは最終的にはプロジェクトの特定のニーズと要件によって異なります。 React-native-tvos は便利なクロスデバイス抽象化を提供しますが、SmartTV プラットフォーム全体でよくある断片化の問題を処理するには、プラットフォーム固有のソリューションを採用する必要がある場合があります。

時間をかけてこれらのさまざまなフォーカス管理ソリューションを検討して、ユーザーが使用している SmartTV プラットフォームに関係なく、直感的なフォーカス処理エクスペリエンスをユーザーに提供できるようにします。

関連リソース

• 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