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

update website

Browse Source
This commit is contained in:
Travis CI
2015-08-07 17:43:15 +00:00
parent 753d7c2137
commit eb0df1df1f
21 changed files with 149 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/view.html
+10 -10
View File
@@ -9,15 +9,15 @@ wraps two colored boxes and custom component in a row with padding.</p><div clas
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;red&#x27;</span><span class="token punctuation">,</span> flex<span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;MyCustomComponent <span class="token punctuation">{</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>customProps<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span></div><p><code>View</code>s are designed to be used with <code>StyleSheet</code>s for clarity and
performance, although inline styles are also supported.</p></div><h3><a class="anchor" name="props"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/View/View.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="accessibilitylabel"></a>accessibilityLabel <span class="propType">string</span> <a class="hash-link" href="#accessibilitylabel">#</a></h4><div><p>Overrides the text that&#x27;s read by the screen reader when the user interacts
with the element. By default, the label is constructed by traversing all the
children and accumulating all the Text nodes separated by space.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitytraits"></a>accessibilityTraits <span class="propType">AccessibilityTraits, [AccessibilityTraits]</span> <a class="hash-link" href="#accessibilitytraits">#</a></h4><div><p>Provides additional traits to screen reader. By default no traits are
provided unless specified otherwise in element</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a>accessible <span class="propType">bool</span> <a class="hash-link" href="#accessible">#</a></h4><div><p>When true, indicates that the view is an accessibility element. By default,
all the touchable elements are accessible.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onacccessibilitytap"></a>onAcccessibilityTap <span class="propType">function</span> <a class="hash-link" href="#onacccessibilitytap">#</a></h4><div><p>When <code>accessible</code> is true, the system will try to invoke this function
when the user performs accessibility tap gesture.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout <span class="propType">function</span> <a class="hash-link" href="#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with</p><p> {nativeEvent: { layout: {x, y, width, height}}}.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmagictap"></a>onMagicTap <span class="propType">function</span> <a class="hash-link" href="#onmagictap">#</a></h4><div><p>When <code>accessible</code> is true, the system will invoke this function when the
user performs the magic tap gesture.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmoveshouldsetresponder"></a>onMoveShouldSetResponder <span class="propType">function</span> <a class="hash-link" href="#onmoveshouldsetresponder">#</a></h4><div><p>For most touch interactions, you&#x27;ll simply want to wrap your component in
performance, although inline styles are also supported.</p></div><h3><a class="anchor" name="props"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/View/View.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="onresponderrelease"></a>onResponderRelease <span class="propType">function</span> <a class="hash-link" href="#onresponderrelease">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a>accessible <span class="propType">bool</span> <a class="hash-link" href="#accessible">#</a></h4><div><p>When true, indicates that the view is an accessibility element. By default,
all the touchable elements are accessible.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitytraits"></a>accessibilityTraits <span class="propType">AccessibilityTraits, [AccessibilityTraits]</span> <a class="hash-link" href="#accessibilitytraits">#</a></h4><div><p>Provides additional traits to screen reader. By default no traits are
provided unless specified otherwise in element</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onacccessibilitytap"></a>onAcccessibilityTap <span class="propType">function</span> <a class="hash-link" href="#onacccessibilitytap">#</a></h4><div><p>When <code>accessible</code> is true, the system will try to invoke this function
when the user performs accessibility tap gesture.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmagictap"></a>onMagicTap <span class="propType">function</span> <a class="hash-link" href="#onmagictap">#</a></h4><div><p>When <code>accessible</code> is true, the system will invoke this function when the
user performs the magic tap gesture.</p></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 class="prop"><h4 class="propTitle"><a class="anchor" name="onmoveshouldsetresponder"></a>onMoveShouldSetResponder <span class="propType">function</span> <a class="hash-link" href="#onmoveshouldsetresponder">#</a></h4><div><p>For most touch interactions, you&#x27;ll simply want to wrap your component in
<code>TouchableHighlight</code> or <code>TouchableOpacity</code>. Check out <code>Touchable.js</code>,
<code>ScrollResponder.js</code> and <code>ResponderEventPlugin.js</code> for more discussion.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrespondergrant"></a>onResponderGrant <span class="propType">function</span> <a class="hash-link" href="#onrespondergrant">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrespondermove"></a>onResponderMove <span class="propType">function</span> <a class="hash-link" href="#onrespondermove">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderreject"></a>onResponderReject <span class="propType">function</span> <a class="hash-link" href="#onresponderreject">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderrelease"></a>onResponderRelease <span class="propType">function</span> <a class="hash-link" href="#onresponderrelease">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderterminate"></a>onResponderTerminate <span class="propType">function</span> <a class="hash-link" href="#onresponderterminate">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderterminationrequest"></a>onResponderTerminationRequest <span class="propType">function</span> <a class="hash-link" href="#onresponderterminationrequest">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onstartshouldsetresponder"></a>onStartShouldSetResponder <span class="propType">function</span> <a class="hash-link" href="#onstartshouldsetresponder">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onstartshouldsetrespondercapture"></a>onStartShouldSetResponderCapture <span class="propType">function</span> <a class="hash-link" href="#onstartshouldsetrespondercapture">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pointerevents"></a>pointerEvents <span class="propType">enum(&#x27;box-none&#x27;, &#x27;none&#x27;, &#x27;box-only&#x27;, &#x27;auto&#x27;)</span> <a class="hash-link" href="#pointerevents">#</a></h4><div><p>In the absence of <code>auto</code> property, <code>none</code> is much like <code>CSS</code>&#x27;s <code>none</code>
<code>ScrollResponder.js</code> and <code>ResponderEventPlugin.js</code> for more discussion.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrespondergrant"></a>onResponderGrant <span class="propType">function</span> <a class="hash-link" href="#onrespondergrant">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrespondermove"></a>onResponderMove <span class="propType">function</span> <a class="hash-link" href="#onrespondermove">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderreject"></a>onResponderReject <span class="propType">function</span> <a class="hash-link" href="#onresponderreject">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitylabel"></a>accessibilityLabel <span class="propType">string</span> <a class="hash-link" href="#accessibilitylabel">#</a></h4><div><p>Overrides the text that&#x27;s read by the screen reader when the user interacts
with the element. By default, the label is constructed by traversing all the
children and accumulating all the Text nodes separated by space.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderterminate"></a>onResponderTerminate <span class="propType">function</span> <a class="hash-link" href="#onresponderterminate">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderterminationrequest"></a>onResponderTerminationRequest <span class="propType">function</span> <a class="hash-link" href="#onresponderterminationrequest">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onstartshouldsetresponder"></a>onStartShouldSetResponder <span class="propType">function</span> <a class="hash-link" href="#onstartshouldsetresponder">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onstartshouldsetrespondercapture"></a>onStartShouldSetResponderCapture <span class="propType">function</span> <a class="hash-link" href="#onstartshouldsetrespondercapture">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout <span class="propType">function</span> <a class="hash-link" href="#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with</p><p> {nativeEvent: { layout: {x, y, width, height}}}.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pointerevents"></a>pointerEvents <span class="propType">enum(&#x27;box-none&#x27;, &#x27;none&#x27;, &#x27;box-only&#x27;, &#x27;auto&#x27;)</span> <a class="hash-link" href="#pointerevents">#</a></h4><div><p>In the absence of <code>auto</code> property, <code>none</code> is much like <code>CSS</code>&#x27;s <code>none</code>
value. <code>box-none</code> is as if you had applied the <code>CSS</code> class:</p><div class="prism language-javascript"><span class="token punctuation">.</span>box<span class="token operator">-</span>none <span class="token punctuation">{</span>
pointer<span class="token operator">-</span>events<span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
@@ -32,7 +32,7 @@ value. <code>box-none</code> is as if you had applied the <code>CSS</code> class
already deviating from the spec by adding additional modes, we opt to not
include <code>pointerEvents</code> on <code>style</code>. On some platforms, we would need to
implement it as a <code>className</code> anyways. Using <code>style</code> or not is an
implementation detail of the platform.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews <span class="propType">bool</span> <a class="hash-link" href="#removeclippedsubviews">#</a></h4><div><p>This is a special performance property exposed by RCTView and is useful
implementation detail of the platform.</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="transforms.html#proptypes">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backfaceVisibility <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span></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">borderTopColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderRightColor <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">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">borderTopLeftRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">borderTopRightRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">borderBottomLeftRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">borderBottomRightRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">borderStyle <span class="propType">enum(&#x27;solid&#x27;, &#x27;dotted&#x27;, &#x27;dashed&#x27;)</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="removeclippedsubviews"></a>removeClippedSubviews <span class="propType">bool</span> <a class="hash-link" href="#removeclippedsubviews">#</a></h4><div><p>This is a special performance property exposed by RCTView and is useful
for scrolling content when there are many subviews, most of which are
offscreen. For this property to be effective, it must be applied to a
view that contains many subviews that extend outside its bound. The
@@ -44,7 +44,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"><a href="transforms.html#proptypes">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backfaceVisibility <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span></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">borderBottomLeftRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">borderBottomRightRadius <span class="propType">number</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">borderStyle <span class="propType">enum(&#x27;solid&#x27;, &#x27;dotted&#x27;, &#x27;dashed&#x27;)</span></h6></div><div class="prop"><h6 class="propTitle">borderTopColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderTopLeftRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">borderTopRightRadius <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">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>
interaction/animation.</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> Platform <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;Platform&#x27;</span><span class="token punctuation">)</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>