3

React-Native を使用して Android TV アプリを構築したいと考えています。このドキュメントの推奨事項に従っています: Building For TV Devices。

その後、AndroidManifest.xml ファイルを更新します。コマンド ラインを使用してアプリケーションを実行します - react-native run android. アプリは問題なく実行されています。ただし、Android エミュレーター TV (720p) API 23 エミュレーターから方向パッド オプションを使用しようとしましたが、機能しませんでした。以下のコードにリストされているイベントをキャッチし、各イベントのそれぞれのテストをコンソールに書き込むことを期待していました。一方、テキストに使用されたコンポーネントでさえ、方向パッドを使用してナビゲートしようとすると強調表示されませんでした。

過去に誰かがこの問題を抱えていたかどうか、あなたの問題は何だったのか、それを解決するために何をしたのかを確認するためにコミュニティに連絡しています。また、以下に手順をリストしていますが、何か不足している場合はお知らせください。

私を助けるために追加情報が必要な場合はお知らせください。

  1. 反応ネイティブ初期化 Dpad
  2. cd 十字キー
  3. 以下に基づいてコードを更新します - Building For TV Devices
  4. Android TV (720p) API 23 エミュレーターを起動します。
  5. 反応ネイティブ実行アンドロイド

付録: Android TV (720p) API 23

コードは次のとおりです。

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import Channel from '../channel/channel.component';
import styles from './presentation.component.styles';

var TVEventHandler = require('TVEventHandler');

export default class Grid extends Component {
    constructor(props){
      super(props);
      this.state = {
         command: 'undefined'
      }
    }

    setcomand( command) {
      this.setState( () => { return { command: command }; });
    }

    _tvEventHandler: null;
    _enableTVEventHandler() {
        this._tvEventHandler = new TVEventHandler();
        this._tvEventHandler.enable(this, function(cmp, evt) {
          if (evt && evt.eventType === 'right') {
            setcomand('Press Right!');
          } else if(evt && evt.eventType === 'up') {
            setcomand('Press Up!');
          } else if(evt && evt.eventType === 'left') {
            setcomand('Press Left!');
          } else if(evt && evt.eventType === 'down') {
            setcomand('Press Down!');
          } 
        });
    }  

    _disableTVEventHandler() {
        if (this._tvEventHandler) {
          this._tvEventHandler.disable();
          delete this._tvEventHandler;
        }
    }

    componentDidMount() {
        this._enableTVEventHandler();
        console.warn("component did mount");
      }

      componentWillUnmount() {
        this._disableTVEventHandler();
        console.warn("component Will Unmount");
      }

    render() {
        return (
        <View style={styles.container}>
            <Text>{this.state.command}</Text>
            <Channel name="Globo" description="Its brazilian TV channles for news"/>
            <Channel name="TVI" description="Its Portuguese TV channles for news"/>
            <Channel name="TVI" description="Its Portuguese TV channles for news"/>
        </View>
        );
  }
}
4

8 に答える 8

1

Directional-pad が react-native で動作することを確認できませんでした。それがこのデモの私の目標でした。私は反応ネイティブを使用してAndroid TVを構築することを学んでおり、これまでのところ方向パッドは、TVユーザーがタッチスクリーンイベントを使用しないことを考えると大きな課題です。

ただし、アプリが方向パッド キーボード (左、右、上下) に応答しない理由がわかりませんでした。コードエラーはありませんでした。

反応ネイティブアプリでナビゲートするために方向パッドを使用しようとしましたか?

ありがとうございました、

于 2018-09-14T01:18:25.377 に答える