mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
update website
This commit is contained in:
Travis CI
+2
-1
@@ -48,7 +48,8 @@ is exactly what was put into the data source, but it's also possible to
|
||||
provide custom extractors. ListView can be notified when a row is
|
||||
being highlighted by calling highlightRow function. The separators above and
|
||||
below will be hidden when a row is highlighted. The highlighted state of
|
||||
a row can be reset by calling highlightRow(null).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendersectionheader"></a>renderSectionHeader <span class="propType">function</span> <a class="hash-link" href="#rendersectionheader">#</a></h4><div><p>(sectionData, sectionID) => renderable</p><p>If provided, a sticky header is rendered for this section. The sticky
|
||||
a row can be reset by calling highlightRow(null).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderscrollcomponent"></a>renderScrollComponent <span class="propType">function</span> <a class="hash-link" href="#renderscrollcomponent">#</a></h4><div><p>(props) => renderable</p><p>A function that returns the scrollable component in which the list rows
|
||||
are rendered. Defaults to returning a ScrollView with the given props.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendersectionheader"></a>renderSectionHeader <span class="propType">function</span> <a class="hash-link" href="#rendersectionheader">#</a></h4><div><p>(sectionData, sectionID) => renderable</p><p>If provided, a sticky header is rendered for this section. The sticky
|
||||
behavior means that it will scroll with the content at the top of the
|
||||
section until it reaches the top of the screen, at which point it will
|
||||
stick to the top until it is pushed off the screen by the next section
|
||||
|
||||
@@ -107,7 +107,7 @@ passes the segment's value as an argument</p></div></div><div class="prop">
|
||||
|
||||
<span class="token function">_onChange<span class="token punctuation">(</span></span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
selectedIndex<span class="token punctuation">:</span> event<span class="token punctuation">.</span>nativeEvent<span class="token punctuation">.</span>selectedIndex<span class="token punctuation">,</span>
|
||||
selectedIndex<span class="token punctuation">:</span> event<span class="token punctuation">.</span>nativeEvent<span class="token punctuation">.</span>selectedSegmentIndex<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>
|
||||
|
||||
|
||||
+3
-1
@@ -11,9 +11,11 @@
|
||||
<span class="token keyword">var</span> TabBarExample <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
statics<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'<TabBarIOS>'</span><span class="token punctuation">,</span>
|
||||
description<span class="token punctuation">:</span> <span class="token string">'Tab-based navigation.'</span>
|
||||
description<span class="token punctuation">:</span> <span class="token string">'Tab-based navigation.'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
|
||||
displayName<span class="token punctuation">:</span> <span class="token string">'TabBarExample'</span><span class="token punctuation">,</span>
|
||||
|
||||
getInitialState<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
selectedTab<span class="token punctuation">:</span> <span class="token string">'redTab'</span><span class="token punctuation">,</span>
|
||||
|
||||
+39
-1
@@ -27,7 +27,7 @@ each other on account of the literal newlines:</p><div class="prism language-jav
|
||||
layout, including line wrapping, such that the total number of lines does
|
||||
not exceed this number.</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="onpress"></a>onPress <span class="propType">function</span> <a class="hash-link" href="#onpress">#</a></h4><div><p>This function is called on press. Text intrinsically supports press
|
||||
handling with a default highlight state (which can be disabled with
|
||||
<code>suppressHighlighting</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="view.html#style">View#style...</a></h6></div><div class="prop"><h6 class="propTitle">color <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">fontFamily <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">fontSize <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">fontStyle <span class="propType">enum('normal', 'italic')</span></h6></div><div class="prop"><h6 class="propTitle">fontWeight <span class="propType">enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')</span></h6></div><div class="prop"><h6 class="propTitle">letterSpacing <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">lineHeight <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">textAlign <span class="propType">enum("auto", 'left', 'right', 'center', 'justify')</span></h6></div><div class="prop"><h6 class="propTitle">writingDirection <span class="propType">enum("auto", 'ltr', 'rtl')</span></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="suppresshighlighting"></a>suppressHighlighting <span class="propType">bool</span> <a class="hash-link" href="#suppresshighlighting">#</a></h4><div><p>When true, no visual change is made when text is pressed down. By
|
||||
<code>suppressHighlighting</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="view.html#style">View#style...</a></h6></div><div class="prop"><h6 class="propTitle">color <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">fontFamily <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">fontSize <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">fontStyle <span class="propType">enum('normal', 'italic')</span></h6></div><div class="prop"><h6 class="propTitle">fontWeight <span class="propType">enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')</span></h6></div><div class="prop"><h6 class="propTitle">letterSpacing <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">lineHeight <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">textAlign <span class="propType">enum("auto", 'left', 'right', 'center', 'justify')</span></h6></div><div class="prop"><h6 class="propTitle">textDecorationColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">textDecorationLine <span class="propType">enum("none", 'underline', 'line-through', 'underline line-through')</span></h6></div><div class="prop"><h6 class="propTitle">textDecorationStyle <span class="propType">enum("solid", 'double', 'dotted', 'dashed')</span></h6></div><div class="prop"><h6 class="propTitle">writingDirection <span class="propType">enum("auto", 'ltr', 'rtl')</span></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="suppresshighlighting"></a>suppressHighlighting <span class="propType">bool</span> <a class="hash-link" href="#suppresshighlighting">#</a></h4><div><p>When true, no visual change is made when text is pressed down. By
|
||||
default, a gray oval highlights the text on press down.</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></div><div><h3><a class="anchor" name="description"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/docs/Text.md">Edit on GitHub</a>Description <a class="hash-link" href="#description">#</a></h3><div><h2><a class="anchor" name="nested-text"></a>Nested Text <a class="hash-link" href="#nested-text">#</a></h2><p>In iOS, the way to display formatted text is by using <code>NSAttributedString</code>: you give the text that you want to display and annotate ranges with some specific formatting. In practice, this is very tedious. For React Native, we decided to use web paradigm for this where you can nest text to achieve the same effect.</p><div class="prism language-javascript"><Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
I am bold
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
@@ -246,6 +246,44 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
<<span class="token operator">/</span>View<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 punctuation">,</span> <span class="token punctuation">{</span>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Text Decoration'</span><span class="token punctuation">,</span>
|
||||
render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<View<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textDecorationLine<span class="token punctuation">:</span> <span class="token string">'underline'</span><span class="token punctuation">,</span> textDecorationStyle<span class="token punctuation">:</span> <span class="token string">'solid'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Solid underline
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textDecorationLine<span class="token punctuation">:</span> <span class="token string">'underline'</span><span class="token punctuation">,</span> textDecorationStyle<span class="token punctuation">:</span> <span class="token string">'double'</span><span class="token punctuation">,</span> textDecorationColor<span class="token punctuation">:</span> <span class="token string">'#ff0000'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Double underline <span class="token keyword">with</span> custom color
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textDecorationLine<span class="token punctuation">:</span> <span class="token string">'underline'</span><span class="token punctuation">,</span> textDecorationStyle<span class="token punctuation">:</span> <span class="token string">'dashed'</span><span class="token punctuation">,</span> textDecorationColor<span class="token punctuation">:</span> <span class="token string">'#9CDC40'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Dashed underline <span class="token keyword">with</span> custom color
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textDecorationLine<span class="token punctuation">:</span> <span class="token string">'underline'</span><span class="token punctuation">,</span> textDecorationStyle<span class="token punctuation">:</span> <span class="token string">'dotted'</span><span class="token punctuation">,</span> textDecorationColor<span class="token punctuation">:</span> <span class="token string">'blue'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Dotted underline <span class="token keyword">with</span> custom color
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textDecorationLine<span class="token punctuation">:</span> <span class="token string">'none'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
None textDecoration
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textDecorationLine<span class="token punctuation">:</span> <span class="token string">'line-through'</span><span class="token punctuation">,</span> textDecorationStyle<span class="token punctuation">:</span> <span class="token string">'solid'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Solid line<span class="token operator">-</span>through
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textDecorationLine<span class="token punctuation">:</span> <span class="token string">'line-through'</span><span class="token punctuation">,</span> textDecorationStyle<span class="token punctuation">:</span> <span class="token string">'double'</span><span class="token punctuation">,</span> textDecorationColor<span class="token punctuation">:</span> <span class="token string">'#ff0000'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Double line<span class="token operator">-</span>through <span class="token keyword">with</span> custom color
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textDecorationLine<span class="token punctuation">:</span> <span class="token string">'line-through'</span><span class="token punctuation">,</span> textDecorationStyle<span class="token punctuation">:</span> <span class="token string">'dashed'</span><span class="token punctuation">,</span> textDecorationColor<span class="token punctuation">:</span> <span class="token string">'#9CDC40'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Dashed line<span class="token operator">-</span>through <span class="token keyword">with</span> custom color
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textDecorationLine<span class="token punctuation">:</span> <span class="token string">'line-through'</span><span class="token punctuation">,</span> textDecorationStyle<span class="token punctuation">:</span> <span class="token string">'dotted'</span><span class="token punctuation">,</span> textDecorationColor<span class="token punctuation">:</span> <span class="token string">'blue'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Dotted line<span class="token operator">-</span>through <span class="token keyword">with</span> custom color
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textDecorationLine<span class="token punctuation">:</span> <span class="token string">'underline line-through'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Both underline and line<span class="token operator">-</span>through
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<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 punctuation">,</span> <span class="token punctuation">{</span>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Nested'</span><span class="token punctuation">,</span>
|
||||
description<span class="token punctuation">:</span> <span class="token string">'Nested text components will inherit the styles of their '</span> <span class="token operator">+</span>
|
||||
|
||||
+2
-1
@@ -13,7 +13,8 @@ performance, although inline styles are also supported.</p></div><h3><a class="a
|
||||
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
|
||||
all the touchable elements are accessible.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="collapsible"></a>collapsible <span class="propType">bool</span> <a class="hash-link" href="#collapsible">#</a></h4><div><p>When false, indicates that the view should not be collapsed, even if it is
|
||||
layout-only. Defaults to true.</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'll simply want to wrap your component in
|
||||
<code>TouchableHighlight</code> or <code>TouchableOpacity</code>. Check out <code>Touchable.js</code>,
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user