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:
@@ -45,7 +45,7 @@ default is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTi
|
||||
<code>numberOfLines</code> must be set in conjunction with this prop.</p><p>This can be one of the following values:</p><ul><li><code>head</code> - The line is displayed so that the end fits in the container and the missing text
|
||||
at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz"</li><li><code>middle</code> - The line is displayed so that the beginning and end fit in the container and the
|
||||
missing text in the middle is indicated by an ellipsis glyph. "ab...yz"</li><li><code>tail</code> - The line is displayed so that the beginning fits in the container and the
|
||||
missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."</li><li><code>clip</code> - Lines are not drawn past the edge of the text container.</li></ul><p>The default is <code>tail</code>.</p><blockquote><p><code>clip</code> is working only for iOS</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="numberoflines"></a>numberOfLines?: <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/text.html#numberoflines">#</a></h4><div><p>Used to truncate the text with an ellipsis after computing the text
|
||||
missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."</li><li><code>clip</code> - Lines are not drawn past the edge of the text container.</li></ul><p>The default is <code>tail</code>.</p><blockquote><p><code>clip</code> is working only for iOS</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="nativeid"></a>nativeID?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/text.html#nativeid">#</a></h4><div><p>Used to locate this view from native code.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="numberoflines"></a>numberOfLines?: <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/text.html#numberoflines">#</a></h4><div><p>Used to truncate the text with an ellipsis after computing the text
|
||||
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">PropTypes.func</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">PropTypes.func</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., <code>onLongPress={this.increaseSize}></code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpress"></a>onPress?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/text.html#onpress">#</a></h4><div><p>This function is called on press.</p><p>e.g., <code>onPress={() => console.log('1st')}</code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pressretentionoffset"></a>pressRetentionOffset?: <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/text.html#pressretentionoffset">#</a></h4><div><p>When the scroll view is disabled, this defines how far your touch may
|
||||
move off of the button, before deactivating the button. Once deactivated,
|
||||
@@ -79,7 +79,7 @@ For best results also set <code>textAlignVertical</code> to <code>center</code>.
|
||||
['solid' /*default*/, 'double', 'dotted','dashed']
|
||||
)</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>writingDirection <span class="propType">ReactPropTypes.oneOf(
|
||||
['auto' /*default*/, 'ltr', 'rtl']
|
||||
)</span> </h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID?: <span class="propType">PropTypes.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="disabled"></a><span class="platform">android</span>disabled?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/text.html#disabled">#</a></h4><div><p>Specifies the disabled state of the text view for testing purposes</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="nativeid"></a><span class="platform">android</span>nativeID?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/text.html#nativeid">#</a></h4><div><p>Used to locate this view from native code.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectioncolor"></a><span class="platform">android</span>selectionColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/text.html#selectioncolor">#</a></h4><div><p>The highlight color of the text.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="textbreakstrategy"></a><span class="platform">android</span>textBreakStrategy?: <span class="propType">PropTypes.oneOf(['simple', 'highQuality', 'balanced'])</span> <a class="hash-link" href="docs/text.html#textbreakstrategy">#</a></h4><div><p>Set text break strategy on Android API Level 23+, possible values are <code>simple</code>, <code>highQuality</code>, <code>balanced</code>
|
||||
)</span> </h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID?: <span class="propType">PropTypes.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="disabled"></a><span class="platform">android</span>disabled?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/text.html#disabled">#</a></h4><div><p>Specifies the disabled state of the text view for testing purposes</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectioncolor"></a><span class="platform">android</span>selectionColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/text.html#selectioncolor">#</a></h4><div><p>The highlight color of the text.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="textbreakstrategy"></a><span class="platform">android</span>textBreakStrategy?: <span class="propType">PropTypes.oneOf(['simple', 'highQuality', 'balanced'])</span> <a class="hash-link" href="docs/text.html#textbreakstrategy">#</a></h4><div><p>Set text break strategy on Android API Level 23+, possible values are <code>simple</code>, <code>highQuality</code>, <code>balanced</code>
|
||||
The default value is <code>highQuality</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="adjustsfontsizetofit"></a><span class="platform">ios</span>adjustsFontSizeToFit?: <span class="propType">PropTypes.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="minimumfontscale"></a><span class="platform">ios</span>minimumFontScale?: <span class="propType">PropTypes.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">PropTypes.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"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> AppRegistry<span class="token punctuation">,</span> Text <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -24,7 +24,7 @@ Typical interface guidelines recommend touch targets that are at least
|
||||
30 - 40 points/density-independent pixels.</p><p>For example, if a touchable view has a height of 20 the touchable height can be extended to
|
||||
40 with <code>hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}</code></p><blockquote><p>The touch area never extends past the parent view bounds and the Z-index
|
||||
of sibling views always takes precedence if a touch hits two overlapping
|
||||
views.</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onaccessibilitytap"></a>onAccessibilityTap?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onaccessibilitytap">#</a></h4><div><p>When <code>accessible</code> is true, the system will try to invoke this function
|
||||
views.</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="nativeid"></a>nativeID?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/view.html#nativeid">#</a></h4><div><p>Used to locate this view from native classes.</p><blockquote><p>This disables the 'layout-only view removal' optimization for this view!</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onaccessibilitytap"></a>onAccessibilityTap?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onaccessibilitytap">#</a></h4><div><p>When <code>accessible</code> is true, the system will try to invoke this function
|
||||
when the user performs accessibility tap gesture.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with:</p><p><code>{nativeEvent: { layout: {x, y, width, height}}}</code></p><p>This event is fired immediately once the layout has been calculated, but
|
||||
the new layout may not yet be reflected on the screen at the time the
|
||||
event is received, especially if a layout animation is in progress.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmagictap"></a>onMagicTap?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onmagictap">#</a></h4><div><p>When <code>accessible</code> is <code>true</code>, the system will invoke this function when the
|
||||
@@ -95,7 +95,7 @@ fires accessibility events and if it is reported to accessibility services
|
||||
that query the screen. Works for Android only.</p><p>Possible values:</p><ul><li><code>'auto'</code> - The system determines whether the view is important for accessibility -
|
||||
default (recommended).</li><li><code>'yes'</code> - The view is important for accessibility.</li><li><code>'no'</code> - The view is not important for accessibility.</li><li><code>'no-hide-descendants'</code> - The view is not important for accessibility,
|
||||
nor are any of its descendant views.</li></ul><p>See the <a href="http://developer.android.com/reference/android/R.attr.html#importantForAccessibility" target="_blank">Android <code>importantForAccessibility</code> docs</a>
|
||||
for reference.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="nativeid"></a><span class="platform">android</span>nativeID?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/view.html#nativeid">#</a></h4><div><p>Used to locate this view from native classes.</p><blockquote><p>This disables the 'layout-only view removal' optimization for this view!</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="needsoffscreenalphacompositing"></a><span class="platform">android</span>needsOffscreenAlphaCompositing?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/view.html#needsoffscreenalphacompositing">#</a></h4><div><p>Whether this <code>View</code> needs to rendered offscreen and composited with an alpha
|
||||
for reference.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="needsoffscreenalphacompositing"></a><span class="platform">android</span>needsOffscreenAlphaCompositing?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/view.html#needsoffscreenalphacompositing">#</a></h4><div><p>Whether this <code>View</code> needs to rendered offscreen and composited with an alpha
|
||||
in order to preserve 100% correct colors and blending behavior. The default
|
||||
(<code>false</code>) falls back to drawing the component and its children with an alpha
|
||||
applied to the paint used to draw each element instead of rendering the full
|
||||
|
||||
@@ -6,7 +6,7 @@ Typical interface guidelines recommend touch targets that are at least
|
||||
30 - 40 points/density-independent pixels.</p><p>For example, if a touchable view has a height of 20 the touchable height can be extended to
|
||||
40 with <code>hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}</code></p><blockquote><p>The touch area never extends past the parent view bounds and the Z-index
|
||||
of sibling views always takes precedence if a touch hits two overlapping
|
||||
views.</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onaccessibilitytap"></a>onAccessibilityTap?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/viewproptypes.html#onaccessibilitytap">#</a></h4><div><p>When <code>accessible</code> is true, the system will try to invoke this function
|
||||
views.</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="nativeid"></a>nativeID?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/viewproptypes.html#nativeid">#</a></h4><div><p>Used to locate this view from native classes.</p><blockquote><p>This disables the 'layout-only view removal' optimization for this view!</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onaccessibilitytap"></a>onAccessibilityTap?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/viewproptypes.html#onaccessibilitytap">#</a></h4><div><p>When <code>accessible</code> is true, the system will try to invoke this function
|
||||
when the user performs accessibility tap gesture.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/viewproptypes.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with:</p><p><code>{nativeEvent: { layout: {x, y, width, height}}}</code></p><p>This event is fired immediately once the layout has been calculated, but
|
||||
the new layout may not yet be reflected on the screen at the time the
|
||||
event is received, especially if a layout animation is in progress.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmagictap"></a>onMagicTap?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/viewproptypes.html#onmagictap">#</a></h4><div><p>When <code>accessible</code> is <code>true</code>, the system will invoke this function when the
|
||||
@@ -77,7 +77,7 @@ fires accessibility events and if it is reported to accessibility services
|
||||
that query the screen. Works for Android only.</p><p>Possible values:</p><ul><li><code>'auto'</code> - The system determines whether the view is important for accessibility -
|
||||
default (recommended).</li><li><code>'yes'</code> - The view is important for accessibility.</li><li><code>'no'</code> - The view is not important for accessibility.</li><li><code>'no-hide-descendants'</code> - The view is not important for accessibility,
|
||||
nor are any of its descendant views.</li></ul><p>See the <a href="http://developer.android.com/reference/android/R.attr.html#importantForAccessibility" target="_blank">Android <code>importantForAccessibility</code> docs</a>
|
||||
for reference.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="nativeid"></a><span class="platform">android</span>nativeID?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/viewproptypes.html#nativeid">#</a></h4><div><p>Used to locate this view from native classes.</p><blockquote><p>This disables the 'layout-only view removal' optimization for this view!</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="needsoffscreenalphacompositing"></a><span class="platform">android</span>needsOffscreenAlphaCompositing?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/viewproptypes.html#needsoffscreenalphacompositing">#</a></h4><div><p>Whether this <code>View</code> needs to rendered offscreen and composited with an alpha
|
||||
for reference.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="needsoffscreenalphacompositing"></a><span class="platform">android</span>needsOffscreenAlphaCompositing?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/viewproptypes.html#needsoffscreenalphacompositing">#</a></h4><div><p>Whether this <code>View</code> needs to rendered offscreen and composited with an alpha
|
||||
in order to preserve 100% correct colors and blending behavior. The default
|
||||
(<code>false</code>) falls back to drawing the component and its children with an alpha
|
||||
applied to the paint used to draw each element instead of rendering the full
|
||||
|
||||
Reference in New Issue
Block a user