mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
93 lines
26 KiB
HTML
93 lines
26 KiB
HTML
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Platform Specific Code · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Platform Specific Code · 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="When building a cross-platform app, you'll want to re-use as much code as possible. Scenarios may arise where it makes sense for the code to be different, for example you may want to implement separate visual components for iOS and Android."/><meta name="twitter:card" content="summary"/><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>
|
||
(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 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 doc"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions.html"><h3>0.14</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/react-native/docs/0.14/getting-started.html" target="_self">Docs</a></li><li class=""><a href="/react-native/en/help.html" target="_self">Community</a></li><li class=""><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li class=""><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/0.14/getting-started.html">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/tutorial.html">Learn the Basics</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/props.html">Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/state.html">State</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/style.html">Style</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/height-and-width.html">Height and Width</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/flexbox.html">Layout with Flexbox</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/handling-text-input.html">Handling Text Input</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/handling-touches.html">Handling Touches</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/using-a-scrollview.html">Using a ScrollView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/using-a-listview.html">Using List Views</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/network.html">Networking</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/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/0.14/components-and-apis.html">Components and APIs</a></li><li class="navListItem navListItemActive"><a class="navItem navItemActive" href="/react-native/docs/0.14/platform-specific-code.html">Platform Specific Code</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/navigation.html">Navigating Between Screens</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/images.html">Images</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/animations.html">Animations</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/accessibility.html">Accessibility</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/improvingux.html">Improving User Experience</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/timers.html">Timers</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/debugging.html">Debugging</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/performance.html">Performance</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/gesture-responder-system.html">Gesture Responder System</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/javascript-environment.html">JavaScript Environment</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/direct-manipulation.html">Direct Manipulation</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/colors.html">Color Reference</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/integration-with-existing-apps.html">Integration with Existing Apps</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/running-on-device.html">Running On Device</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/upgrading.html">Upgrading to new React Native versions</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/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/0.14/native-modules-ios.html">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/native-components-ios.html">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/linking-libraries-ios.html">Linking Libraries</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/running-on-simulator-ios.html">Running On Simulator</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/communication-ios.html">Communication between native and React Native</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/building-for-apple-tv.html">Building For TV Devices</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/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/0.14/native-modules-android.html">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/native-components-android.html">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/headless-js-android.html">Headless JS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/signed-apk-android.html">Generating Signed APK</a></li></ul></div><div class="navGroup navGroupActive"><h3>Contributing</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/contributing.html">How to Contribute</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/maintainers.html">What to Expect from Maintainers</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/building-from-source.html">Building React Native from source</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/testing.html">Testing your Changes</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/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/0.14/datepickerios.html">DatePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/drawerlayoutandroid.html">DrawerLayoutAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/image.html">Image</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/modal.html">Modal</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/navigator.html">Navigator (Legacy Custom Component)</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/navigatorios.html">NavigatorIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/progressbarandroid.html">ProgressBarAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/progressviewios.html">ProgressViewIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/scrollview.html">ScrollView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/segmentedcontrolios.html">SegmentedControlIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/snapshotviewios.html">SnapshotViewIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/switch.html">Switch</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/tabbarios.html">TabBarIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/tabbarios-item.html">TabBarIOS.Item</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/text.html">Text</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/textinput.html">TextInput</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/toolbarandroid.html">ToolbarAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/touchablehighlight.html">TouchableHighlight</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/touchablenativefeedback.html">TouchableNativeFeedback</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/touchableopacity.html">TouchableOpacity</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/touchablewithoutfeedback.html">TouchableWithoutFeedback</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/viewpagerandroid.html">ViewPagerAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/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/0.14/actionsheetios.html">ActionSheetIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/animated.html">Animated</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/cameraroll.html">CameraRoll</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/dimensions.html">Dimensions</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/easing.html">Easing</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/geolocation.html">Geolocation</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/imagepickerios.html">ImagePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/image-style-props.html">Image Style Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/interactionmanager.html">InteractionManager</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/layout-props.html">Layout Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/layoutanimation.html">LayoutAnimation</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/netinfo.html">NetInfo</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/pixelratio.html">PixelRatio</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/pushnotificationios.html">PushNotificationIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/settings.html">Settings</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/statusbarios.html">StatusBarIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/stylesheet.html">StyleSheet</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/text-style-props.html">Text Style Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/toastandroid.html">ToastAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/transforms.html">Transforms</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/vibrationios.html">VibrationIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/0.14/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/platform-specific-code.md" target="_blank" rel="noreferrer noopener">Edit</a><h1>Platform Specific Code</h1></header><article><div><span><p>When building a cross-platform app, you'll want to re-use as much code as possible. Scenarios may arise where it makes sense for the code to be different, for example you may want to implement separate visual components for iOS and Android.</p>
|
||
<p>React Native provides two ways to easily organize your code and separate it by platform:</p>
|
||
<ul>
|
||
<li>Using the <a href="/react-native/docs/0.14/platform-specific-code.html#platform-module"><code>Platform</code> module</a>.</li>
|
||
<li>Using <a href="/react-native/docs/0.14/platform-specific-code.html#platform-specific-extensions">platform-specific file extensions</a>.</li>
|
||
</ul>
|
||
<p>Certain components may have properties that work on one platform only. All of these props are annotated with <code>@platform</code> and have a small badge next to them on the website.</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="platform-module"></a><a href="#platform-module" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" 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>Platform module</h2>
|
||
<p>React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.</p>
|
||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> {Platform, StyleSheet} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||
|
||
<span class="hljs-keyword">const</span> styles = StyleSheet.create({
|
||
<span class="hljs-attr">height</span>: Platform.OS === <span class="hljs-string">'ios'</span> ? <span class="hljs-number">200</span> : <span class="hljs-number">100</span>,
|
||
});
|
||
</code></pre>
|
||
<p><code>Platform.OS</code> will be <code>ios</code> when running on iOS and <code>android</code> when running on Android.</p>
|
||
<p>There is also a <code>Platform.select</code> method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.</p>
|
||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> {Platform, StyleSheet} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||
|
||
<span class="hljs-keyword">const</span> styles = StyleSheet.create({
|
||
<span class="hljs-attr">container</span>: {
|
||
<span class="hljs-attr">flex</span>: <span class="hljs-number">1</span>,
|
||
...Platform.select({
|
||
<span class="hljs-attr">ios</span>: {
|
||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'red'</span>,
|
||
},
|
||
<span class="hljs-attr">android</span>: {
|
||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'blue'</span>,
|
||
},
|
||
}),
|
||
},
|
||
});
|
||
</code></pre>
|
||
<p>This will result in a container having <code>flex: 1</code> on both platforms, a red background color on iOS, and a blue background color on Android.</p>
|
||
<p>Since it accepts <code>any</code> value, you can also use it to return platform specific component, like below:</p>
|
||
<pre><code class="hljs css javascript"><span class="hljs-keyword">const</span> Component = Platform.select({
|
||
<span class="hljs-attr">ios</span>: <span class="hljs-function"><span class="hljs-params">()</span> =></span> <span class="hljs-built_in">require</span>(<span class="hljs-string">'ComponentIOS'</span>),
|
||
<span class="hljs-attr">android</span>: <span class="hljs-function"><span class="hljs-params">()</span> =></span> <span class="hljs-built_in">require</span>(<span class="hljs-string">'ComponentAndroid'</span>),
|
||
})();
|
||
|
||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Component</span> /></span>;
|
||
</span></code></pre>
|
||
<h3><a class="anchor" aria-hidden="true" id="detecting-the-android-version"></a><a href="#detecting-the-android-version" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" 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>Detecting the Android version</h3>
|
||
<p>On Android, the <code>Platform</code> module can also be used to detect the version of the Android Platform in which the app is running:</p>
|
||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> {Platform} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||
|
||
<span class="hljs-keyword">if</span> (Platform.Version === <span class="hljs-number">25</span>) {
|
||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Running on Nougat!'</span>);
|
||
}
|
||
</code></pre>
|
||
<h3><a class="anchor" aria-hidden="true" id="detecting-the-ios-version"></a><a href="#detecting-the-ios-version" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" 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>Detecting the iOS version</h3>
|
||
<p>On iOS, the <code>Version</code> is a result of <code>-[UIDevice systemVersion]</code>, which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:</p>
|
||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> {Platform} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||
|
||
<span class="hljs-keyword">const</span> majorVersionIOS = <span class="hljs-built_in">parseInt</span>(Platform.Version, <span class="hljs-number">10</span>);
|
||
<span class="hljs-keyword">if</span> (majorVersionIOS <= <span class="hljs-number">9</span>) {
|
||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Work around a change in behavior'</span>);
|
||
}
|
||
</code></pre>
|
||
<h2><a class="anchor" aria-hidden="true" id="platform-specific-extensions"></a><a href="#platform-specific-extensions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" 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>Platform-specific extensions</h2>
|
||
<p>When your platform-specific code is more complex, you should consider splitting the code out into separate files. React Native will detect when a file has a <code>.ios.</code> or <code>.android.</code> extension and load the relevant platform file when required from other components.</p>
|
||
<p>For example, say you have the following files in your project:</p>
|
||
<pre><code class="hljs css sh">BigButton.ios.js
|
||
BigButton.android.js
|
||
</code></pre>
|
||
<p>You can then require the component as follows:</p>
|
||
<pre><code class="hljs css javascript"><span class="hljs-keyword">const</span> BigButton = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./BigButton'</span>);
|
||
</code></pre>
|
||
<p>React Native will automatically pick up the right file based on the running platform.</p>
|
||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="components-and-apis.html">← Components and APIs</a><a class="docs-next button" href="navigation.html">Navigating Between Screens →</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">Tutorial</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://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discuss.reactjs.org" target="_blank">Discussion Forum</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></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>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.14"],"hitsPerPage":5}
|
||
});
|
||
</script></body></html> |