mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Updated docs for next
This commit is contained in:
Website Deployment Script
@@ -2,12 +2,12 @@
|
||||
<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>
|
||||
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> ReactNative<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>
|
||||
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> ReactNative<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>
|
||||
@@ -27,7 +27,7 @@ on Android.</p><p>Since it accepts <code>any</code> value, you can also use it t
|
||||
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>
|
||||
<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> ReactNative<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>
|
||||
|
||||
@@ -70,7 +70,7 @@ for <code>UIScrollViewDecelerationRateNormal</code> and
|
||||
scrolling while dragging. The default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="indicatorstyle"></a><span class="platform">ios</span>indicatorStyle <span class="propType">enum('default', 'black', 'white')</span> <a class="hash-link" href="docs/scrollview.html#indicatorstyle">#</a></h4><div><p>The style of the scroll indicators.
|
||||
- <code>default</code> (the default), same as <code>black</code>.
|
||||
- <code>black</code>, scroll indicator is black. This style is good against a white content background.
|
||||
- <code>white</code>, scroll indicator is white. This style is good against a black content background.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maximumzoomscale"></a><span class="platform">ios</span>maximumZoomScale <span class="propType">number</span> <a class="hash-link" href="docs/scrollview.html#maximumzoomscale">#</a></h4><div><p>The maximum allowed zoom scale. The default value is 1.0.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minimumzoomscale"></a><span class="platform">ios</span>minimumZoomScale <span class="propType">number</span> <a class="hash-link" href="docs/scrollview.html#minimumzoomscale">#</a></h4><div><p>The minimum allowed zoom scale. The default value is 1.0.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrefreshstart"></a><span class="platform">ios</span>onRefreshStart <span class="propType">function</span> <a class="hash-link" href="docs/scrollview.html#onrefreshstart">#</a></h4><div class="deprecated"><div class="deprecatedTitle"><img class="deprecatedIcon" src="img/Warning.png"><span>Deprecated</span></div><div class="deprecatedMessage"><div><p>Use the <code>refreshControl</code> prop instead.</p></div></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onscrollanimationend"></a><span class="platform">ios</span>onScrollAnimationEnd <span class="propType">function</span> <a class="hash-link" href="docs/scrollview.html#onscrollanimationend">#</a></h4><div><p>Called when a scrolling animation ends.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrolleventthrottle"></a><span class="platform">ios</span>scrollEventThrottle <span class="propType">number</span> <a class="hash-link" href="docs/scrollview.html#scrolleventthrottle">#</a></h4><div><p>This controls how often the scroll event will be fired while scrolling
|
||||
- <code>white</code>, scroll indicator is white. This style is good against a black content background.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maximumzoomscale"></a><span class="platform">ios</span>maximumZoomScale <span class="propType">number</span> <a class="hash-link" href="docs/scrollview.html#maximumzoomscale">#</a></h4><div><p>The maximum allowed zoom scale. The default value is 1.0.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minimumzoomscale"></a><span class="platform">ios</span>minimumZoomScale <span class="propType">number</span> <a class="hash-link" href="docs/scrollview.html#minimumzoomscale">#</a></h4><div><p>The minimum allowed zoom scale. The default value is 1.0.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onscrollanimationend"></a><span class="platform">ios</span>onScrollAnimationEnd <span class="propType">function</span> <a class="hash-link" href="docs/scrollview.html#onscrollanimationend">#</a></h4><div><p>Called when a scrolling animation ends.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrolleventthrottle"></a><span class="platform">ios</span>scrollEventThrottle <span class="propType">number</span> <a class="hash-link" href="docs/scrollview.html#scrolleventthrottle">#</a></h4><div><p>This controls how often the scroll event will be fired while scrolling
|
||||
(as a time interval in ms). A lower number yields better accuracy for code
|
||||
that is tracking the scroll position, but can lead to scroll performance
|
||||
problems due to the volume of information being send over the bridge.
|
||||
@@ -92,7 +92,7 @@ with <code>snapToAlignment</code>.</p></div></div><div class="prop"><h4 class="p
|
||||
top of the screen when scrolling. For example, passing
|
||||
<code>stickyHeaderIndices={[0]}</code> will cause the first child to be fixed to the
|
||||
top of the scroll view. This property is not supported in conjunction
|
||||
with <code>horizontal={true}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="zoomscale"></a><span class="platform">ios</span>zoomScale <span class="propType">number</span> <a class="hash-link" href="docs/scrollview.html#zoomscale">#</a></h4><div><p>The current scale of the scroll view content. The default value is 1.0.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/scrollview.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="endrefreshing"></a>endRefreshing<span class="propType">()</span> <a class="hash-link" href="docs/scrollview.html#endrefreshing">#</a></h4><div><p>Deprecated. Use <code>RefreshControl</code> instead.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollto"></a>scrollTo<span class="propType">(y: number | { x?: number, y?: number, animated?: boolean }, x: number, animated: boolean)</span> <a class="hash-link" href="docs/scrollview.html#scrollto">#</a></h4><div><p>Scrolls to a given x, y offset, either immediately or with a smooth animation.</p><p>Syntax:</p><p><code>scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})</code></p><p>Note: The weird argument signature is due to the fact that, for historical reasons,
|
||||
with <code>horizontal={true}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="zoomscale"></a><span class="platform">ios</span>zoomScale <span class="propType">number</span> <a class="hash-link" href="docs/scrollview.html#zoomscale">#</a></h4><div><p>The current scale of the scroll view content. The default value is 1.0.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/scrollview.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollto"></a>scrollTo<span class="propType">(y: number | { x?: number, y?: number, animated?: boolean }, x: number, animated: boolean)</span> <a class="hash-link" href="docs/scrollview.html#scrollto">#</a></h4><div><p>Scrolls to a given x, y offset, either immediately or with a smooth animation.</p><p>Syntax:</p><p><code>scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})</code></p><p>Note: The weird argument signature is due to the fact that, for historical reasons,
|
||||
the function also accepts separate arguments as as alternative to the options object.
|
||||
This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollwithoutanimationto"></a>scrollWithoutAnimationTo<span class="propType">(y, x)</span> <a class="hash-link" href="docs/scrollview.html#scrollwithoutanimationto">#</a></h4><div><p>Deprecated, do not use.</p></div></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/scrollview.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ScrollViewExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user