update website

This commit is contained in:
Travis CI
2015-05-07 00:56:01 +00:00
parent 32900563ac
commit 103ae9902a
4 changed files with 9 additions and 7 deletions
+1 -1
View File
@@ -21,7 +21,7 @@ rounded buttons, shadows, and other resizable assets. More info on
network.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="resizemode"></a>resizeMode <span class="propType">enum(&#x27;cover&#x27;, &#x27;contain&#x27;, &#x27;stretch&#x27;)</span> <a class="hash-link" href="#resizemode">#</a></h4><div><p>Determines how to resize the image when the frame doesn&#x27;t match the raw
image dimensions.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="source"></a>source <span class="propType">{uri: string}</span> <a class="hash-link" href="#source">#</a></h4><div><p><code>uri</code> is a string representing the resource identifier for the image, which
could be an http address, a local file path, or the name of a static image
resource (which should be wrapped in the <code>required(&#x27;image!name&#x27;)</code> function).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">borderWidth <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">resizeMode <span class="propType">Object.keys(ImageResizeMode)</span></h6></div><div class="prop"><h6 class="propTitle">tintColor <span class="propType">string</span></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="#testid">#</a></h4><div><p>A unique identifier for this element to be used in UI Automation
resource (which should be wrapped in the <code>required(&#x27;image!name&#x27;)</code> function).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="transformproptypes.html#style">TransformPropTypes#style...</a></h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">borderWidth <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">resizeMode <span class="propType">Object.keys(ImageResizeMode)</span></h6></div><div class="prop"><h6 class="propTitle">tintColor <span class="propType">string</span></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="#testid">#</a></h4><div><p>A unique identifier for this element to be used in UI Automation
testing scripts.</p></div></div></div></div><div><h3><a class="anchor" name="description"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/docs/Image.md">Edit on GitHub</a>Description <a class="hash-link" href="#description">#</a></h3><div><p>Displaying images is a fascinating subject; React Native uses some cool tricks to make it a better experience.</p><h2><a class="anchor" name="no-automatic-sizing"></a>No Automatic Sizing <a class="hash-link" href="#no-automatic-sizing">#</a></h2><p>If you don&#x27;t give a size to an image, the browser is going to render a 0x0 element, download the image, and then render the image based with the correct size. The big issue with this behavior is that your UI is going to jump all around as images load, this makes for a very bad user experience.</p><p>In React Native, this behavior is intentionally not implemented. It is more work for the developer to know the dimensions (or just aspect ratio) of the image in advance, but we believe that it leads to a better user experience.</p><h2><a class="anchor" name="background-image-via-nesting"></a>Background Image via Nesting <a class="hash-link" href="#background-image-via-nesting">#</a></h2><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, simply create a normal <code>&lt;Image&gt;</code> component and add whatever children to it you would like to layer on top of it.</p><div class="prism language-javascript"><span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;Image source<span class="token operator">=</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">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>Inside&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
+6 -4
View File
@@ -41,10 +41,12 @@ deepest active navigator.</p><p>Navigation context objects contain the following
route. All scenes after it will be unmounted</li><li><code>popToTop()</code> - Pop to the first scene in the stack, unmounting every
other scene</li></ul></div><h3><a class="anchor" name="props"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/Navigator/Navigator.js">Edit on GitHub</a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="configurescene"></a>configureScene <span class="propType">function</span> <a class="hash-link" href="#configurescene">#</a></h4><div><p>Optional function that allows configuration about scene animations and
gestures. Will be invoked with the route and should return a scene
configuration object</p><div class="prism language-javascript"><span class="token punctuation">(</span>route<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> Navigator<span class="token punctuation">.</span>SceneConfigs<span class="token punctuation">.</span>FloatFromRight</div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialroute"></a>initialRoute <span class="propType">object</span> <a class="hash-link" href="#initialroute">#</a></h4><div><p>Provide a single &quot;route&quot; to start on. A route is an arbitrary object
that the navigator will use to identify each scene before rendering.
Either initialRoute or initialRouteStack is required.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialroutestack"></a>initialRouteStack <span class="propType">[object]</span> <a class="hash-link" href="#initialroutestack">#</a></h4><div><p>Provide a set of routes to initially mount the scenes for. Required if no
initialRoute is provided</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="navigationbar"></a>navigationBar <span class="propType">node</span> <a class="hash-link" href="#navigationbar">#</a></h4><div><p>Optionally provide a navigation bar that persists across scene
configuration object</p><div class="prism language-javascript"><span class="token punctuation">(</span>route<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> Navigator<span class="token punctuation">.</span>SceneConfigs<span class="token punctuation">.</span>FloatFromRight</div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialroute"></a>initialRoute <span class="propType">object</span> <a class="hash-link" href="#initialroute">#</a></h4><div><p>Specify a route to start on. A route is an object that the navigator
will use to identify each scene to render. <code>initialRoute</code> must be
a route in the <code>initialRouteStack</code> if both props are provided. The
<code>initialRoute</code> will default to the last item in the <code>initialRouteStack</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialroutestack"></a>initialRouteStack <span class="propType">[object]</span> <a class="hash-link" href="#initialroutestack">#</a></h4><div><p>Provide a set of routes to initially mount. Required if no initialRoute
is provided. Otherwise, it will default to an array containing only the
<code>initialRoute</code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="navigationbar"></a>navigationBar <span class="propType">node</span> <a class="hash-link" href="#navigationbar">#</a></h4><div><p>Optionally provide a navigation bar that persists across scene
transitions</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="navigator"></a>navigator <span class="propType">object</span> <a class="hash-link" href="#navigator">#</a></h4><div><p>Optionally provide the navigator object from a parent Navigator</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondidfocus"></a>onDidFocus <span class="propType">function</span> <a class="hash-link" href="#ondidfocus">#</a></h4><div><p>Will be called with the new route of each scene after the transition is
complete or after the initial mounting</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onitemref"></a>onItemRef <span class="propType">function</span> <a class="hash-link" href="#onitemref">#</a></h4><div><p>Will be called with (ref, indexInStack) when the scene ref changes</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onwillfocus"></a>onWillFocus <span class="propType">function</span> <a class="hash-link" href="#onwillfocus">#</a></h4><div><p>Will emit the target route upon mounting and before each nav transition</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderscene"></a>renderScene <span class="propType">function</span> <a class="hash-link" href="#renderscene">#</a></h4><div><p>Required function which renders the scene for a given route. Will be
invoked with the route and the navigator object</p><div class="prism language-javascript"><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>
+1 -1
View File
@@ -46,7 +46,7 @@ The default value is true.</p></div></div><div class="prop"><h4 class="propTitle
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="style"></a>style <span class="propType">style</span> <a class="hash-link" href="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderBottomColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderLeftColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">borderRightColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderTopColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">overflow <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span></h6></div><div class="prop"><h6 class="propTitle">shadowColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">shadowOffset <span class="propType">{width: number, height: number}</span></h6></div><div class="prop"><h6 class="propTitle">shadowOpacity <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">shadowRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">transform <span class="propType">[object]</span></h6></div><div class="prop"><h6 class="propTitle">transformMatrix <span class="propType">[number]</span></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="zoomscale"></a>zoomScale <span class="propType">number</span> <a class="hash-link" href="#zoomscale">#</a></h4><div><p>The current scale of the scroll view content. The default value is 1.0.</p></div></div></div></div><div><h3><a class="anchor" name="examples"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ScrollViewExample.js">Edit on GitHub</a>Examples <a class="hash-link" href="#examples">#</a></h3><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
with <code>horizontal={true}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="transformproptypes.html#style">TransformPropTypes#style...</a></h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderBottomColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderLeftColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">borderRightColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderTopColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">overflow <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span></h6></div><div class="prop"><h6 class="propTitle">shadowColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">shadowOffset <span class="propType">{width: number, height: number}</span></h6></div><div class="prop"><h6 class="propTitle">shadowOpacity <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">shadowRadius <span class="propType">number</span></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="zoomscale"></a>zoomScale <span class="propType">number</span> <a class="hash-link" href="#zoomscale">#</a></h4><div><p>The current scale of the scroll view content. The default value is 1.0.</p></div></div></div></div><div><h3><a class="anchor" name="examples"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ScrollViewExample.js">Edit on GitHub</a>Examples <a class="hash-link" href="#examples">#</a></h3><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> <span class="token punctuation">{</span>
+1 -1
View File
@@ -41,7 +41,7 @@ view doesn&#x27;t have to be redrawn and display lists don&#x27;t need to be
re-executed. The texture can just be re-used and re-composited with
different parameters. The downside is that this can use up limited video
memory, so this prop should be set back to false at the end of the
interaction/animation.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderBottomColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderLeftColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">borderRightColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderTopColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">overflow <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span></h6></div><div class="prop"><h6 class="propTitle">shadowColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">shadowOffset <span class="propType">{width: number, height: number}</span></h6></div><div class="prop"><h6 class="propTitle">shadowOpacity <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">shadowRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">transform <span class="propType">[object]</span></h6></div><div class="prop"><h6 class="propTitle">transformMatrix <span class="propType">[number]</span></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div></div></div><div><h3><a class="anchor" name="examples"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ViewExample.js">Edit on GitHub</a>Examples <a class="hash-link" href="#examples">#</a></h3><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
interaction/animation.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="transformproptypes.html#style">TransformPropTypes#style...</a></h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderBottomColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderLeftColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">borderRightColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderTopColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">overflow <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span></h6></div><div class="prop"><h6 class="propTitle">shadowColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">shadowOffset <span class="propType">{width: number, height: number}</span></h6></div><div class="prop"><h6 class="propTitle">shadowOpacity <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">shadowRadius <span class="propType">number</span></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div></div></div><div><h3><a class="anchor" name="examples"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ViewExample.js">Edit on GitHub</a>Examples <a class="hash-link" href="#examples">#</a></h3><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> <span class="token punctuation">{</span>