Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated docs for next

Browse Source
This commit is contained in:
Website Deployment Script
2016-09-09 14:28:28 +00:00
parent b961e722b4
commit d06641aaa9
4 changed files with 37 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
releases/next/docs/image.html
+7 -1
View File
@@ -85,7 +85,13 @@ as the background.</p><p>For details of how this works under the hood, see
<a href="http://frescolib.org/docs/rounded-corners-and-circles.html">http://frescolib.org/docs/rounded-corners-and-circles.html</a></p></div></h6></div></div><div><blockquote><p><code>ImageResizeMode</code> is an <code>Enum</code> for different image resizing modes, set via the
<code>resizeMode</code> style property on <code>Image</code> components. The values are <code>contain</code>, <code>cover</code>,
<code>stretch</code>, <code>center</code>, <code>repeat</code>.</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/image.html#testid">#</a></h4><div><p>A unique identifier for this element to be used in UI Automation
testing scripts.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitylabel"></a><span class="platform">ios</span>accessibilityLabel <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/image.html#accessibilitylabel">#</a></h4><div><p>The text that&#x27;s read by the screen reader when the user interacts with
testing scripts.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="resizemethod"></a><span class="platform">android</span>resizeMethod <span class="propType">PropTypes.oneOf([&#x27;auto&#x27;, &#x27;resize&#x27;, &#x27;scale&#x27;])</span> <a class="hash-link" href="docs/image.html#resizemethod">#</a></h4><div><p>The mechanism that should be used to resize the image when the image&#x27;s dimensions
differ from the image view&#x27;s dimensions. Defaults to <code>auto</code>.</p><ul><li><p><code>auto</code>: Use heuristics to pick between <code>resize</code> and <code>scale</code>.</p></li><li><p><code>resize</code>: A software operation which changes the encoded image in memory before it
gets decoded. This should be used instead of <code>scale</code> when the image is much larger
than the view.</p></li><li><p><code>scale</code>: The image gets drawn downscaled or upscaled. Compared to <code>resize</code>, <code>scale</code> is
faster (usually hardware accelerated) and produces higher quality images. This
should be used if the image is smaller than the view. It should also be used if the
image is slightly bigger than the view.</p></li></ul><p>More details about <code>resize</code> and <code>scale</code> can be found at <a href="http://frescolib.org/docs/resizing-rotating.html">http://frescolib.org/docs/resizing-rotating.html</a>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitylabel"></a><span class="platform">ios</span>accessibilityLabel <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/image.html#accessibilitylabel">#</a></h4><div><p>The text that&#x27;s read by the screen reader when the user interacts with
the image.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a><span class="platform">ios</span>accessible <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/image.html#accessible">#</a></h4><div><p>When true, indicates the image is an accessibility element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="blurradius"></a><span class="platform">ios</span>blurRadius <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/image.html#blurradius">#</a></h4><div><p>blurRadius: the blur radius of the blur filter added to the image</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="capinsets"></a><span class="platform">ios</span>capInsets <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/image.html#capinsets">#</a></h4><div><p>When the image is resized, the corners of the size specified
by <code>capInsets</code> will stay a fixed size, but the center content and borders
of the image will be stretched. This is useful for creating resizable
releases/next/docs/using-navigators.html
+28 -25
View File
@@ -42,43 +42,46 @@ AppRegistry<span class="token punctuation">.</span><span class="token function">
index<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>
navigator<span class="token punctuation">.</span><span class="token function">pop<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>A more complete example that demonstrates the pushing and popping of routes could therefore look something like this:</p><div class="prism language-javascript">import React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component<span class="token punctuation">,</span> PropTypes <span class="token punctuation">}</span> from <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
import <span class="token punctuation">{</span> Navigator<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> TouchableHighlight<span class="token punctuation">,</span> View <span class="token punctuation">}</span> from <span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">;</span>
navigator<span class="token punctuation">.</span><span class="token function">pop<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>A more complete example that demonstrates the pushing and popping of routes. Edit your index*.js file to look something like this:</p><div class="prism language-javascript">import React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> from <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
import <span class="token punctuation">{</span> AppRegistry<span class="token punctuation">,</span> Navigator<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> View <span class="token punctuation">}</span> from <span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">;</span>
export default class <span class="token class-name">SimpleNavigationApp</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
import MyScene from <span class="token string">&#x27;./MyScene&#x27;</span><span class="token punctuation">;</span>
class <span class="token class-name">SimpleNavigationApp</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;Navigator
initialRoute<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">&#x27;My Initial Scene&#x27;</span><span class="token punctuation">,</span> index<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>
renderScene<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>route<span class="token punctuation">,</span> navigator<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;MyScene
title<span class="token operator">=</span><span class="token punctuation">{</span>route<span class="token punctuation">.</span>title<span class="token punctuation">}</span>
renderScene<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>route<span class="token punctuation">,</span> navigator<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span>
&lt;MyScene
title<span class="token operator">=</span><span class="token punctuation">{</span>route<span class="token punctuation">.</span>title<span class="token punctuation">}</span>
<span class="token comment" spellcheck="true"> // Function to call when a new scene should be displayed
</span> onForward<span class="token operator">=</span><span class="token punctuation">{</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
const nextIndex <span class="token operator">=</span> route<span class="token punctuation">.</span>index <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
navigator<span class="token punctuation">.</span><span class="token function">push<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">&#x27;Scene &#x27;</span> <span class="token operator">+</span> nextIndex<span class="token punctuation">,</span>
index<span class="token punctuation">:</span> nextIndex<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 comment" spellcheck="true"> // Function to call when a new scene should be displayed
</span> onForward<span class="token operator">=</span><span class="token punctuation">{</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
const nextIndex <span class="token operator">=</span> route<span class="token punctuation">.</span>index <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
navigator<span class="token punctuation">.</span><span class="token function">push<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">&#x27;Scene &#x27;</span> <span class="token operator">+</span> nextIndex<span class="token punctuation">,</span>
index<span class="token punctuation">:</span> nextIndex<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 comment" spellcheck="true"> // Function to call to go back to the previous scene
</span> onBack<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>route<span class="token punctuation">.</span>index <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
navigator<span class="token punctuation">.</span><span class="token function">pop<span class="token punctuation">(</span></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 operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span>
<span class="token comment" spellcheck="true"> // Function to call to go back to the previous scene
</span> onBack<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>route<span class="token punctuation">.</span>index <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
navigator<span class="token punctuation">.</span><span class="token function">pop<span class="token punctuation">(</span></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 operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
class <span class="token class-name">MyScene</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">&#x27;SimpleNavigationApp&#x27;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> SimpleNavigationApp<span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>And your MyScene.js to match this:</p><div class="prism language-javascript">import React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component<span class="token punctuation">,</span> PropTypes <span class="token punctuation">}</span> from <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
import <span class="token punctuation">{</span> View<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> TouchableHighlight <span class="token punctuation">}</span> from <span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">;</span>
export default class <span class="token class-name">MyScene</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
static propTypes <span class="token operator">=</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
onForward<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>func<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
releases/next/versions.html
+1 -1
View File
File diff suppressed because one or more lines are too long
versions.html
+1 -1
View File
File diff suppressed because one or more lines are too long