mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Christopher Chedeau
88 lines
21 KiB
HTML
88 lines
21 KiB
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | Build Native Apps Using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="React Native | Build Native Apps Using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png"><meta property="og:description" content="Build Native Apps Using React"><link rel="shortcut icon" href="/react-native/img/favicon.png"><link rel="stylesheet" href="/react-native/css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href="/react-native/"><img src="/react-native/img/logo.png">React Native</a><ul class="nav-site"><li><a href="/react-native/docs/getting-started.html#content" class="active">docs</a></li><li><a href="/react-native/support.html" class="">support</a></li><li><a href="http://github.com/facebook/react-native" class="">github</a></li></ul></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/network.html#content">Network</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pixels.html#content">Physical vs Logical Pixels</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/timers.html#content">Timers</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/expandingtext.html#content">ExpandingText</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/slider.html#content">Slider</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/animation.html#content">Animation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/appregistry.html#content">AppRegistry</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/appstate.html#content">AppState</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/appstateios.html#content">AppStateIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/asyncstorage.html#content">AsyncStorage</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/cameraroll.html#content">CameraRoll</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/layoutanimation.html#content">LayoutAnimation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pixelratio.html#content">PixelRatio</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/statusbarios.html#content">StatusBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/stylesheet.html#content">StyleSheet</a></li></ul></div></div><div class="inner-content"><a id="content"></a><h1>Text</h1><div><div><p>A react component for displaying text which supports nesting,
|
|
styling, and touch handling. In the following example, the nested title and
|
|
body text will inherit the <code>fontFamily</code> from <code>styles.baseText</code>, but the title
|
|
provides its own additional styles. The title and body will stack on top of
|
|
each other on account of the literal newlines:</p><div class="prism language-javascript">renderText<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>
|
|
<Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>baseText<span class="token punctuation">}</span><span class="token operator">></span>
|
|
<Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>titleText<span class="token punctuation">}</span> onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onPressTitle<span class="token punctuation">}</span><span class="token operator">></span>
|
|
<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>titleText <span class="token operator">+</span> <span class="token string">'\n\n'</span><span class="token punctuation">}</span>
|
|
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
|
<Text numberOfLines<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">5</span><span class="token punctuation">}</span><span class="token operator">></span>
|
|
<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>bodyText<span class="token punctuation">}</span>
|
|
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
|
<<span class="token operator">/</span>Text<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>
|
|
<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>
|
|
baseText<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
fontFamily<span class="token punctuation">:</span> <span class="token string">'Cochin'</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
titleText<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>
|
|
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 punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">;</span></div></div><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
|
|
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="onpress"></a>onPress <span class="propType">func</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">stylePropType</span> <a class="hash-link" href="#style">#</a></h4></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><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>
|
|
and red
|
|
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
|
<<span class="token operator">/</span>Text<span class="token operator">></span></div><p>Behind the scenes, this is going to be converted to a flat NSAttributedString that contains the following information</p><div class="prism language-javascript"><span class="token string">"I am bold and red"</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="containers"></a>Containers <a class="hash-link" href="#containers">#</a></h2><p>The <code><Text></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><Text></code> are no longer rectangles but wrap when they see the end of the line.</p><div class="prism language-javascript"><Text<span class="token operator">></span>
|
|
<Text<span class="token operator">></span>First part and <<span class="token operator">/</span>Text<span class="token operator">></span>
|
|
<Text<span class="token operator">></span>second part<<span class="token operator">/</span>Text<span class="token operator">></span>
|
|
<<span class="token operator">/</span>Text<span class="token operator">></span><span class="token comment" spellcheck="true">
|
|
// Text container: all the text flows as if it was one
|
|
</span><span class="token comment" spellcheck="true">// |First part |
|
|
</span><span class="token comment" spellcheck="true">// |and second |
|
|
</span><span class="token comment" spellcheck="true">// |part |
|
|
</span>
|
|
<View<span class="token operator">></span>
|
|
<Text<span class="token operator">></span>First part and <<span class="token operator">/</span>Text<span class="token operator">></span>
|
|
<Text<span class="token operator">></span>second part<<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 comment" spellcheck="true">
|
|
// View container: each text is its own block
|
|
</span><span class="token comment" spellcheck="true">// |First part |
|
|
</span><span class="token comment" spellcheck="true">// |and |
|
|
</span><span class="token comment" spellcheck="true">// |second part|</span></div><h2><a class="anchor" name="limited-style-inheritance"></a>Limited Style Inheritance <a class="hash-link" href="#limited-style-inheritance">#</a></h2><p>On the web, the usual way to set a font family and size for the entire document is to write</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">/* CSS, *not* React Native */</span>
|
|
html <span class="token punctuation">{</span>
|
|
font<span class="token operator">-</span>family<span class="token punctuation">:</span> <span class="token string">'lucida grande'</span><span class="token punctuation">,</span> tahoma<span class="token punctuation">,</span> verdana<span class="token punctuation">,</span> arial<span class="token punctuation">,</span> sans<span class="token operator">-</span>serif<span class="token punctuation">;</span>
|
|
font<span class="token operator">-</span>size<span class="token punctuation">:</span> 11px<span class="token punctuation">;</span>
|
|
color<span class="token punctuation">:</span> #<span class="token number">141823</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span></div><p>When the browser is trying to render a text node, it's going to go all the way up to the root element of the tree and find an element with a <code>font-size</code> attribute. An unexpected property with this system is that <strong>any</strong> node can have <code>font-size</code> attribute, including a <code><div></code>. The reason why it was designed this way is that it is convenient, even though not really semantically correct.</p><p>In React Native, we are more strict about it. The first place where it'll show up is that you have to wrap all the text nodes inside of a <code><Text></code> component. It is not allowed to have a text node directly under a <code><View></code>.</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// BAD: will fatal, can't have a text node as child of a <View>
|
|
</span><View<span class="token operator">></span>
|
|
Some text
|
|
<<span class="token operator">/</span>View<span class="token operator">></span>
|
|
<span class="token comment" spellcheck="true">
|
|
// GOOD
|
|
</span><View<span class="token operator">></span>
|
|
<Text<span class="token operator">></span>
|
|
Some text
|
|
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
|
<<span class="token operator">/</span>View<span class="token operator">></span></div><p>You also lose the ability to setup 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's going to set them and use this component all across your app. You can also make other components such as <code>MyAppHeaderText</code> for other kind of texts.</p><div class="prism language-javascript"><View<span class="token operator">></span>
|
|
<MyAppText<span class="token operator">></span>Text styled <span class="token keyword">with</span> the default font <span class="token keyword">for</span> the entire application<<span class="token operator">/</span>MyAppText<span class="token operator">></span>
|
|
<MyAppHeaderText<span class="token operator">></span>Text styled as a header<<span class="token operator">/</span>MyAppHeaderText<span class="token operator">></span>
|
|
<<span class="token operator">/</span>View<span class="token operator">></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"><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>
|
|
and red
|
|
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
|
<<span class="token operator">/</span>Text<span class="token operator">></span></div><p>We believe that this more constrained way to style text will yield better apps.</p><ul><li><p>(Developper) React components are designed with strong isolation properties in mind, you should be able to drop a component anywhere in your application and it will look and behave the same way, as long as the props are the same. Having text properties be inherited from outside of the props breaks isolation.</p></li><li><p>(Implementor) The implementation of React Native is also simplified. We do not need to have a <code>fontFamily</code> field on every single element and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself.</p></li></ul></div><div class="docs-prevnext"><a class="docs-next" href="textinput.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
|
ga('send', 'pageview');
|
|
|
|
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
|
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
|
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
|
</script></body></html> |