React Native - Derectional Pad 支持 Android TV 应用

Question

我想使用 React-Native 构建一个 Android TV 应用。我已跟进此文档的建议：Building For TV Devices。

之后，更新我使用命令行运行应用程序的 AndroidManifest.xml 文件 - react-native run android。该应用程序运行没有任何问题；但是，我尝试使用 android emulator TV (720p) API 23 模拟器中的 Directional-pad 选项，但没有成功。我期待捕获下面代码中列出的事件并将每个事件的相应测试写入控制台。另一方面，当我尝试使用 Directional-pad 导航时，即使是用于文本的组件也没有突出显示。

我正在与社区联系，看看过去是否有人遇到过这个问题，你的问题是什么，你为解决这个问题做了什么？另外，正如我在下面列出的步骤，如果我遗漏了什么，你能告诉我吗？

如果您需要任何额外的信息来帮助我，请告诉我。

1. react-native init Dpad
2. cd 方向键
3. 更新代码基于 - Building For TV Devices
4. 启动 Android TV (720p) API 23 模拟器。
5. react-native run-android

附件： 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>
        );
  }
}

Answer 1

我也为这个问题苦苦挣扎了一个月。仍然找不到帮助/解决方案。
我在 Android Studio Emulator 以及一些带有真正远程 d-pad 的真正 android 电视盒上对此进行了测试。
我仍然无法确定是 React Native 问题（错误）还是 Android TV 设备没有在定向 d-pad 箭头上发出响应（keyCode）。
我可以重现事件，例如：焦点、模糊、选择、快进、播放暂停、倒带，但无法获取事件，例如“剩下”。 我搜索了很多谷歌和其他网站，你是第一个遇到同样问题的人。
我觉得没有人关心 React-Native 中的 Android TV。
您还可以在 React-Native github 页面上评论我的问题主题。
https://github.com/facebook/react-native/issues/20924
我希望我们能尽快解决。
干杯

Answer 2

我无法验证 Directional-pad 是否适用于 react-native。这就是我这个演示的目标。我正在学习使用 react-native 构建 android 电视，到目前为止，定向板是一个很大的挑战，因为电视用户不会使用触摸屏事件。

但是，我不知道为什么我的应用没有响应方向键键盘（左、右、上和下）。没有代码错误。

您是否尝试过使用 Directional-pad 在您的 react-native 应用上导航？

谢谢你，

Answer 3

戴夫-

我决定使用 React Native 开发 Android TV 应用程序，因为 react-native 团队分享的视频 - [https://www.youtube.com/watch?v=EzIQErHhY20] 和教程页面 [https://facebook.github.io/react-native/docs/building-for-apple-tv]。我认为这就是我们所拥有的一切；除此之外，我们不会得到进一步的支持。

好消息 - 我使用 react native 版本 0.57.0、node 版本 V10 从头开始​​了一个新项目。 7.not 和 **npm 版本 4.6.1。此外，对于导航，我使用的是 react-navigation 版本 2。我能够看到我的方向键模拟器正在工作，但是，我无法看到我正在导航的元素（左、右、向下，向上）。

我将努力研究如何解决焦点问题。 让我们不断分享我们的进展，并随时与我们联系。

谢谢，

贾斯蒂米亚诺·阿尔维斯

Answer 4

use this code and u can see the console on debugger



_tvEventHandler: any;


_enableTVEventHandler() {
        var self = this;
        this._tvEventHandler = new TVEventHandler();
        this._tvEventHandler.enable(this, function (cmp, evt) {
            console.log("kcubsj"+evt.eventType)
            if (evt && evt.eventType === 'right') {
                console.log('right');
            } else if (evt && evt.eventType === 'up') {
                console.log('up');
            } else if (evt && evt.eventType === 'left') {
                console.log('left');
            } else if (evt && evt.eventType === 'down') {
                console.log('down');
            } else if (evt && evt.eventType === 'select') {
                //self.press();
            }
        });
    }

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

 componentDidMount() {
        this._enableTVEventHandler();
    }

componentWillUnmount() {
        this._disableTVEventHandler();
    }

Answer 5

关于支持 D-Pad 箭头事件（上、下、左、右）的消息非常好。
原来，Android TV 的 react-native 贡献者之一是来自我国的人。我与他联系并讲述了这个问题。他检查了一下，实际上，缺少代码。
他提出了 pull request 以支持 react-native。它应该在即将发布的新版本之一中修复（他说可能需要大约一个月的时间）。
暂时我知道如何处理这个问题（添加代码并重新编译 java 文件），我已经对其进行了测试并且它的工作很好。所有事件现在都在工作。如果您现在真的需要这种支持并且不想等待，我可以分享如何做到这一点。

干杯

Answer 6

是的。我想查看您的解决方案，因为我可以使用方向键进行导航，但看不到要导航到的元素。我需要突出显示或显示对我导航到的元素的关注。

Answer 7

在 TVEventHandler 回调中包含 console.log 似乎会在没有打开远程 js 调试器的情况下运行时破坏它。

Answer 8

我观察到如果没有可聚焦组件，方向键将不起作用。为了解决这个问题，我在我的屏幕上放置了一个透明的可触摸不透明组件。之后 D-pad 开始工作。我的 D-pad 按键事件代码如下：

enableTVEventHandler() {
  this.tvEventHandler = new TVEventHandler();
  this.tvEventHandler.enable(this, (cmp, { eventType, eventKeyAction }) => {

  // eventKeyAction is an integer value representing button press(key down) and release(key up). "key up" is 1, "key down" is 0.

  if (eventType === 'playPause' && eventKeyAction === 0)
  {
    console.log('play pressed')
  }
  else if(eventType === 'fastForward'  && eventKeyAction === 0){
    console.log('forward pressed')
  }
  else if (eventType === 'rewind'  && eventKeyAction === 0){
    console.log('rewind pressed')
  }
  else if (eventType === 'select'  && eventKeyAction === 0)
  {
   console.log('select pressed')
  }else if(eventType === 'left'  && eventKeyAction === 0){
    console.log('left pressed')
  }
  else if(eventType === 'right'  && eventKeyAction === 0){
    console.log('right pressed')
  }
  else if(eventType === 'up' && eventKeyAction === 0){
        console.log('up pressed')
  }
  else if(eventType === 'down' && eventKeyAction === 0){
        console.log('down pressed')
  }
  });  

}