mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
59 lines
33 KiB
HTML
59 lines
33 KiB
HTML
<!DOCTYPE html><html><head><title>Building For Apple TV</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"><meta property="fb:app_id" content="1677033832619985"><meta property="fb:admins" content="121800083"><meta property="og:site_name" content="React Native"><meta property="og:title" content="Building For Apple TV"><meta property="og:url" content="https://facebook.github.io/react-native/index.html"><meta property="og:image" content="https://facebook.github.io/react-native/img/opengraph.png"><meta property="og:description" content="A framework for building native apps using React"><meta name="twitter:site" content="@reactnative"><meta name="twitter:card" content="summary_large_image"><meta property="og:type" content="website"><base href="/react-native/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><link rel="stylesheet" href="css/prism.css"><link rel="alternate" type="application/rss+xml" title="React Native Blog" href="https://facebook.github.io/react-native/blog/feed.xml"><link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">0.46</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="/react-native/support.html" class="">Help</a></li><li><a href="/react-native/showcase.html" class="">Showcase</a></li><li><a href="/react-native/blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>The Basics</h3><ul><li><a style="margin-left:10px;" class="" href="docs/getting-started.html">Getting Started</a></li><li><a style="margin-left:10px;" class="" href="docs/tutorial.html">Tutorial</a></li><li><a style="margin-left:10px;" class="" href="docs/props.html">Props</a></li><li><a style="margin-left:10px;" class="" href="docs/state.html">State</a></li><li><a style="margin-left:10px;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:10px;" class="" href="docs/height-and-width.html">Height and Width</a></li><li><a style="margin-left:10px;" class="" href="docs/flexbox.html">Layout with Flexbox</a></li><li><a style="margin-left:10px;" class="" href="docs/handling-text-input.html">Handling Text Input</a></li><li><a style="margin-left:10px;" class="" href="docs/handling-touches.html">Handling Touches</a></li><li><a style="margin-left:10px;" class="" href="docs/using-a-scrollview.html">Using a ScrollView</a></li><li><a style="margin-left:10px;" class="" href="docs/using-a-listview.html">Using List Views</a></li><li><a style="margin-left:10px;" class="" href="docs/network.html">Networking</a></li><li><a style="margin-left:10px;" class="" href="docs/more-resources.html">More Resources</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:10px;" class="" href="docs/components-and-apis.html">Components and APIs</a></li><li><a style="margin-left:10px;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li><li><a style="margin-left:10px;" class="" href="docs/navigation.html">Navigating Between Screens</a></li><li><a style="margin-left:10px;" class="" href="docs/images.html">Images</a></li><li><a style="margin-left:10px;" class="" href="docs/animations.html">Animations</a></li><li><a style="margin-left:10px;" class="" href="docs/accessibility.html">Accessibility</a></li><li><a style="margin-left:10px;" class="" href="docs/timers.html">Timers</a></li><li><a style="margin-left:10px;" class="" href="docs/debugging.html">Debugging</a></li><li><a style="margin-left:10px;" class="" href="docs/performance.html">Performance</a></li><li><a style="margin-left:10px;" class="" href="docs/gesture-responder-system.html">Gesture Responder System</a></li><li><a style="margin-left:10px;" class="" href="docs/javascript-environment.html">JavaScript Environment</a></li><li><a style="margin-left:10px;" class="" href="docs/direct-manipulation.html">Direct Manipulation</a></li><li><a style="margin-left:10px;" class="" href="docs/colors.html">Color Reference</a></li><li><a style="margin-left:10px;" class="" href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a></li><li><a style="margin-left:10px;" class="" href="docs/running-on-device.html">Running On Device</a></li><li><a style="margin-left:10px;" class="" href="docs/upgrading.html">Upgrading to new React Native versions</a></li><li><a style="margin-left:10px;" class="" href="docs/testing.html">Running Tests and Contributing</a></li><li><a style="margin-left:10px;" class="" href="docs/understanding-cli.html">Understanding the CLI</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3><ul><li><a style="margin-left:10px;" class="" href="docs/native-modules-ios.html">Native Modules</a></li><li><a style="margin-left:10px;" class="" href="docs/native-components-ios.html">Native UI Components</a></li><li><a style="margin-left:10px;" class="" href="docs/linking-libraries-ios.html">Linking Libraries</a></li><li><a style="margin-left:10px;" class="" href="docs/running-on-simulator-ios.html">Running On Simulator</a></li><li><a style="margin-left:10px;" class="" href="docs/communication-ios.html">Communication between native and React Native</a></li><li><a style="margin-left:10px;" class="active" href="docs/building-for-apple-tv.html">Building For Apple TV</a></li></ul></div><div class="nav-docs-section"><h3>Guides (Android)</h3><ul><li><a style="margin-left:10px;" class="" href="docs/native-modules-android.html">Native Modules</a></li><li><a style="margin-left:10px;" class="" href="docs/native-components-android.html">Native UI Components</a></li><li><a style="margin-left:10px;" class="" href="docs/headless-js-android.html">Headless JS</a></li><li><a style="margin-left:10px;" class="" href="docs/signed-apk-android.html">Generating Signed APK</a></li><li><a style="margin-left:10px;" class="" href="docs/android-building-from-source.html">Building React Native from source</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:10px;" class="" href="docs/activityindicator.html">ActivityIndicator</a></li><li><a style="margin-left:10px;" class="" href="docs/button.html">Button</a></li><li><a style="margin-left:10px;" class="" href="docs/datepickerios.html">DatePickerIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/drawerlayoutandroid.html">DrawerLayoutAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/flatlist.html">FlatList</a></li><li><a style="margin-left:10px;" class="" href="docs/image.html">Image</a></li><li><a style="margin-left:10px;" class="" href="docs/keyboardavoidingview.html">KeyboardAvoidingView</a></li><li><a style="margin-left:10px;" class="" href="docs/listview.html">ListView</a></li><li><a style="margin-left:10px;" class="" href="docs/modal.html">Modal</a></li><li><a style="margin-left:10px;" class="" href="docs/navigatorios.html">NavigatorIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/picker.html">Picker</a></li><li><a style="margin-left:10px;" class="" href="docs/pickerios.html">PickerIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/progressbarandroid.html">ProgressBarAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/progressviewios.html">ProgressViewIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/refreshcontrol.html">RefreshControl</a></li><li><a style="margin-left:10px;" class="" href="docs/scrollview.html">ScrollView</a></li><li><a style="margin-left:10px;" class="" href="docs/sectionlist.html">SectionList</a></li><li><a style="margin-left:10px;" class="" href="docs/segmentedcontrolios.html">SegmentedControlIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/slider.html">Slider</a></li><li><a style="margin-left:10px;" class="" href="docs/snapshotviewios.html">SnapshotViewIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/statusbar.html">StatusBar</a></li><li><a style="margin-left:10px;" class="" href="docs/switch.html">Switch</a></li><li><a style="margin-left:10px;" class="" href="docs/tabbarios.html">TabBarIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/tabbarios-item.html">TabBarIOS.Item</a></li><li><a style="margin-left:10px;" class="" href="docs/text.html">Text</a></li><li><a style="margin-left:10px;" class="" href="docs/textinput.html">TextInput</a></li><li><a style="margin-left:10px;" class="" href="docs/toolbarandroid.html">ToolbarAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/touchablehighlight.html">TouchableHighlight</a></li><li><a style="margin-left:10px;" class="" href="docs/touchablenativefeedback.html">TouchableNativeFeedback</a></li><li><a style="margin-left:10px;" class="" href="docs/touchableopacity.html">TouchableOpacity</a></li><li><a style="margin-left:10px;" class="" href="docs/touchablewithoutfeedback.html">TouchableWithoutFeedback</a></li><li><a style="margin-left:10px;" class="" href="docs/view.html">View</a></li><li><a style="margin-left:10px;" class="" href="docs/viewpagerandroid.html">ViewPagerAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/virtualizedlist.html">VirtualizedList</a></li><li><a style="margin-left:10px;" class="" href="docs/webview.html">WebView</a></li></ul></div><div class="nav-docs-section"><h3>APIs</h3><ul><li><a style="margin-left:10px;" class="" href="docs/accessibilityinfo.html">AccessibilityInfo</a></li><li><a style="margin-left:10px;" class="" href="docs/actionsheetios.html">ActionSheetIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/adsupportios.html">AdSupportIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/alert.html">Alert</a></li><li><a style="margin-left:10px;" class="" href="docs/alertios.html">AlertIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/animated.html">Animated</a></li><li><a style="margin-left:10px;" class="" href="docs/appregistry.html">AppRegistry</a></li><li><a style="margin-left:10px;" class="" href="docs/appstate.html">AppState</a></li><li><a style="margin-left:10px;" class="" href="docs/asyncstorage.html">AsyncStorage</a></li><li><a style="margin-left:10px;" class="" href="docs/backandroid.html">BackAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/backhandler.html">BackHandler</a></li><li><a style="margin-left:10px;" class="" href="docs/cameraroll.html">CameraRoll</a></li><li><a style="margin-left:10px;" class="" href="docs/clipboard.html">Clipboard</a></li><li><a style="margin-left:10px;" class="" href="docs/datepickerandroid.html">DatePickerAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/dimensions.html">Dimensions</a></li><li><a style="margin-left:10px;" class="" href="docs/easing.html">Easing</a></li><li><a style="margin-left:10px;" class="" href="docs/geolocation.html">Geolocation</a></li><li><a style="margin-left:10px;" class="" href="docs/imageeditor.html">ImageEditor</a></li><li><a style="margin-left:10px;" class="" href="docs/imagepickerios.html">ImagePickerIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/imagestore.html">ImageStore</a></li><li><a style="margin-left:10px;" class="" href="docs/interactionmanager.html">InteractionManager</a></li><li><a style="margin-left:10px;" class="" href="docs/keyboard.html">Keyboard</a></li><li><a style="margin-left:10px;" class="" href="docs/layoutanimation.html">LayoutAnimation</a></li><li><a style="margin-left:10px;" class="" href="docs/linking.html">Linking</a></li><li><a style="margin-left:10px;" class="" href="docs/netinfo.html">NetInfo</a></li><li><a style="margin-left:10px;" class="" href="docs/panresponder.html">PanResponder</a></li><li><a style="margin-left:10px;" class="" href="docs/permissionsandroid.html">PermissionsAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/pixelratio.html">PixelRatio</a></li><li><a style="margin-left:10px;" class="" href="docs/pushnotificationios.html">PushNotificationIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/settings.html">Settings</a></li><li><a style="margin-left:10px;" class="" href="docs/share.html">Share</a></li><li><a style="margin-left:10px;" class="" href="docs/statusbarios.html">StatusBarIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/stylesheet.html">StyleSheet</a></li><li><a style="margin-left:10px;" class="" href="docs/systrace.html">Systrace</a></li><li><a style="margin-left:10px;" class="" href="docs/timepickerandroid.html">TimePickerAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/toastandroid.html">ToastAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/vibration.html">Vibration</a></li><li><a style="margin-left:10px;" class="" href="docs/vibrationios.html">VibrationIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/layout-props.html">Layout Props</a></li><li><a style="margin-left:10px;" class="" href="docs/shadow-props.html">Shadow Props</a></li><li><a style="margin-left:10px;" class="" href="docs/viewproptypes.html">ViewPropTypes</a></li><li><a style="margin-left:10px;" class="" href="docs/viewstyleproptypes.html">ViewStylePropTypes</a></li><li><a style="margin-left:10px;" class="" href="docs/textstyleproptypes.html">TextStylePropTypes</a></li><li><a style="margin-left:10px;" class="" href="docs/imagestyleproptypes.html">ImageStylePropTypes</a></li></ul></div></div></div><div class="inner-content"><a id="content"></a><h1><a class="anchor" name="building-for-apple-tv"></a>Building For Apple TV <a class="hash-link" href="docs/building-for-apple-tv.html#building-for-apple-tv">#</a></h1><div class="banner-crna-ejected"><h3>Project with Native Code Required</h3><p>This page only applies to projects made with <code>react-native init</code> or to those made with Create React Native App which have since ejected. For more information about ejecting, please see the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on the Create React Native App repository.</p></div><div><p>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.</p><p>The RNTester app supports Apple TV; use the <code>RNTester-tvOS</code> build target to build for tvOS.</p><h2><a class="anchor" name="build-changes"></a>Build changes <a class="hash-link" href="docs/building-for-apple-tv.html#build-changes">#</a></h2><ul><li><p><em>Native layer</em>: React Native Xcode projects all now have Apple TV build targets, with names ending in the string '-tvOS'.</p></li><li><p><em>react-native init</em>: New React Native projects created with <code>react-native init</code> will have Apple TV target automatically created in their XCode projects.</p></li><li><p><em>JavaScript layer</em>: Support for Apple TV has been added to <code>Platform.ios.js</code>. You can check whether code is running on AppleTV by doing</p></li></ul><div class="prism language-js"><span class="token keyword">var</span> Platform <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'Platform'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">var</span> running_on_apple_tv <span class="token operator">=</span> Platform<span class="token punctuation">.</span>isTVOS<span class="token punctuation">;</span></div><h2><a class="anchor" name="code-changes"></a>Code changes <a class="hash-link" href="docs/building-for-apple-tv.html#code-changes">#</a></h2><ul><li><p><em>General support for tvOS</em>: 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.</p></li><li><p><em>Common codebase</em>: Since tvOS and iOS share most Objective-C and JavaScript code in common, most documentation for iOS applies equally to tvOS.</p></li><li><p><em>Access to touchable controls</em>: When running on Apple TV, the native view class is <code>RCTTVView</code>, which has additional methods to make use of the tvOS focus engine. The <code>Touchable</code> 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, so <code>TouchableHighlight</code> and <code>TouchableOpacity</code> will "just work". In particular:</p><ul><li><code>touchableHandleActivePressIn</code> will be executed when the touchable view goes into focus</li><li><code>touchableHandleActivePressOut</code> will be executed when the touchable view goes out of focus</li><li><code>touchableHandlePress</code> will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote.</li></ul></li><li><p><em>TV remote/keyboard input</em>: A new native class, <code>RCTTVRemoteHandler</code>, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by <code>RCTTVNavigationEventEmitter</code> (a subclass of <code>RCTEventEmitter</code>), that fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</p></li></ul><div class="prism language-js"><span class="token keyword">var</span> TVEventHandler <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'TVEventHandler'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token punctuation">.</span>
|
|
<span class="token punctuation">.</span>
|
|
<span class="token punctuation">.</span>
|
|
|
|
<span class="token keyword">class</span> <span class="token class-name">Game2048</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
|
_tvEventHandler<span class="token punctuation">:</span> any<span class="token punctuation">;</span>
|
|
|
|
<span class="token function">_enableTVEventHandler</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">this</span><span class="token punctuation">.</span>_tvEventHandler <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">TVEventHandler</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">this</span><span class="token punctuation">.</span>_tvEventHandler<span class="token punctuation">.</span><span class="token function">enable</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>cmp<span class="token punctuation">,</span> evt<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span>evt <span class="token operator">&&</span> evt<span class="token punctuation">.</span>eventType <span class="token operator">===</span> <span class="token string">'right'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
cmp<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>board<span class="token punctuation">:</span> cmp<span class="token punctuation">.</span>state<span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">move</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>evt <span class="token operator">&&</span> evt<span class="token punctuation">.</span>eventType <span class="token operator">===</span> <span class="token string">'up'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
cmp<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>board<span class="token punctuation">:</span> cmp<span class="token punctuation">.</span>state<span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">move</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>evt <span class="token operator">&&</span> evt<span class="token punctuation">.</span>eventType <span class="token operator">===</span> <span class="token string">'left'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
cmp<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>board<span class="token punctuation">:</span> cmp<span class="token punctuation">.</span>state<span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">move</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>evt <span class="token operator">&&</span> evt<span class="token punctuation">.</span>eventType <span class="token operator">===</span> <span class="token string">'down'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
cmp<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>board<span class="token punctuation">:</span> cmp<span class="token punctuation">.</span>state<span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">move</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>evt <span class="token operator">&&</span> evt<span class="token punctuation">.</span>eventType <span class="token operator">===</span> <span class="token string">'playPause'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
cmp<span class="token punctuation">.</span><span class="token function">restartGame</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token function">_disableTVEventHandler</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>_tvEventHandler<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">this</span><span class="token punctuation">.</span>_tvEventHandler<span class="token punctuation">.</span><span class="token function">disable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">delete</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_tvEventHandler<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_enableTVEventHandler</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token function">componentWillUnmount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_disableTVEventHandler</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span></div><ul><li><p><em>TV remote animations</em>: <code>RCTTVView</code> 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.</p></li><li><p><em>Back navigation with the TV remote menu button</em>: The <code>BackHandler</code> 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.</p></li><li><p><em>Known issues</em>:</p><ul><li><a href="https://github.com/facebook/react-native/issues/12793" target="_blank">ListView scrolling</a>. The issue can be easily worked around by setting <code>removeClippedSubviews</code> to false in ListView and similar components. For more discussion of this issue, see <a href="https://github.com/facebook/react-native/pull/12944" target="_blank">this PR</a>.</li></ul></li></ul></div><div class="docs-prevnext"><a class="docs-prev" href="docs/communication-ios.html#content">← Prev</a><a class="docs-next" href="docs/native-modules-android.html#content">Next →</a></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/BuildingForAppleTV.md">edit the content above on GitHub</a> and send us a pull request!</p></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Tutorial</a><a href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Showcase</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Upcoming Events</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://facebook.github.io/react/" target="_blank">React</a></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
|
ga('send', 'pageview');
|
|
|
|
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
|
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
|
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
|
|
|
docsearch({
|
|
apiKey: '2c98749b4a1e588efec53b2acec13025',
|
|
indexName: 'react-native-versions',
|
|
inputSelector: '#algolia-doc-search',
|
|
algoliaOptions: { facetFilters: [ "tags:0.46" ], hitsPerPage: 5 }
|
|
});
|
|
</script><script src="js/scripts.js"></script><script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script></body></html> |