mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Updated docs for next
This commit is contained in:
Website Deployment Script
@@ -48,7 +48,9 @@ layout, including line wrapping, such that the total number of lines
|
||||
does not exceed this number.</p><p>This prop is commonly used with <code>ellipsizeMode</code>.</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="docs/text.html#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="onlongpress"></a>onLongPress <span class="propType">function</span> <a class="hash-link" href="docs/text.html#onlongpress">#</a></h4><div><p>This function is called on long press.</p><p>e.g., `onLongPress={this.increaseSize}>``</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="docs/text.html#onpress">#</a></h4><div><p>This function is called on press.</p><p>e.g., `onPress={() => console.log('1st')}``</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectable"></a>selectable <span class="propType">bool</span> <a class="hash-link" href="docs/text.html#selectable">#</a></h4><div><p>Lets the user select text, to use the native copy and paste functionality.</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="docs/text.html#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="docs/view.html#style">View#style...</a></h6></div><div class="prop"><h6 class="propTitle">color <span class="propType"><a href="docs/colors.html">color</a></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> <div><p>Specifies font weight. The values 'normal' and 'bold' are supported for
|
||||
most fonts. Not all fonts have a variant for each of the numeric values,
|
||||
in that case the closest one is chosen.</p></div></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> <div><p>Specifies text alignment. The value 'justify' is only supported on iOS and
|
||||
fallbacks to <code>left</code> on Android.</p></div></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">textShadowColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">textShadowOffset <span class="propType">{width: number, height: number}</span> </h6></div><div class="prop"><h6 class="propTitle">textShadowRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>textAlignVertical <span class="propType">enum('auto', 'top', 'bottom', 'center')</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>fontVariant <span class="propType"><span>[enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums')]</span></span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>letterSpacing <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>textDecorationColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>textDecorationStyle <span class="propType">enum('solid', 'double', 'dotted', 'dashed')</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>writingDirection <span class="propType">enum('auto', 'ltr', 'rtl')</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="docs/text.html#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="adjustsfontsizetofit"></a><span class="platform">ios</span>adjustsFontSizeToFit <span class="propType">bool</span> <a class="hash-link" href="docs/text.html#adjustsfontsizetofit">#</a></h4><div><p>Specifies whether font should be scaled down automatically to fit given style constraints.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="allowfontscaling"></a><span class="platform">ios</span>allowFontScaling <span class="propType">bool</span> <a class="hash-link" href="docs/text.html#allowfontscaling">#</a></h4><div><p>Specifies whether fonts should scale to respect Text Size accessibility setting on iOS. The
|
||||
fallbacks to <code>left</code> on Android.</p></div></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">textShadowColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">textShadowOffset <span class="propType">{width: number, height: number}</span> </h6></div><div class="prop"><h6 class="propTitle">textShadowRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>includeFontPadding <span class="propType">bool</span> <div><p>Set to <code>false</code> to remove extra font padding intended to make space for certain ascenders / descenders.
|
||||
With some fonts, this padding can make text look slightly misaligned when centered vertically.
|
||||
For best results also set <code>textAlignVertical</code> to <code>center</code>. Default is true.</p></div></h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>textAlignVertical <span class="propType">enum('auto', 'top', 'bottom', 'center')</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>fontVariant <span class="propType"><span>[enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums')]</span></span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>letterSpacing <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>textDecorationColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>textDecorationStyle <span class="propType">enum('solid', 'double', 'dotted', 'dashed')</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>writingDirection <span class="propType">enum('auto', 'ltr', 'rtl')</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="docs/text.html#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="adjustsfontsizetofit"></a><span class="platform">ios</span>adjustsFontSizeToFit <span class="propType">bool</span> <a class="hash-link" href="docs/text.html#adjustsfontsizetofit">#</a></h4><div><p>Specifies whether font should be scaled down automatically to fit given style constraints.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="allowfontscaling"></a><span class="platform">ios</span>allowFontScaling <span class="propType">bool</span> <a class="hash-link" href="docs/text.html#allowfontscaling">#</a></h4><div><p>Specifies whether fonts should scale to respect Text Size accessibility setting on iOS. The
|
||||
default is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minimumfontscale"></a><span class="platform">ios</span>minimumFontScale <span class="propType">number</span> <a class="hash-link" href="docs/text.html#minimumfontscale">#</a></h4><div><p>Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).</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="docs/text.html#suppresshighlighting">#</a></h4><div><p>When <code>true</code>, 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><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Text/Text.js">edit the content above on GitHub</a> and send us a pull request!</p><div><h1><a class="anchor" name="description"></a>Description <a class="hash-link" href="docs/text.html#description">#</a></h1><div><h2><a class="anchor" name="nested-text"></a>Nested Text <a class="hash-link" href="docs/text.html#nested-text">#</a></h2><p>Both iOS and Android allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (<code>NSAttributedString</code> on iOS, <code>SpannableString</code> on Android). 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="web-player"><div class="prism language-javascript">import React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> from <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
import <span class="token punctuation">{</span> AppRegistry<span class="token punctuation">,</span> Text <span class="token punctuation">}</span> from <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
@@ -1090,6 +1092,23 @@ class <span class="token class-name">TextExample</span> extends <span class="tok
|
||||
This very long text should be truncated <span class="token keyword">with</span> dots <span class="token keyword">in</span> the beginning<span class="token punctuation">.</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Include Font Padding"</span><span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flexDirection<span class="token punctuation">:</span> <span class="token string">'row'</span><span class="token punctuation">,</span> justifyContent<span class="token punctuation">:</span> <span class="token string">'space-around'</span><span class="token punctuation">,</span> marginBottom<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">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>alignItems<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">}</span><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>includeFontPaddingText<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Ey
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>Default<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>alignItems<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>includeFontPaddingText<span class="token punctuation">,</span> <span class="token punctuation">{</span>includeFontPadding<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> marginLeft<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Ey
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>includeFontPadding<span class="token punctuation">:</span> <span class="token boolean">false</span><<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 operator">/</span>View<span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>By default Android will put extra space above text to allow <span class="token keyword">for</span> upper<span class="token operator">-</span>case accents or other ascenders<span class="token punctuation">.</span> With some fonts<span class="token punctuation">,</span> <span class="token keyword">this</span> can make text look slightly misaligned when centered vertically<span class="token punctuation">.</span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerPage<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
@@ -1100,6 +1119,14 @@ class <span class="token class-name">TextExample</span> extends <span class="tok
|
||||
left<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
|
||||
backgroundColor<span class="token punctuation">:</span> <span class="token string">'rgba(100, 100, 100, 0.3)'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
includeFontPaddingText<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
fontSize<span class="token punctuation">:</span> <span class="token number">120</span><span class="token punctuation">,</span>
|
||||
fontFamily<span class="token punctuation">:</span> <span class="token string">'sans-serif'</span><span class="token punctuation">,</span>
|
||||
backgroundColor<span class="token punctuation">:</span> <span class="token string">'#EEEEEE'</span><span class="token punctuation">,</span>
|
||||
color<span class="token punctuation">:</span> <span class="token string">'#000000'</span><span class="token punctuation">,</span>
|
||||
textAlignVertical<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
alignSelf<span class="token punctuation">:</span> <span class="token string">'center'</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>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> TextExample<span class="token punctuation">;</span></div><div class="embedded-simulator"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22Text%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/tabbarios-item.html#content">← Prev</a><a class="docs-next" href="docs/textinput.html#content">Next →</a></div></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Tutorial</a><a href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Showcase</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Upcoming Events</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://productpains.com/product/react-native/" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://facebook.github.io/react/" target="_blank">React</a></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"></a><section class="copyright">Copyright © 2016 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
|
||||
Reference in New Issue
Block a user