mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
39 lines
9.4 KiB
Markdown
39 lines
9.4 KiB
Markdown
---
|
|
id: version-0.26-platform-specific-code
|
|
title: platform-specific-code
|
|
original_id: platform-specific-code
|
|
---
|
|
<a id="content"></a><table width="100%"><tbody><tr><td><h1><a class="anchor" name="platform-specific-code"></a>Platform Specific Code <a class="hash-link" href="docs/platform-specific-code.html#platform-specific-code">#</a></h1></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/PlatformSpecificInformation.md">Edit on GitHub</a></td></tr></tbody></table><div><p>When building a cross-platform app, the need to write different code for different platforms may arise. This can always be achieved by organizing the various components in different folders:</p><div class="prism language-javascript"><span class="token operator">/</span>common<span class="token regex">/components/</span>
|
|
<span class="token operator">/</span>android<span class="token regex">/components/</span>
|
|
<span class="token operator">/</span>ios<span class="token regex">/components/</span></div><p>Another option may be naming the components differently depending on the platform they are going to be used in:</p><div class="prism language-javascript">BigButtonIOS<span class="token punctuation">.</span>js
|
|
BigButtonAndroid<span class="token punctuation">.</span>js</div><p>But React Native provides two alternatives to easily organize your code separating it by platform:</p><h2><a class="anchor" name="platform-specific-extensions"></a>Platform specific extensions <a class="hash-link" href="docs/platform-specific-code.html#platform-specific-extensions">#</a></h2><p>React Native will detect when a file has a <code>.ios.</code> or <code>.android.</code> extension and load the right file for each platform when requiring them from other components.</p><p>For example, you can have these files in your project:</p><div class="prism language-javascript">BigButton<span class="token punctuation">.</span>ios<span class="token punctuation">.</span>js
|
|
BigButton<span class="token punctuation">.</span>android<span class="token punctuation">.</span>js</div><p>With this setup, you can just require the files from a different component without paying attention to the platform in which the app will run.</p><div class="prism language-javascript">import BigButton from <span class="token string">'./components/BigButton'</span><span class="token punctuation">;</span></div><p>React Native will import the correct component for the running platform.</p><h2><a class="anchor" name="platform-module"></a>Platform module <a class="hash-link" href="docs/platform-specific-code.html#platform-module">#</a></h2><p>A module is provided by React Native to detect what is the platform in which the app is running. This piece of functionality can be useful when only small parts of a component are platform specific.</p><div class="prism language-javascript"><span class="token keyword">var</span> <span class="token punctuation">{</span> Platform <span class="token punctuation">}</span> <span class="token operator">=</span> React<span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">var</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
|
height<span class="token punctuation">:</span> <span class="token punctuation">(</span>Platform<span class="token punctuation">.</span>OS <span class="token operator">===</span> <span class="token string">'ios'</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token number">200</span> <span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p><code>Platform.OS</code> will be <code>ios</code> when running in iOS and <code>android</code> when running in an Android device or simulator.</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><div class="prism language-javascript"><span class="token keyword">var</span> <span class="token punctuation">{</span> Platform <span class="token punctuation">}</span> <span class="token operator">=</span> React<span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">var</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
|
container<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
flex<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>Platform<span class="token punctuation">.</span><span class="token function">select<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
|
ios<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
backgroundColor<span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
android<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
backgroundColor<span class="token punctuation">:</span> <span class="token string">'blue'</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 punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>This will result in a container having <code>flex: 1</code> on both platforms and backgroundColor - red on iOS and blue
|
|
on Android.</p><p>Since it accepts <code>any</code> value, you can also use it to return platform specific component, like below:</p><div class="prism language-javascript"><span class="token keyword">var</span> Component <span class="token operator">=</span> Platform<span class="token punctuation">.</span><span class="token function">select<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
|
ios<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'ComponentIOS'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
android<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'ComponentAndroid'</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>
|
|
|
|
<Component <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span></div><h3><a class="anchor" name="detecting-android-version"></a>Detecting Android version <a class="hash-link" href="docs/platform-specific-code.html#detecting-android-version">#</a></h3><p>On Android, the Platform module can be also used to detect which is the version of the Android Platform in which the app is running</p><div class="prism language-javascript"><span class="token keyword">var</span> <span class="token punctuation">{</span>Platform<span class="token punctuation">}</span> <span class="token operator">=</span> React<span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">if</span><span class="token punctuation">(</span>Platform<span class="token punctuation">.</span>Version <span class="token operator">===</span> <span class="token number">21</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'Running on Lollipop!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/native-modules-ios.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div> |