mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
316 lines
39 KiB
HTML
316 lines
39 KiB
HTML
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>Building For TV Devices · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Building For TV Devices · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="<style>"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.53-RC</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><i></i></div><h2><i>›</i><span>Guides</span></h2></div><div class="navGroups"><div class="navGroup navGroupActive"><h3>The Basics</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/getting-started.html">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/tutorial.html">Learn the Basics</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/props.html">Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/state.html">State</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/style.html">Style</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/height-and-width.html">Height and Width</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/flexbox.html">Layout with Flexbox</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/handling-text-input.html">Handling Text Input</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/handling-touches.html">Handling Touches</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/using-a-scrollview.html">Using a ScrollView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/using-a-listview.html">Using List Views</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/network.html">Networking</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/more-resources.html">More Resources</a></li></ul></div><div class="navGroup navGroupActive"><h3>Guides</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/components-and-apis.html">Components and APIs</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/platform-specific-code.html">Platform Specific Code</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/navigation.html">Navigating Between Screens</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/images.html">Images</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/animations.html">Animations</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/accessibility.html">Accessibility</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/improvingux.html">Improving User Experience</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/timers.html">Timers</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/debugging.html">Debugging</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/performance.html">Performance</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/gesture-responder-system.html">Gesture Responder System</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/javascript-environment.html">JavaScript Environment</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/direct-manipulation.html">Direct Manipulation</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/colors.html">Color Reference</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/integration-with-existing-apps.html">Integration with Existing Apps</a></li><li class="navListItem navListItemActive"><a class="navItem navItemActive" href="/react-native/docs/building-for-apple-tv.html">Building For TV Devices</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/running-on-device.html">Running On Device</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/upgrading.html">Upgrading to new React Native versions</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/troubleshooting.html">Troubleshooting</a></li></ul></div><div class="navGroup navGroupActive"><h3>Guides (iOS)</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/native-modules-ios.html">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/native-components-ios.html">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/linking-libraries-ios.html">Linking Libraries</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/running-on-simulator-ios.html">Running On Simulator</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/communication-ios.html">Communication between native and React Native</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/app-extensions.html">App Extensions</a></li></ul></div><div class="navGroup navGroupActive"><h3>Guides (Android)</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/native-modules-android.html">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/native-components-android.html">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/headless-js-android.html">Headless JS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/signed-apk-android.html">Generating Signed APK</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/android-building-from-source.html">Building React Native from source</a></li></ul></div><div class="navGroup navGroupActive"><h3>Contributing</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/contributing.html">How to Contribute</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/maintainers.html">What to Expect from Maintainers</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/testing.html">Testing your Changes</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/understanding-cli.html">Understanding the CLI</a></li></ul></div><div class="navGroup navGroupActive"><h3>Components</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/activityindicator.html">ActivityIndicator</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/button.html">Button</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/datepickerios.html">DatePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/drawerlayoutandroid.html">DrawerLayoutAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/flatlist.html">FlatList</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/image.html">Image</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/keyboardavoidingview.html">KeyboardAvoidingView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/listview.html">ListView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/maskedviewios.html">MaskedViewIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/modal.html">Modal</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/navigatorios.html">NavigatorIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/picker.html">Picker</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/pickerios.html">PickerIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/progressbarandroid.html">ProgressBarAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/progressviewios.html">ProgressViewIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/refreshcontrol.html">RefreshControl</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/scrollview.html">ScrollView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/sectionlist.html">SectionList</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/segmentedcontrolios.html">SegmentedControlIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/slider.html">Slider</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/snapshotviewios.html">SnapshotViewIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/statusbar.html">StatusBar</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/switch.html">Switch</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/tabbarios.html">TabBarIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/tabbarios-item.html">TabBarIOS.Item</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/text.html">Text</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/textinput.html">TextInput</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/toolbarandroid.html">ToolbarAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/touchablehighlight.html">TouchableHighlight</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/touchablenativefeedback.html">TouchableNativeFeedback</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/touchableopacity.html">TouchableOpacity</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/touchablewithoutfeedback.html">TouchableWithoutFeedback</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/view.html">View</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/viewpagerandroid.html">ViewPagerAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/virtualizedlist.html">VirtualizedList</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/webview.html">WebView</a></li></ul></div><div class="navGroup navGroupActive"><h3>APIs</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/accessibilityinfo.html">AccessibilityInfo</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/actionsheetios.html">ActionSheetIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/alert.html">Alert</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/alertios.html">AlertIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/animated.html">Animated</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/appregistry.html">AppRegistry</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/appstate.html">AppState</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/asyncstorage.html">AsyncStorage</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/backandroid.html">BackAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/backhandler.html">BackHandler</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/cameraroll.html">CameraRoll</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/clipboard.html">Clipboard</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/datepickerandroid.html">DatePickerAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/dimensions.html">Dimensions</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/easing.html">Easing</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/geolocation.html">Geolocation</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/imageeditor.html">ImageEditor</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/imagepickerios.html">ImagePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/imagestore.html">ImageStore</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/image-style-props.html">Image Style Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/interactionmanager.html">InteractionManager</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/keyboard.html">Keyboard</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/layout-props.html">Layout Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/layoutanimation.html">LayoutAnimation</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/linking.html">Linking</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/listviewdatasource.html">ListViewDataSource</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/netinfo.html">NetInfo</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/panresponder.html">PanResponder</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/permissionsandroid.html">PermissionsAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/pixelratio.html">PixelRatio</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/pushnotificationios.html">PushNotificationIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/settings.html">Settings</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/shadow-props.html">Shadow Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/share.html">Share</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/statusbarios.html">StatusBarIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/stylesheet.html">StyleSheet</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/systrace.html">Systrace</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/text-style-props.html">Text Style Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/timepickerandroid.html">TimePickerAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/toastandroid.html">ToastAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/transforms.html">Transforms</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/vibration.html">Vibration</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/vibrationios.html">VibrationIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/view-style-props.html">View Style Props</a></li></ul></div></div></section></div><script>
|
||
var toggler = document.getElementById('navToggler');
|
||
var nav = document.getElementById('docsNav');
|
||
toggler.onclick = function() {
|
||
nav.classList.toggle('docsSliderActive');
|
||
};
|
||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/building-for-apple-tv.md" target="_blank">Edit</a><h1>Building For TV Devices</h1></header><article><div><span><style>
|
||
.toggler li {
|
||
display: inline-block;
|
||
position: relative;
|
||
top: 1px;
|
||
padding: 10px;
|
||
margin: 0px 2px 0px 2px;
|
||
border: 1px solid #05A5D1;
|
||
border-bottom-color: transparent;
|
||
border-radius: 3px 3px 0px 0px;
|
||
color: #05A5D1;
|
||
background-color: transparent;
|
||
font-size: 0.99em;
|
||
cursor: pointer;
|
||
}
|
||
.toggler li:first-child {
|
||
margin-left: 0;
|
||
}
|
||
.toggler li:last-child {
|
||
margin-right: 0;
|
||
}
|
||
.toggler ul {
|
||
width: 100%;
|
||
display: inline-block;
|
||
list-style-type: none;
|
||
margin: 0;
|
||
border-bottom: 1px solid #05A5D1;
|
||
cursor: default;
|
||
}
|
||
@media screen and (max-width: 960px) {
|
||
.toggler li,
|
||
.toggler li:first-child,
|
||
.toggler li:last-child {
|
||
display: block;
|
||
border-bottom-color: #05A5D1;
|
||
border-radius: 3px;
|
||
margin: 2px 0px 2px 0px;
|
||
}
|
||
.toggler ul {
|
||
border-bottom: 0;
|
||
}
|
||
}
|
||
.toggler a {
|
||
display: inline-block;
|
||
padding: 10px 5px;
|
||
margin: 2px;
|
||
border: 1px solid #05A5D1;
|
||
border-radius: 3px;
|
||
text-decoration: none !important;
|
||
}
|
||
.display-platform-ios .toggler .button-ios,
|
||
.display-platform-android .toggler .button-android {
|
||
background-color: #05A5D1;
|
||
color: white;
|
||
}
|
||
block { display: none; }
|
||
.display-platform-ios .ios,
|
||
.display-platform-android .android {
|
||
display: block;
|
||
}
|
||
</style>
|
||
<p>TV devices support has been implemented with the intention of making existing React Native applications "just work" on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications.</p>
|
||
<div class="toggler">
|
||
<ul role="tablist" >
|
||
<li id="ios" class="button-ios" aria-selected="false" role="tab" tabindex="0" aria-controls="iostab" onclick="displayTab('platform', 'ios')">
|
||
iOS
|
||
</li>
|
||
<li id="android" class="button-android" aria-selected="false" role="tab" tabindex="-1" aria-controls="androidtab" onclick="displayTab('platform', 'android')">
|
||
Android
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<p><block class="ios" /></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" aria-hidden="true" name="build-changes"></a><a href="#build-changes" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Build changes</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>
|
||
<pre><code class="hljs css javascript"><span class="hljs-keyword">var</span> Platform = <span class="hljs-built_in">require</span>(<span class="hljs-string">'Platform'</span>);
|
||
<span class="hljs-keyword">var</span> running_on_tv = Platform.isTV;
|
||
|
||
<span class="hljs-comment">// If you want to be more specific and only detect devices running tvOS</span>
|
||
<span class="hljs-comment">// (but no Android TV devices) you can use:</span>
|
||
<span class="hljs-keyword">var</span> running_on_apple_tv = Platform.isTVOS;
|
||
</code></pre>
|
||
<p><block class="android" /></p>
|
||
<h2><a class="anchor" aria-hidden="true" name="build-changes"></a><a href="#build-changes" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Build changes</h2>
|
||
<ul>
|
||
<li><em>Native layer</em>: To run React Native project on Android TV make sure to make the following changes to <code>AndroidManifest.xml</code></li>
|
||
</ul>
|
||
<pre><code class="hljs css xml"> <span class="hljs-comment"><!-- Add custom banner image to display as Android TV launcher icon --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">application</span>
|
||
<span class="hljs-attr">...</span>
|
||
<span class="hljs-attr">android:banner</span>=<span class="hljs-string">"@drawable/tv_banner"</span>
|
||
></span>
|
||
...
|
||
<span class="hljs-tag"><<span class="hljs-name">intent-filter</span>></span>
|
||
...
|
||
<span class="hljs-comment"><!-- Needed to properly create a launch intent when running on Android TV --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">category</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"android.intent.category.LEANBACK_LAUNCHER"</span>/></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">intent-filter</span>></span>
|
||
...
|
||
<span class="hljs-tag"></<span class="hljs-name">application</span>></span>
|
||
</code></pre>
|
||
<ul>
|
||
<li><em>JavaScript layer</em>: Support for Android TV has been added to <code>Platform.android.js</code>. You can check whether code is running on Android TV by doing</li>
|
||
</ul>
|
||
<pre><code class="hljs css js"><span class="hljs-keyword">var</span> Platform = <span class="hljs-built_in">require</span>(<span class="hljs-string">'Platform'</span>);
|
||
<span class="hljs-keyword">var</span> running_on_android_tv = Platform.isTV;
|
||
</code></pre>
|
||
<p><block class="ios android" /></p>
|
||
<h2><a class="anchor" aria-hidden="true" name="code-changes"></a><a href="#code-changes" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Code changes</h2>
|
||
<p><block class="ios" /></p>
|
||
<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>
|
||
</ul>
|
||
<p><block class="android" /></p>
|
||
<ul>
|
||
<li><p><em>Access to touchable controls</em>: When running on Android TV the Android framework will automatically apply a directional navigation scheme based on relative position of focusable elements in your views. 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>, <code>TouchableOpacity</code> and <code>TouchableNativeFeedback</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>
|
||
</ul>
|
||
<p><block class="ios" /></p>
|
||
<ul>
|
||
<li><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:</li>
|
||
</ul>
|
||
<p><block class="android"></p>
|
||
<ul>
|
||
<li><em>TV remote/keyboard input</em>: A new native class, <code>ReactAndroidTVRootViewHelper</code>, sets up key events handlers for TV remote events. When TV remote events occur, this class 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:</li>
|
||
</ul>
|
||
<p><block class="ios android"></p>
|
||
<pre><code class="hljs css javascript"><span class="hljs-keyword">var</span> TVEventHandler = <span class="hljs-built_in">require</span>(<span class="hljs-string">'TVEventHandler'</span>);
|
||
|
||
.
|
||
.
|
||
.
|
||
|
||
class Game2048 extends React.Component {
|
||
<span class="hljs-attr">_tvEventHandler</span>: any;
|
||
|
||
_enableTVEventHandler() {
|
||
<span class="hljs-keyword">this</span>._tvEventHandler = <span class="hljs-keyword">new</span> TVEventHandler();
|
||
<span class="hljs-keyword">this</span>._tvEventHandler.enable(<span class="hljs-keyword">this</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">cmp, evt</span>) </span>{
|
||
<span class="hljs-keyword">if</span> (evt && evt.eventType === <span class="hljs-string">'right'</span>) {
|
||
cmp.setState({<span class="hljs-attr">board</span>: cmp.state.board.move(<span class="hljs-number">2</span>)});
|
||
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(evt && evt.eventType === <span class="hljs-string">'up'</span>) {
|
||
cmp.setState({<span class="hljs-attr">board</span>: cmp.state.board.move(<span class="hljs-number">1</span>)});
|
||
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(evt && evt.eventType === <span class="hljs-string">'left'</span>) {
|
||
cmp.setState({<span class="hljs-attr">board</span>: cmp.state.board.move(<span class="hljs-number">0</span>)});
|
||
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(evt && evt.eventType === <span class="hljs-string">'down'</span>) {
|
||
cmp.setState({<span class="hljs-attr">board</span>: cmp.state.board.move(<span class="hljs-number">3</span>)});
|
||
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(evt && evt.eventType === <span class="hljs-string">'playPause'</span>) {
|
||
cmp.restartGame();
|
||
}
|
||
});
|
||
}
|
||
|
||
_disableTVEventHandler() {
|
||
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>._tvEventHandler) {
|
||
<span class="hljs-keyword">this</span>._tvEventHandler.disable();
|
||
<span class="hljs-keyword">delete</span> <span class="hljs-keyword">this</span>._tvEventHandler;
|
||
}
|
||
}
|
||
|
||
componentDidMount() {
|
||
<span class="hljs-keyword">this</span>._enableTVEventHandler();
|
||
}
|
||
|
||
componentWillUnmount() {
|
||
<span class="hljs-keyword">this</span>._disableTVEventHandler();
|
||
}
|
||
</code></pre>
|
||
<p><block class="ios" /></p>
|
||
<ul>
|
||
<li><p><em>Dev Menu support</em>: On the simulator, cmd-D will bring up the developer menu, just like on 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 :) )</p></li>
|
||
<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>TabBarIOS behavior</em>: The <code>TabBarIOS</code> component wraps the native <code>UITabBar</code> API, which works differently on Apple TV. To avoid jittery rerendering of the tab bar in tvOS (see <a href="https://github.com/facebook/react-native/issues/15081">this issue</a>), the selected tab bar item can only be set from Javascript on initial render, and is controlled after that by the user through native code.</p></li>
|
||
</ul>
|
||
<p><block class="android" /></p>
|
||
<ul>
|
||
<li><em>Dev Menu support</em>: On the simulator, cmd-M will bring up the developer menu, just like on Android. To bring it up on a real Android TV device, make a long press on the play/pause button on the remote. (Please do not shake the Android TV device, that will not work :) )</li>
|
||
</ul>
|
||
<p><block class="ios" /></p>
|
||
<ul>
|
||
<li><p><em>Known issues</em>:</p>
|
||
<ul>
|
||
<li><a href="https://github.com/facebook/react-native/issues/12793">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">this PR</a>.</li>
|
||
</ul></li>
|
||
</ul>
|
||
<p><block class="android" /></p>
|
||
<ul>
|
||
<li><p><em>Known issues</em>:</p>
|
||
<ul>
|
||
<li><code>InputText</code> components do not work for now (i.e. they cannot receive focus).</li>
|
||
</ul></li>
|
||
</ul>
|
||
<script>
|
||
function displayTab(type, value) {
|
||
var container = document.getElementsByTagName('block')[0].parentNode;
|
||
container.className = 'display-' + type + '-' + value + ' ' +
|
||
container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), '');
|
||
}
|
||
function convertBlocks() {
|
||
// Convert <div>...<span><block /></span>...</div>
|
||
// Into <div>...<block />...</div>
|
||
var blocks = document.querySelectorAll('block');
|
||
for (var i = 0; i < blocks.length; ++i) {
|
||
var block = blocks[i];
|
||
var span = blocks[i].parentNode;
|
||
var container = span.parentNode;
|
||
container.insertBefore(block, span);
|
||
container.removeChild(span);
|
||
}
|
||
// Convert <div>...<block />content<block />...</div>
|
||
// Into <div>...<block>content</block><block />...</div>
|
||
blocks = document.querySelectorAll('block');
|
||
for (var i = 0; i < blocks.length; ++i) {
|
||
var block = blocks[i];
|
||
while (
|
||
block.nextSibling &&
|
||
block.nextSibling.tagName !== 'BLOCK'
|
||
) {
|
||
block.appendChild(block.nextSibling);
|
||
}
|
||
}
|
||
}
|
||
function guessPlatformAndOS() {
|
||
if (!document.querySelector('block')) {
|
||
return;
|
||
}
|
||
// If we are coming to the page with a hash in it (i.e. from a search, for example), try to get
|
||
// us as close as possible to the correct platform and dev os using the hashtag and block walk up.
|
||
var foundHash = false;
|
||
if (
|
||
window.location.hash !== '' &&
|
||
window.location.hash !== 'content'
|
||
) {
|
||
// content is default
|
||
var hashLinks = document.querySelectorAll(
|
||
'a.hash-link'
|
||
);
|
||
for (
|
||
var i = 0;
|
||
i < hashLinks.length && !foundHash;
|
||
++i
|
||
) {
|
||
if (hashLinks[i].hash === window.location.hash) {
|
||
var parent = hashLinks[i].parentElement;
|
||
while (parent) {
|
||
if (parent.tagName === 'BLOCK') {
|
||
// Could be more than one target os and dev platform, but just choose some sort of order
|
||
// of priority here.
|
||
// Target Platform
|
||
if (parent.className.indexOf('ios') > -1) {
|
||
displayTab('platform', 'ios');
|
||
foundHash = true;
|
||
} else if (
|
||
parent.className.indexOf('android') > -1
|
||
) {
|
||
displayTab('platform', 'android');
|
||
foundHash = true;
|
||
} else {
|
||
break;
|
||
}
|
||
}
|
||
parent = parent.parentElement;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// Do the default if there is no matching hash
|
||
if (!foundHash) {
|
||
var isMac = navigator.platform === 'MacIntel';
|
||
var isWindows = navigator.platform === 'Win32';
|
||
displayTab('platform', isMac ? 'ios' : 'android');
|
||
}
|
||
}
|
||
convertBlocks();
|
||
guessPlatformAndOS();
|
||
</script>
|
||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="integration-with-existing-apps.html">← Integration with Existing Apps</a><a class="docs-next button" href="running-on-device.html">Running On Device →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</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/help.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="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2018 Facebook Inc.</section></footer></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','https://www.google-analytics.com/analytics.js','ga');
|
||
|
||
ga('create', 'UA-41298772-2', 'auto');
|
||
ga('send', 'pageview');
|
||
</script><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><script>
|
||
var search = docsearch({
|
||
apiKey: '2c98749b4a1e588efec53b2acec13025',
|
||
indexName: 'react-native-versions',
|
||
inputSelector: '#search_input_react',
|
||
algoliaOptions: {"facetFilters":["tags:0.53-RC"],"hitsPerPage":5}
|
||
});
|
||
</script></body></html> |