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

为电视和机顶盒制作应用

目前的 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系列组件添加了检测焦点变化的代码，并使用现有方法正确设置组件的样式，以及在使用电视遥控器选择视图时启动正确的操作，因此TouchableWithoutFeedback、TouchableHighlight、TouchableOpacity和TouchableNativeFeedback将按预期工作。特别地：

    • 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 设备，这将不起作用 :) ）

  • 已知问题: