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-05-27 17:50:53 +00:00
parent 2f1ad261b7
commit 0af64917bb
1 changed files with 3 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
releases/next/docs/text.html
+3 -8
View File
@@ -36,11 +36,7 @@ default, a gray oval highlights the text on press down.</p></div></div></div></d
&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></div><p>Behind the scenes, React Native converts this to a flat <code>NSAttributedString</code> or <code>SpannableString</code> that contains the following information:</p><div class="prism language-javascript"><span class="token string">&quot;I am bold and red&quot;</span>
<span class="token number">0</span><span class="token operator">-</span><span class="token number">9</span><span class="token punctuation">:</span> bold
<span class="token number">9</span><span class="token operator">-</span><span class="token number">17</span><span class="token punctuation">:</span> bold<span class="token punctuation">,</span> red</div><h2><a class="anchor" name="nested-views-ios-only"></a>Nested Views (iOS Only) <a class="hash-link" href="docs/text.html#nested-views-ios-only">#</a></h2><p>On iOS, you can nest views within your Text component. Here&#x27;s an example:</p><div class="prism language-javascript">&lt;Text<span class="token operator">&gt;</span>
There is a blue square
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">50</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">50</span><span class="token punctuation">,</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;steelblue&#x27;</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 keyword">in</span> between my text<span class="token punctuation">.</span>
&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span></div><p>In order to use this feature, you must give the view a <code>width</code> and a <code>height</code>.</p><h2><a class="anchor" name="containers"></a>Containers <a class="hash-link" href="docs/text.html#containers">#</a></h2><p>The <code>&lt;Text&gt;</code> element is special relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <code>&lt;Text&gt;</code> are no longer rectangles, but wrap when they see the end of the line.</p><div class="prism language-javascript">&lt;Text<span class="token operator">&gt;</span>
<span class="token number">9</span><span class="token operator">-</span><span class="token number">17</span><span class="token punctuation">:</span> bold<span class="token punctuation">,</span> red</div><h2><a class="anchor" name="containers"></a>Containers <a class="hash-link" href="docs/text.html#containers">#</a></h2><p>The <code>&lt;Text&gt;</code> element is special relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <code>&lt;Text&gt;</code> are no longer rectangles, but wrap when they see the end of the line.</p><div class="prism language-javascript">&lt;Text<span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>First part and &lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>second part&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><span class="token comment" spellcheck="true">
@@ -481,13 +477,12 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
<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;Inline views&#x27;</span><span class="token punctuation">,</span>
title<span class="token punctuation">:</span> <span class="token string">&#x27;Inline images&#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>
This text contains an inline blue view &lt;View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">25</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">25</span><span class="token punctuation">,</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;steelblue&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span> and
an inline image &lt;Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;./flux.png&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">11</span><span class="token punctuation">,</span> resizeMode<span class="token punctuation">:</span> <span class="token string">&#x27;cover&#x27;</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> Neat<span class="token punctuation">,</span> huh<span class="token operator">?</span>
This text contains an inline image &lt;Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;./flux.png&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">11</span><span class="token punctuation">,</span> resizeMode<span class="token punctuation">:</span> <span class="token string">&#x27;cover&#x27;</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> Neat<span class="token punctuation">,</span> huh<span class="token operator">?</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>