React Native-Derectional Pad支持Android电视应用程序

Question

我想使用React Native构建一个Android电视应用程序。我遵循了这份文件中的建议：电视设备建筑。

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

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

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

1. react native init Dpad
2. cd Dpad
3. 基于-Building更新代码电视设备
4. 启动Android电视(720p)API 23模拟器
5. react原生运行android

附件：安卓电视(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问题(bug)还是安卓电视设备没有在方向d-pad箭头上发出响应(keyCode)
我可以再现事件，如：聚焦、模糊、选择、快进、播放暂停、倒带，但无法获得事件，如"左"。我搜索了很多谷歌和其他网站，你们是第一个遇到同样问题的人
我觉得没有人关心React Native中的Android电视
您也可以在React Native github页面上评论我的Issue线程
https://github.com/facebook/react-native/issues/20924
我希望我们能尽快解决
干杯

Answer 2

我无法验证Directional pad是否与react native一起工作。这就是我这次演示的目标。我正在学习使用react native和Directional pad构建android电视，到目前为止，这是一个巨大的挑战，因为电视用户不会使用触摸屏事件。

然而，我不知道为什么我的应用程序对定向键盘(左、右、上、下)没有响应。没有代码错误。

你是否尝试过使用定向键盘在你的react原生应用程序上导航？

谢谢你，

Answer 3

Dave-

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

好消息 -我使用react原生版本0.57.0、节点版本V10.7.not和**npm版本4.6.1从头开始了一个新项目。此外，对于导航，我使用的是react导航版本2。我能够看到我的定向板模拟器正在工作，但是，我无法看到我正在导航的元素上的焦点(左、右、下、上)。

我将努力看看如何解决焦点问题。让我们不断分享我们的进步，并随时伸出援手。

谢谢你，

Justimiano Alves

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箭头事件(向上、向下、向左、向右)的好消息
原来react native的安卓电视贡献者之一是来自我国的人。我联系他，告诉他这个问题。他检查了一下，实际上，这里面缺少代码
他在react native中提出了支持该请求的pull请求。它应该在即将发布的新版本中得到修复(他说可能需要大约一个月的时间)
暂时我知道如何处理这个问题(添加代码和重新编译java文件)，我已经测试过了，它的工作也很棒。所有活动现在都在工作。如果你现在真的需要支持，又不想等待，我可以分享如何做到这一点。

干杯

Answer 6

是。我想看看你的解决方案，因为我可以使用D-pad导航，但我看不到我正在导航到哪个元素。我需要突出显示或显示对我导航到的元素的关注。

Answer 7

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

Answer 8

我观察到，如果没有可聚焦的组件，D-pad就无法工作。为了解决这个问题，我在屏幕上放置了一个透明的可触摸不透明度组件。在那之后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')
}
});  

}