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-08-19 06:30:50 +00:00
parent 02348283dc
commit 66ce7b83e4
1 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
releases/next/docs/text.html
+9 -1
View File
@@ -140,7 +140,15 @@ html <span class="token punctuation">{</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span></div><p>You also lose the ability to set up a default font for an entire subtree. The recommended way to use consistent fonts and sizes across your application is to create a component <code>MyAppText</code> that includes them and use this component across your app. You can also use this component to make more specific components like <code>MyAppHeaderText</code> for other kinds of text.</p><div class="prism language-javascript">&lt;View<span class="token operator">&gt;</span>
&lt;MyAppText<span class="token operator">&gt;</span>Text styled <span class="token keyword">with</span> the default font <span class="token keyword">for</span> the entire application&lt;<span class="token operator">/</span>MyAppText<span class="token operator">&gt;</span>
&lt;MyAppHeaderText<span class="token operator">&gt;</span>Text styled as a header&lt;<span class="token operator">/</span>MyAppHeaderText<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span></div><p>React Native still has the concept of style inheritance, but limited to text subtrees. In this case, the second part will be both bold and red.</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>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span></div><p>Assuming that <code>MyAppText</code> is a component that simply renders out its children into a <code>Text</code> component with styling, then <code>MyAppHeaderText</code> can be defined as follows:</p><div class="prism language-javascript">class <span class="token class-name">MyAppHeaderText</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
&lt;MyAppText<span class="token operator">&gt;</span>
&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<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>
<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>children<span class="token punctuation">}</span>
&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>MyAppText<span class="token operator">&gt;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></div><p>Composing <code>MyAppText</code> in this way ensures that we get the styles from a top-level component, but leaves us the ability to add / override them in specific use cases.</p><p>React Native still has the concept of style inheritance, but limited to text subtrees. In this case, the second part will be both bold and red.</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>
I am bold
&lt;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">&#x27;red&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
and red