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
@@ -33,7 +33,7 @@ as the background.</p><p>For details of how this works under the hood, see
|
||||
<a href="http://frescolib.org/docs/rounded-corners-and-circles.html">http://frescolib.org/docs/rounded-corners-and-circles.html</a></p></div></h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>tintColor <span class="propType"><a href="docs/colors.html">color</a></span> <div><p>iOS-Specific style to "tint" an image.
|
||||
Changes the color of all the non-transparent pixels to the tintColor.</p></div></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/image.html#testid">#</a></h4><div><p>A unique identifier for this element to be used in UI Automation
|
||||
testing scripts.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitylabel"></a><span class="platform">ios</span>accessibilityLabel <span class="propType">string</span> <a class="hash-link" href="docs/image.html#accessibilitylabel">#</a></h4><div><p>The text that's read by the screen reader when the user interacts with
|
||||
the image.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a><span class="platform">ios</span>accessible <span class="propType">bool</span> <a class="hash-link" href="docs/image.html#accessible">#</a></h4><div><p>When true, indicates the image is an accessibility element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="capinsets"></a><span class="platform">ios</span>capInsets <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/image.html#capinsets">#</a></h4><div><p>When the image is resized, the corners of the size specified
|
||||
the image.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a><span class="platform">ios</span>accessible <span class="propType">bool</span> <a class="hash-link" href="docs/image.html#accessible">#</a></h4><div><p>When true, indicates the image is an accessibility element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="blurradius"></a><span class="platform">ios</span>blurRadius <span class="propType">number</span> <a class="hash-link" href="docs/image.html#blurradius">#</a></h4><div><p>blurRadius: the blur radius of the blur filter added to the image</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="capinsets"></a><span class="platform">ios</span>capInsets <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/image.html#capinsets">#</a></h4><div><p>When the image is resized, the corners of the size specified
|
||||
by capInsets will stay a fixed size, but the center content and borders
|
||||
of the image will be stretched. This is useful for creating resizable
|
||||
rounded buttons, shadows, and other resizable assets. More info on
|
||||
|
||||
@@ -27,7 +27,7 @@ each other on account of the literal newlines:</p><div class="prism language-jav
|
||||
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="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="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></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.</p></div></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>letterSpacing <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>lineBreakMode <span class="propType">enum('clipping', 'word-wrapping', 'char-wrapping', 'truncating-head', 'truncating-middle', 'truncating-tail')</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>textDecorationLine <span class="propType">enum('none', 'underline', 'line-through', 'underline line-through')</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="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 should fonts scale to respect Text Size accessibility setting on iOS.</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 true, no visual change is made when text is pressed down. By
|
||||
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.</p></div></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>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>textDecorationLine <span class="propType">enum('none', 'underline', 'line-through', 'underline line-through')</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="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 should fonts scale to respect Text Size accessibility setting on iOS.</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 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><table width="100%"><tbody><tr><td><h3><a class="anchor" name="description"></a>Description <a class="hash-link" href="docs/text.html#description">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/Text.md">Edit on GitHub</a></td></tr></tbody></table><div><h2><a class="anchor" name="nested-text"></a>Nested Text <a class="hash-link" href="docs/text.html#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>
|
||||
|
||||
Reference in New Issue
Block a user