为电视和机顶盒制作应用
目前的 React Native 应用只需在 JavaScript 端简单修改甚至无需修改,在电视和机顶盒设备上就基本可用了。
- Android TV
- 🚧 tvOS
已过时。 TV 平台的支持已迁移到社区维护的 React Native for TV 项目。
编译修改
- 原生端: 在 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 设备,这将不起作用 :) )
-
已知问题:
TextInput
组件不能获得焦点,请参考这里讨论的临时解决方案。
已过时。 请使用react-native-tvos代替。
编译变更
-
原生端: React Native 生成的 Xcode 项目现都已包含 Apple TV 编译目标,其名字都带有'-tvOS'后缀。
-
react-native init: 使用
react-native init
命令创建的新项目会自动在 Xcode 新项目中包含 Apple TV 编译目标。 -
JavaScript 端: 对于电视设备的检测代码已经加入到了
Platform
模块中。你可以使用下面的代码来检测当前运行设备是否是电视设备:
import { Platform } from 'react-native';
const running_on_tv = Platform.isTV;
// 如果你想更精确地针对tvOS设备(即排除Android设备),
// 那么可以使用下面的代码:
const running_on_apple_tv = Platform.isTVOS;
代码修改
-
General support for tvOS: Apple TV specific changes in native code are all wrapped by the TARGET_OS_TV define. These include changes to suppress APIs that are not supported on tvOS (e.g. web views, sliders, switches, status bar, etc.), and changes to support user input from the TV remote or keyboard.
-
Common codebase: Since tvOS and iOS share most Objective-C and JavaScript code in common, most documentation for iOS applies equally to tvOS.
-
访问可点击的控件: When running on Apple TV, the native view class is
RCTTVView
, which has additional methods to make use of the tvOS focus engine. TheTouchable
mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, soTouchableWithoutFeedback
,TouchableHighlight
andTouchableOpacity
will work as expected. In particular:onFocus
will be executed when the touchable view goes into focusonBlur
will be executed when the touchable view goes out of focusonPress
will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote.
-
TV remote/keyboard input: A new native class,
RCTTVRemoteHandler
, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up byRCTTVNavigationEventEmitter
(a subclass ofRCTEventEmitter
), that fires a JS event. This event will be picked up by instances of theTVEventHandler
JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance ofTVEventHandler
and listen for these events, as in the following code:
var 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();
}
}
-
Dev Menu support: On the simulator, cmd-D will bring up the developer menu, similar to iOS. To bring it up on a real Apple TV device, make a long press on the play/pause button on the remote. (Please do not shake the Apple TV device, that will not work :) )
-
TV remote animations:
RCTTVView
native code implements Apple-recommended parallax animations to help guide the eye as the user navigates through views. The animations can be disabled or adjusted with new optional view properties. -
Back navigation with the TV remote menu button: The
BackHandler
component, originally written to support the Android back button, now also supports back navigation on the Apple TV using the menu button on the TV remote.