Building For Apple TV

需要本机代码的项目

此页面仅适用于react-native init使用Create React Native App 制作的或使用此类应用程序弹出的项目。有关弹出的更多信息，请参阅创建React Native App存储库的指南。

Apple TV support has been implemented with the intention of making existing React Native iOS applications "just work" on tvOS, with few or no changes needed in the JavaScript code for the applications.

RNTester应用程序支持Apple TV; 使用RNTester-tvOS构建目标为tvOS构建。

构建更改

本地层：React Native Xcode项目现在都具有Apple TV构建目标，名称以字符串'-tvOS'结尾。

react-native init：新创建的React Native项目react-native init将在其XCode项目中自动创建Apple TV目标。

JavaScript层：已添加对Apple TV的支持Platform.ios.js。你可以通过检查代码是否在AppleTV上运行

var Platform = require('Platform');
var running_on_apple_tv = Platform.isTVOS;

代码更改

对tvOS的一般支持：本地代码中的Apple TV特定更改全部由TARGET_OS_TV定义包装。其中包括禁止在tvOS上不支持的API的更改（例如，网络浏览，滑块，开关，状态栏等），以及支持来自电视遥控器或键盘的用户输入的更改。

通用代码库：由于tvOS和iOS共享大多数Objective-C和JavaScript代码，所以iOS的大多数文档同样适用于tvOS。

访问可触控的控件：在Apple TV上运行时，本地视图类RCTTVView具有使用tvOS焦点引擎的其他方法。该Touchable混入了代码添加到检测的焦点变化，并使用现有的方法来正确样式组件，并启动适当的行动时，使用电视机遥控器选择视图，因此TouchableHighlight而TouchableOpacity将“只是工作”。尤其是：

-  `touchableHandleActivePressIn` will be executed when the touchable view goes into focus
-  `touchableHandleActivePressOut` will be executed when the touchable view goes out of focus
-  `touchableHandlePress` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote.

电视遥控器/键盘输入：一个新的本地类RCTTVRemoteHandler，设置电视遥控事件的手势识别器。当电视远程事件发生时，这个类会触发由RCTTVNavigationEventEmitter（的一个子类RCTEventEmitter）拾取的，触发JS事件的通知。该事件将由TVEventHandlerJavaScript对象的实例拾取。需要实现自定义电视远程事件处理的应用程序代码可以创建一个实例TVEventHandler并监听这些事件，如下面的代码所示：var TVEventHandler = require（'TVEventHandler'）; 。。。Game2048扩展了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 ==='左'）{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（）; 删除this._tvEventHandler; }} componentDidMount（）{this._enableTVEventHandler（）; } componentWillUnmount（）{this._disableTVEventHandler（）;} }

开发菜单支持：在模拟器上，cmd-D将调出开发者菜单，就像在iOS上一样。要在真正的Apple TV设备上显示它，请长按遥控器上的播放/暂停按钮。（请不要摇晃Apple TV设备，这将无法正常工作:)）

电视遥控动画：RCTTVView本地代码实现Apple推荐的视差动画，以便在用户浏览视图时帮助引导观众。可以使用新的可选视图属性禁用或调整动画。

使用电视机遥控菜单按钮返回导航：BackHandler最初编写用于支持Android后退按钮的组件现在还支持使用电视遥控器上的菜单按钮在Apple TV上进行后退导航。

TabBarIOS行为：TabBarIOS组件包装原生UITabBarAPI，它在Apple TV上的工作方式不同。为了避免tvOS中标签栏的抖动重新渲染（请参阅此问题），所选标签栏项目只能在初始渲染时从Javascript设置，并由用户通过本机代码进行控制。

已知问题：

-  [ListView scrolling](https://github.com/facebook/react-native/issues/12793). The issue can be easily worked around by setting `removeClippedSubviews` to false in ListView and similar components. For more discussion of this issue, see [this PR](https://github.com/facebook/react-native/pull/12944).

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18