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,7 +2,7 @@
|
||||
data<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span>title<span class="token punctuation">:</span> <span class="token string">'Title Text'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'item1'</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>
|
||||
renderItem<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <ListItem title<span class="token operator">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">}</span>
|
||||
<span class="token operator">/</span><span class="token operator">></span></div><h3><a class="anchor" name="sectionlist-https-facebook-github-io-react-native-releases-next-docs-sectionlist-html"></a><a href="https://facebook.github.io/react-native/releases/next/docs/sectionlist.html" target="_blank"><code><SectionList></code></a> <a class="hash-link" href="#sectionlist-https-facebook-github-io-react-native-releases-next-docs-sectionlist-html">#</a></h3><p>If you want to render a set of data broken into logical sections, maybe with section headers (e.g. in an alphabetical address book), and potentially with heterogeneous data and rendering (such as a profile view with some buttons followed by a composer, then a photo grid, then a friend grid, and finally a list of stories), this is the way to go.</p><div class="prism language-javascript"><SectionList
|
||||
renderItem<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <ListItem title<span class="token operator">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||||
renderItem<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <ListItem title<span class="token operator">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">}</span>
|
||||
renderSectionHeader<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">{</span>section<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <H1 title<span class="token operator">=</span><span class="token punctuation">{</span>section<span class="token punctuation">.</span>key<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">}</span>
|
||||
sections<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token comment" spellcheck="true"> // homogenous rendering between sections
|
||||
</span> <span class="token punctuation">{</span>data<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> key<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>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -9,7 +9,7 @@
|
||||
</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>code<span class="token punctuation">,</span> message<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">warn<span class="token punctuation">(</span></span><span class="token string">'Cannot open date picker'</span><span class="token punctuation">,</span> message<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/datepickerandroid.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="open"></a><span class="methodType">static </span>open<span class="methodType">(options)</span> <a class="hash-link" href="docs/datepickerandroid.html#open">#</a></h4><div><p>Opens the standard Android date picker dialog.</p><p>The available keys for the <code>options</code> object are:</p><ul><li><code>date</code> (<code>Date</code> object or timestamp in milliseconds) - date to show by default</li><li><code>minDate</code> (<code>Date</code> or timestamp in milliseconds) - minimum date that can be selected</li><li><code>maxDate</code> (<code>Date</code> object or timestamp in milliseconds) - minimum date that can be selected</li><li><code>mode</code> (<code>enum('calendar', 'spinner', 'default')</code>) - To set the date-picker mode to calendar/spinner/default<ul><li>'calendar': Show a date picker in calendar mode.</li><li>'spinner': Show a date picker in spinner mode.</li><li>'default': Show a default native date picker(spinner/calendar) based on android versions.</li></ul></li></ul><p>Returns a Promise which will be invoked an object containing <code>action</code>, <code>year</code>, <code>month</code> (0-11),
|
||||
<span class="token punctuation">}</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/datepickerandroid.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="open"></a><span class="methodType">static </span>open<span class="methodType">(options)</span> <a class="hash-link" href="docs/datepickerandroid.html#open">#</a></h4><div><p>Opens the standard Android date picker dialog.</p><p>The available keys for the <code>options</code> object are:</p><ul><li><code>date</code> (<code>Date</code> object or timestamp in milliseconds) - date to show by default</li><li><code>minDate</code> (<code>Date</code> or timestamp in milliseconds) - minimum date that can be selected</li><li><code>maxDate</code> (<code>Date</code> object or timestamp in milliseconds) - maximum date that can be selected</li><li><code>mode</code> (<code>enum('calendar', 'spinner', 'default')</code>) - To set the date-picker mode to calendar/spinner/default<ul><li>'calendar': Show a date picker in calendar mode.</li><li>'spinner': Show a date picker in spinner mode.</li><li>'default': Show a default native date picker(spinner/calendar) based on android versions.</li></ul></li></ul><p>Returns a Promise which will be invoked an object containing <code>action</code>, <code>year</code>, <code>month</code> (0-11),
|
||||
<code>day</code> if the user picked a date. If the user dismissed the dialog, the Promise will
|
||||
still be resolved with action being <code>DatePickerAndroid.dismissedAction</code> and all the other keys
|
||||
being undefined. <strong>Always</strong> check whether the <code>action</code> before reading the values.</p><p>Note the native date picker dialog has some UI glitches on Android 4 and lower
|
||||
|
||||
@@ -50,17 +50,17 @@ class <span class="token class-name">DisplayAnImageWithStyle</span> extends <spa
|
||||
<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> DisplayAnImageWithStyle
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.2.6/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20View%2C%20Image%2C%20StyleSheet%20%7D%20from%20'react-native'%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20stretch%3A%20%7B%0A%20%20%20%20width%3A%2050%2C%0A%20%20%20%20height%3A%20200%0A%20%20%7D%0A%7D)%3B%0A%0Aclass%20DisplayAnImageWithStyle%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.stretch%7D%0A%20%20%20%20%20%20%20%20%20%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20App%20registration%20and%20rendering%0AAppRegistry.registerComponent(%0A%20%20'DisplayAnImageWithStyle'%2C%0A%20%20()%20%3D%3E%20DisplayAnImageWithStyle%0A)%3B" frameborder="0"></iframe></div><h3><a class="anchor" name="gif-and-webp-support-on-android"></a>GIF and WebP support on Android <a class="hash-link" href="docs/image.html#gif-and-webp-support-on-android">#</a></h3><p>By default, GIF and WebP are not supported on Android.</p><p>You will need to add some optional modules in <code>android/app/build.gradle</code>, depending on the needs of your app.</p><div class="prism language-javascript">dependencies <span class="token punctuation">{</span>
|
||||
<span class="token comment" spellcheck="true"> // If your app supports Android versions before Ice Cream Sandwich (API level 14)
|
||||
</span> compile <span class="token string">'com.facebook.fresco:animated-base-support:0.11.0'</span>
|
||||
</span> compile <span class="token string">'com.facebook.fresco:animated-base-support:1.0.1'</span>
|
||||
|
||||
<span class="token comment" spellcheck="true"> // For animated GIF support
|
||||
</span> compile <span class="token string">'com.facebook.fresco:animated-gif:0.11.0'</span>
|
||||
</span> compile <span class="token string">'com.facebook.fresco:animated-gif:1.0.1'</span>
|
||||
|
||||
<span class="token comment" spellcheck="true"> // For WebP support, including animated WebP
|
||||
</span> compile <span class="token string">'com.facebook.fresco:animated-webp:0.11.0'</span>
|
||||
compile <span class="token string">'com.facebook.fresco:webpsupport:0.11.0'</span>
|
||||
</span> compile <span class="token string">'com.facebook.fresco:animated-webp:1.0.1'</span>
|
||||
compile <span class="token string">'com.facebook.fresco:webpsupport:1.0.1'</span>
|
||||
|
||||
<span class="token comment" spellcheck="true"> // For WebP support, without animations
|
||||
</span> compile <span class="token string">'com.facebook.fresco:webpsupport:0.11.0'</span>
|
||||
</span> compile <span class="token string">'com.facebook.fresco:webpsupport:1.0.1'</span>
|
||||
<span class="token punctuation">}</span></div><p>Also, if you use GIF with ProGuard, you will need to add this rule in <code>proguard-rules.pro</code> :</p><div class="prism language-javascript"><span class="token operator">-</span>keep class <span class="token class-name">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>imagepipeline<span class="token punctuation">.</span>animated<span class="token punctuation">.</span>factory<span class="token punctuation">.</span>AnimatedFactoryImpl</span> <span class="token punctuation">{</span>
|
||||
public <span class="token function">AnimatedFactoryImpl<span class="token punctuation">(</span></span>com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>imagepipeline<span class="token punctuation">.</span>bitmaps<span class="token punctuation">.</span>PlatformBitmapFactory<span class="token punctuation">,</span> com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>imagepipeline<span class="token punctuation">.</span>core<span class="token punctuation">.</span>ExecutorSupplier<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/image.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="onerror"></a>onError?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/image.html#onerror">#</a></h4><div><p>Invoked on load error with <code>{nativeEvent: {error}}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/image.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with
|
||||
@@ -756,7 +756,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flexDirection<span class="token punctuation">:</span> <span class="token string">'row'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Image
|
||||
source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
url<span class="token punctuation">:</span> <span class="token string">'ImageInBundle'</span><span class="token punctuation">,</span>
|
||||
uri<span class="token punctuation">:</span> <span class="token string">'ImageInBundle'</span><span class="token punctuation">,</span>
|
||||
bundle<span class="token punctuation">:</span> <span class="token string">'UIExplorerBundle'</span><span class="token punctuation">,</span>
|
||||
width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||||
height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||||
@@ -765,7 +765,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
<span class="token operator">/</span><span class="token operator">></span>
|
||||
<Image
|
||||
source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
url<span class="token punctuation">:</span> <span class="token string">'ImageInAssetCatalog'</span><span class="token punctuation">,</span>
|
||||
uri<span class="token punctuation">:</span> <span class="token string">'ImageInAssetCatalog'</span><span class="token punctuation">,</span>
|
||||
bundle<span class="token punctuation">:</span> <span class="token string">'UIExplorerBundle'</span><span class="token punctuation">,</span>
|
||||
width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||||
height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||||
|
||||
@@ -16,7 +16,15 @@
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<span class="token comment" spellcheck="true">
|
||||
// BAD
|
||||
</span><Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> <span class="token string">'https://facebook.github.io/react/img/logo_og.png'</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></div><h3><a class="anchor" name="cache-control-ios-only"></a>Cache Control (iOS Only) <a class="hash-link" href="docs/images.html#cache-control-ios-only">#</a></h3><p>In some cases you might only want to display an image if it is already in the local cache, i.e. a low resolution placeholder until a higher resolution is available. In other cases you do not care if the image is outdated and are willing to display an outdated image to save bandwidth. The <code>cache</code> source property gives you control over how the network layer interacts with the cache.</p><ul><li><code>default</code>: Use the native platforms default strategy.</li><li><code>reload</code>: The data for the URL will be loaded from the originating source.
|
||||
</span><Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> <span class="token string">'https://facebook.github.io/react/img/logo_og.png'</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></div><h3><a class="anchor" name="network-requests-for-images"></a>Network Requests for Images <a class="hash-link" href="docs/images.html#network-requests-for-images">#</a></h3><p> If you would like to set such things as the HTTP-Verb, Headers or a Body along with the image request, you may do this by defining these properties on the source object:</p><div class="prism language-javascript"> <Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
uri<span class="token punctuation">:</span> <span class="token string">'https://facebook.github.io/react/img/logo_og.png'</span><span class="token punctuation">,</span>
|
||||
method<span class="token punctuation">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
|
||||
headers<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
Pragma<span class="token punctuation">:</span> <span class="token string">'no-cache'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
body<span class="token punctuation">:</span> <span class="token string">'Your Body goes here'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></div><h3><a class="anchor" name="cache-control-ios-only"></a>Cache Control (iOS Only) <a class="hash-link" href="docs/images.html#cache-control-ios-only">#</a></h3><p>In some cases you might only want to display an image if it is already in the local cache, i.e. a low resolution placeholder until a higher resolution is available. In other cases you do not care if the image is outdated and are willing to display an outdated image to save bandwidth. The <code>cache</code> source property gives you control over how the network layer interacts with the cache.</p><ul><li><code>default</code>: Use the native platforms default strategy.</li><li><code>reload</code>: The data for the URL will be loaded from the originating source.
|
||||
No existing cache data should be used to satisfy a URL load request.</li><li><code>force-cache</code>: The existing cached data will be used to satisfy the request,
|
||||
regardless of its age or expiration date. If there is no existing data in the cache
|
||||
corresponding the request, the data is loaded from the originating source.</li><li><code>only-if-cached</code>: The existing cache data will be used to satisfy a request, regardless of
|
||||
|
||||
@@ -125,7 +125,7 @@ of the snapping to the scroll view.
|
||||
- <code>end</code> will align the snap at the right (horizontal) or bottom (vertical)</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="snaptointerval"></a><span class="platform">ios</span>snapToInterval?: <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/scrollview.html#snaptointerval">#</a></h4><div><p>When set, causes the scroll view to stop at multiples of the value of
|
||||
<code>snapToInterval</code>. This can be used for paginating through children
|
||||
that have lengths smaller than the scroll view. Used in combination
|
||||
with <code>snapToAlignment</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">PropTypes.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="methodTitle"><a class="anchor" name="scrollto"></a>scrollTo<span class="methodType">(y?: number, object, 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>Example:</p><p><code>scrollTo({x: 0; y: 0; animated: true})</code></p><p>Note: The weird function signature is due to the fact that, for historical reasons,
|
||||
with <code>snapToAlignment</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">PropTypes.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="methodTitle"><a class="anchor" name="scrollto"></a>scrollTo<span class="methodType">(y?: number, object, 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>Example:</p><p><code>scrollTo({x: 0, y: 0, animated: true})</code></p><p>Note: The weird function signature is due to the fact that, for historical reasons,
|
||||
the function also accepts separate arguments as an 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="methodTitle"><a class="anchor" name="scrolltoend"></a>scrollToEnd<span class="methodType">(options?: object)</span> <a class="hash-link" href="docs/scrollview.html#scrolltoend">#</a></h4><div><p>If this is a vertical ScrollView scrolls to the bottom.
|
||||
If this is a horizontal ScrollView scrolls to the right.</p><p>Use <code>scrollToEnd({animated: true})</code> for smooth animated scrolling,
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -32,7 +32,7 @@ vibration length on iOS is fixed<span class="token punctuation">.</span>
|
||||
pattern controls durations BETWEEN each vibration only<span class="token punctuation">.</span>
|
||||
|
||||
arg <span class="token number">0</span><span class="token punctuation">:</span> duration to wait before turning the vibrator on<span class="token punctuation">.</span>
|
||||
subsequent args<span class="token punctuation">:</span> duration to wait before next vibrattion<span class="token punctuation">.</span>
|
||||
subsequent args<span class="token punctuation">:</span> duration to wait before next vibration<span class="token punctuation">.</span>
|
||||
`<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+3
-3
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user