React Native-Derectional Pad支持Android TV应用 [英] React Native - Derectional Pad support Android TV App

问题描述

我想使用React-Native构建一个Android TV应用.我已遵循有关此文档的建议:构建电视设备.

I would want to build an Android TV app using React-Native. I have followed up the recommendation on this document: Building For TV Devices.

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

After, update the AndroidManifest.xml file I run the application using the command line - react-native run android. The app running without any issue; however, I tried to use the Directional-pad option from android emulator TV (720p) API 23 emulator and it didn't work. I was expecting to catch the event listed on the code below and write to the console respective test for each event. On the other hand, even the component that was used for text didn't get highlighted either focus on when I try to navigate using Directional-pad.

我正在与社区联系，以了解过去是否有人遇到过此问题，您的问题是什么以及您为解决该问题所做的工作?另外，当我列出以下步骤时，是否可以让我知道我是否缺少某些东西?

I am reaching out to the community to see if someone had this issue in the past and what was your issue and what you have done to resolve it? Also, as I am listing the steps below, if you could let me know if I missing something?

请告诉我是否需要其他信息以帮助我.

Please, let me know if you need any extra information in order to help me.

1. 本机初始化Dpad
2. cd Dpad
3. 基于-构建用于 电视设备
4. 启动Android TV(720p)API 23模拟器.
5. react-native run-android

1. react-native init Dpad
2. cd Dpad
3. Update code based on - Building For TV Devices
4. Start Android TV (720p) API 23 emulator.
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>
        );
  }
}

推荐答案

我也在这个问题上苦苦挣扎了一个月.仍然找不到帮助/解决方案.
我在Android Studio模拟器和带有真实远程d-pad的少数真实android电视盒上对此进行了测试.
我仍然不知道它是React Native问题(bug)还是Android TV设备没有在方向性d-pad箭头上发出响应(keyCode).
我可以重现事件，例如:聚焦，模糊，选择，fastForward，playPause，快退，但无法获取事件，例如剩下". 我搜索了很多Google和其他网站，您是第一个遇到同样问题的人.
我觉得没有人会关心React-Native中的Android TV.
您还可以在React-Native github页面上评论我的Issue线程.
https://github.com/facebook/react-native/issues/20924
希望我们尽快解决.
干杯

I'm also struggling with this problem for a month. Still can't find help/solution.
I testing this on Android Studio Emulator and also on few real android TV boxes with real remote d-pads.
I still can't figure out if it's React Native problem (bug) or Android TV devices don't emit response (keyCode) on directional d-pad arrows.
I can reproduce events like: focus, blur, select, fastForward, playPause, rewind, but no way to get events like e.g. "left". I search a lot of google and other sites, you are first one who struggling with same issue.
I feel like no one cares about Android TV in React-Native.
You can also comment my Issue thread on React-Native github page.
https://github.com/facebook/react-native/issues/20924
I hope we figure it out soon.
Cheers

这篇关于React Native-Derectional Pad支持Android TV应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！