react-native - React Native - Derectional Pad 支持 Android TV 应用

问题描述

我想使用 React-Native 构建一个 Android TV 应用程序。我已跟进此文档中的建议：为电视设备构建。

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

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

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

反应原生初始化 Dpad
cd 数位板
更新代码基于 - Building For TV Devices
启动 Android TV (720p) API 23 模拟器。
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>
        );
  }
}

标签： react-natived-pad

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

干杯

react-native - React Native - Derectional Pad 支持 Android TV 应用

问题描述

解决方案

推荐阅读