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-13 13:55:29 +00:00
parent 4a0e7f59d9
commit 4ea0c4d263
7 changed files with 74 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/text.html
+20 -1
View File
@@ -23,7 +23,7 @@ each other on account of the literal newlines:</p><div class="prism language-jav
fontSize<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
fontWeight<span class="token punctuation">:</span> <span class="token string">&#x27;bold&#x27;</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></div></div><h3><a class="anchor" name="props"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/Libraries/Text/Text.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="numberoflines"></a>numberOfLines <span class="propType">number</span> <a class="hash-link" href="#numberoflines">#</a></h4><div><p>Used to truncate the text with an elipsis after computing the text
<span class="token punctuation">}</span><span class="token punctuation">;</span></div></div><h3><a class="anchor" name="props"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/Libraries/Text/Text.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="allowfontscaling"></a>allowFontScaling <span class="propType">bool</span> <a class="hash-link" href="#allowfontscaling">#</a></h4><div><p>Specifies should fonts scale to respect Text Size accessibility setting on iOS.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="numberoflines"></a>numberOfLines <span class="propType">number</span> <a class="hash-link" href="#numberoflines">#</a></h4><div><p>Used to truncate the text with an elipsis after computing the text
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> <code>{nativeEvent: {layout: {x, y, width, height}}}</code></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.</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(&#x27;normal&#x27;, &#x27;italic&#x27;)</span></h6></div><div class="prop"><h6 class="propTitle">fontWeight <span class="propType">enum(&quot;normal&quot;, &#x27;bold&#x27;, &#x27;100&#x27;, &#x27;200&#x27;, &#x27;300&#x27;, &#x27;400&#x27;, &#x27;500&#x27;, &#x27;600&#x27;, &#x27;700&#x27;, &#x27;800&#x27;, &#x27;900&#x27;)</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(&quot;auto&quot;, &#x27;left&#x27;, &#x27;right&#x27;, &#x27;center&#x27;, &#x27;justify&#x27;)</span></h6></div><div class="prop"><h6 class="propTitle">textDecorationLine <span class="propType">enum(&quot;none&quot;, &#x27;underline&#x27;, &#x27;line-through&#x27;, &#x27;underline line-through&#x27;)</span></h6></div><div class="prop"><h6 class="propTitle">textDecorationStyle <span class="propType">enum(&quot;solid&quot;, &#x27;double&#x27;, &#x27;dotted&#x27;, &#x27;dashed&#x27;)</span></h6></div><div class="prop"><h6 class="propTitle">textDecorationColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">writingDirection <span class="propType">enum(&quot;auto&quot;, &#x27;ltr&#x27;, &#x27;rtl&#x27;)</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 class="prop"><h4 class="propTitle"><a class="anchor" name="suppresshighlighting"></a><span class="platform">ios</span>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></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">&lt;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">&#x27;bold&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
@@ -437,6 +437,25 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</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">&#x27;allowFontScaling attribute&#x27;</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>
&lt;View<span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>
By default<span class="token punctuation">,</span> text will respect Text Size accessibility setting on iOS<span class="token punctuation">.</span>
It means that all font sizes will be increased or descreased depending on the value of Text Size setting <span class="token keyword">in</span>
<span class="token punctuation">{</span><span class="token string">&quot; &quot;</span><span class="token punctuation">}</span>&lt;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">&#x27;bold&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>Settings<span class="token punctuation">.</span>app <span class="token operator">-</span> Display &amp; Brightness <span class="token operator">-</span> Text Size&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginTop<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
You can disable scaling <span class="token keyword">for</span> your Text component by passing <span class="token punctuation">{</span><span class="token string">&quot;\&quot;&quot;</span><span class="token punctuation">}</span>allowFontScaling<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">&quot;{&quot;</span><span class="token punctuation">}</span><span class="token boolean">false</span><span class="token punctuation">{</span><span class="token string">&quot;}\&quot;&quot;</span><span class="token punctuation">}</span> prop<span class="token punctuation">.</span>
&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;Text allowFontScaling<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginTop<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
This text will not scale<span class="token punctuation">.</span>
&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</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>
<span class="token keyword">var</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>