Я бы хотел создать приложение для Android TV, используя React-Native. Я выполнил рекомендацию по этому документу: Здание для телевизионных устройств .
После обновления файла AndroidManifest.xml я запускаю приложение с помощью командной строки - response-native run android. Приложение работает без проблем; Тем не менее, я попытался использовать опцию Directional-pad из эмулятора андроида TV (720p) API 23, и это не сработало. Я ожидал отловить событие, указанное в приведенном ниже коде, и записать в консоль соответствующий тест для каждого события. С другой стороны, даже компонент, который использовался для текста, не выделялся и не фокусировался, когда я пытался перемещаться с использованием Directional-pad.
Я обращаюсь к сообществу, чтобы узнать, была ли у кого-то эта проблема в прошлом, и какова была ваша проблема и что вы сделали для ее решения? Кроме того, поскольку я перечисляю шаги ниже, не могли бы вы сообщить мне, если я что-то упустил?
Пожалуйста, дайте мне знать, если вам нужна дополнительная информация, чтобы помочь мне.
- реактивный род init Dpad
- CD Dpad
- Обновление кода на основе - Построение для
Телевизионные устройства
- Запустите Android TV (720p) API 23 эмулятор.
- реакция-нативный 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>
);
}
}