跳到主要内容
新架构实战课 实操 + 基建 + 原理全维度包揽,抢先掌握 React Native 新架构精髓 立即查看 >Version: 0.71

为电视和机顶盒制作应用

目前的 React Native 应用只需在 JavaScript 端简单修改甚至无需修改,在电视和机顶盒设备上就基本可用了。

编译修改

  • 原生端: 在 Android TV 上运行 React Native 项目请先在AndroidManifest.xml中加入下列配置:
  <!-- 加入自定义的banner图作为TV设备上的图标 -->
<application
...
android:banner="@drawable/tv_banner"
>
...
<intent-filter>
...
<!-- Needed to properly create a launch intent when running on Android TV -->
<category android:name="android.intent.category.LEANBACK_LAUNCHER"/>
</intent-filter>
...
</application>
  • JavaScript 端: 对于电视设备的检测代码已经加入到了Platform模块中。你可以使用下面的代码来检测当前运行设备是否是电视设备:
import { Platform } from 'react-native';
const running_on_tv = Platform.isTV;

代码修改

  • 访问可点击的控件:在Android TV上运行时,Android 框架将根据视图中可聚焦元素的相对位置自动应用定向导航方案。Touchable系列组件添加了检测焦点变化的代码,并使用现有方法正确设置组件的样式,以及在使用电视遥控器选择视图时启动正确的操作,因此TouchableWithoutFeedbackTouchableHighlightTouchableOpacityTouchableNativeFeedback将按预期工作。特别地:

    • onFocus会在可触摸视图成为焦点时执行
    • onBlur会在可触摸视图失去焦点时执行
    • onPress会在按下电视遥控器上的“选择”按钮实际选择可触摸视图时执行。
  • 电视遥控器/键盘输入:一个新的原生类ReactAndroidTVRootViewHelper为电视遥控器事件设置按键事件处理程序。 当电视遥控器事件发生时,该类会触发一个 JS 事件。此事件将由TVEventHandler JavaScript 对象的实例获取。需要实现自定义处理电视遥控器事件的应用程序代码可以创建一个TVEventHandler的实例并监听这些事件,如下代码所示:

const TVEventHandler = require('TVEventHandler');

class Game2048 extends React.Component {
_tvEventHandler: any;

_enableTVEventHandler() {
this._tvEventHandler = new TVEventHandler();
this._tvEventHandler.enable(this, function(cmp, evt) {
if (evt && evt.eventType === 'right') {
cmp.setState({board: cmp.state.board.move(2)});
} else if(evt && evt.eventType === 'up') {
cmp.setState({board: cmp.state.board.move(1)});
} else if(evt && evt.eventType === 'left') {
cmp.setState({board: cmp.state.board.move(0)});
} else if(evt && evt.eventType === 'down') {
cmp.setState({board: cmp.state.board.move(3)});
} else if(evt && evt.eventType === 'playPause') {
cmp.restartGame();
}
});
}

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

componentDidMount() {
this._enableTVEventHandler();
}

componentWillUnmount() {
this._disableTVEventHandler();
}
  • 开发者菜单支持:在模拟器上,cmd-M 会调出开发者菜单,类似于安卓。要在实际的 Android TV 设备上启动它,请按菜单按钮或长按遥控器上的快进按钮。(请不要摇晃 Android TV 设备,这将不起作用 :) )

  • 已知问题: