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
@@ -5,7 +5,8 @@
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<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>buttonText<span class="token punctuation">}</span><span class="token operator">></span>Press me<span class="token operator">!</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>TouchableOpacity<span class="token operator">></span></div><p>In the above example, the <code>accessibilityLabel</code> on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.</p><h4><a class="anchor" name="accessibilitytraits-ios"></a>accessibilityTraits (iOS) <a class="hash-link" href="docs/accessibility.html#accessibilitytraits-ios">#</a></h4><p>Accessibility traits tell a person using VoiceOver what kind of element they have selected. Is this element a label? A button? A header? These questions are answered by <code>accessibilityTraits</code>.</p><p>To use, set the <code>accessibilityTraits</code> property to one of (or an array of) accessibility trait strings:</p><ul><li><strong>none</strong> Used when the element has no traits.</li><li><strong>button</strong> Used when the element should be treated as a button.</li><li><strong>link</strong> Used when the element should be treated as a link.</li><li><strong>header</strong> Used when an element acts as a header for a content section (e.g. the title of a navigation bar).</li><li><strong>search</strong> Used when the text field element should also be treated as a search field.</li><li><strong>image</strong> Used when the element should be treated as an image. Can be combined with button or link, for example.</li><li><strong>selected</strong> Used when the element is selected. For example, a selected row in a table or a selected button within a segmented control.</li><li><strong>plays</strong> Used when the element plays its own sound when activated.</li><li><strong>key</strong> Used when the element acts as a keyboard key.</li><li><strong>text</strong> Used when the element should be treated as static text that cannot change.</li><li><strong>summary</strong> Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches. For example, when Weather first launches, the element with today's weather conditions is marked with this trait.</li><li><strong>disabled</strong> Used when the control is not enabled and does not respond to user input.</li><li><strong>frequentUpdates</strong> Used when the element frequently updates its label or value, but too often to send notifications. Allows an accessibility client to poll for changes. A stopwatch would be an example.</li><li><strong>startsMedia</strong> Used when activating an element starts a media session (e.g. playing a movie, recording audio) that should not be interrupted by output from an assistive technology, like VoiceOver.</li><li><strong>adjustable</strong> Used when an element can be "adjusted" (e.g. a slider).</li><li><strong>allowsDirectInteraction</strong> Used when an element allows direct touch interaction for VoiceOver users (for example, a view representing a piano keyboard).</li><li><strong>pageTurn</strong> Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.</li></ul><h4><a class="anchor" name="onaccessibilitytap-ios"></a>onAccessibilityTap (iOS) <a class="hash-link" href="docs/accessibility.html#onaccessibilitytap-ios">#</a></h4><p>Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.</p><h4><a class="anchor" name="onmagictap-ios"></a>onMagicTap (iOS) <a class="hash-link" href="docs/accessibility.html#onmagictap-ios">#</a></h4><p>Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an <code>onMagicTap</code> function, the system will traverse up the view hierarchy until it finds a view that does.</p><h4><a class="anchor" name="accessibilitycomponenttype-android"></a>accessibilityComponentType (Android) <a class="hash-link" href="docs/accessibility.html#accessibilitycomponenttype-android">#</a></h4><p>In some cases, we also want to alert the end user of the type of selected component (i.e., that it is a “button”). If we were using native buttons, this would work automatically. Since we are using javascript, we need to provide a bit more context for TalkBack. To do so, you must specify the ‘accessibilityComponentType’ property for any UI component. For instances, we support ‘button’, ‘radiobutton_checked’ and ‘radiobutton_unchecked’ and so on.</p><div class="prism language-javascript"><TouchableWithoutFeedback accessibilityComponentType<span class="token operator">=</span>”button”
|
||||
<<span class="token operator">/</span>TouchableOpacity<span class="token operator">></span></div><p>In the above example, the <code>accessibilityLabel</code> on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.</p><h4><a class="anchor" name="accessibilitytraits-ios"></a>accessibilityTraits (iOS) <a class="hash-link" href="docs/accessibility.html#accessibilitytraits-ios">#</a></h4><p>Accessibility traits tell a person using VoiceOver what kind of element they have selected. Is this element a label? A button? A header? These questions are answered by <code>accessibilityTraits</code>.</p><p>To use, set the <code>accessibilityTraits</code> property to one of (or an array of) accessibility trait strings:</p><ul><li><strong>none</strong> Used when the element has no traits.</li><li><strong>button</strong> Used when the element should be treated as a button.</li><li><strong>link</strong> Used when the element should be treated as a link.</li><li><strong>header</strong> Used when an element acts as a header for a content section (e.g. the title of a navigation bar).</li><li><strong>search</strong> Used when the text field element should also be treated as a search field.</li><li><strong>image</strong> Used when the element should be treated as an image. Can be combined with button or link, for example.</li><li><strong>selected</strong> Used when the element is selected. For example, a selected row in a table or a selected button within a segmented control.</li><li><strong>plays</strong> Used when the element plays its own sound when activated.</li><li><strong>key</strong> Used when the element acts as a keyboard key.</li><li><strong>text</strong> Used when the element should be treated as static text that cannot change.</li><li><strong>summary</strong> Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches. For example, when Weather first launches, the element with today's weather conditions is marked with this trait.</li><li><strong>disabled</strong> Used when the control is not enabled and does not respond to user input.</li><li><strong>frequentUpdates</strong> Used when the element frequently updates its label or value, but too often to send notifications. Allows an accessibility client to poll for changes. A stopwatch would be an example.</li><li><strong>startsMedia</strong> Used when activating an element starts a media session (e.g. playing a movie, recording audio) that should not be interrupted by output from an assistive technology, like VoiceOver.</li><li><strong>adjustable</strong> Used when an element can be "adjusted" (e.g. a slider).</li><li><strong>allowsDirectInteraction</strong> Used when an element allows direct touch interaction for VoiceOver users (for example, a view representing a piano keyboard).</li><li><strong>pageTurn</strong> Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.</li></ul><h4><a class="anchor" name="accessibilityviewismodal-ios"></a>accessibilityViewIsModal (iOS) <a class="hash-link" href="docs/accessibility.html#accessibilityviewismodal-ios">#</a></h4><p>A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.</p><p>For example, in a window that contains sibling views <code>A</code> and <code>B</code>, setting <code>accessibilityViewIsModal</code> to <code>true</code> on view <code>B</code> causes VoiceOver to ignore the elements in the view <code>A</code>.
|
||||
On the other hand, if view <code>B</code> contains a child view <code>C</code> and you set <code>accessibilityViewIsModal</code> to <code>true</code> on view <code>C</code>, VoiceOver does not ignore the elements in view <code>A</code>.</p><h4><a class="anchor" name="onaccessibilitytap-ios"></a>onAccessibilityTap (iOS) <a class="hash-link" href="docs/accessibility.html#onaccessibilitytap-ios">#</a></h4><p>Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.</p><h4><a class="anchor" name="onmagictap-ios"></a>onMagicTap (iOS) <a class="hash-link" href="docs/accessibility.html#onmagictap-ios">#</a></h4><p>Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an <code>onMagicTap</code> function, the system will traverse up the view hierarchy until it finds a view that does.</p><h4><a class="anchor" name="accessibilitycomponenttype-android"></a>accessibilityComponentType (Android) <a class="hash-link" href="docs/accessibility.html#accessibilitycomponenttype-android">#</a></h4><p>In some cases, we also want to alert the end user of the type of selected component (i.e., that it is a “button”). If we were using native buttons, this would work automatically. Since we are using javascript, we need to provide a bit more context for TalkBack. To do so, you must specify the ‘accessibilityComponentType’ property for any UI component. For instances, we support ‘button’, ‘radiobutton_checked’ and ‘radiobutton_unchecked’ and so on.</p><div class="prism language-javascript"><TouchableWithoutFeedback accessibilityComponentType<span class="token operator">=</span>”button”
|
||||
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPress<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<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>buttonText<span class="token punctuation">}</span><span class="token operator">></span>Press me<span class="token operator">!</span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
|
||||
@@ -107,6 +107,9 @@ different parameters. The downside is that this can use up limited video
|
||||
memory, so this prop should be set back to false at the end of the
|
||||
interaction/animation.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitytraits"></a><span class="platform">ios</span>accessibilityTraits <span class="propType">AccessibilityTraits, [object Object]</span> <a class="hash-link" href="docs/view.html#accessibilitytraits">#</a></h4><div><p>Provides additional traits to screen reader. By default no traits are
|
||||
provided unless specified otherwise in element.</p><p>You can provide one trait or an array of many traits.</p><p>Possible values for <code>AccessibilityTraits</code> are:</p><ul><li><code>'none'</code> - The element has no traits.</li><li><code>'button'</code> - The element should be treated as a button.</li><li><code>'link'</code> - The element should be treated as a link.</li><li><code>'header'</code> - The element is a header that divides content into sections.</li><li><code>'search'</code> - The element should be treated as a search field.</li><li><code>'image'</code> - The element should be treated as an image.</li><li><code>'selected'</code> - The element is selected.</li><li><code>'plays'</code> - The element plays sound.</li><li><code>'key'</code> - The element should be treated like a keyboard key.</li><li><code>'text'</code> - The element should be treated as text.</li><li><code>'summary'</code> - The element provides app summary information.</li><li><code>'disabled'</code> - The element is disabled.</li><li><code>'frequentUpdates'</code> - The element frequently changes its value.</li><li><code>'startsMedia'</code> - The element starts a media session.</li><li><code>'adjustable'</code> - The element allows adjustment over a range of values.</li><li><code>'allowsDirectInteraction'</code> - The element allows direct touch interaction for VoiceOver users.</li><li><code>'pageTurn'</code> - Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.</li></ul><p>See the <a href="docs/accessibility.html#accessibilitytraits-ios" target="_blank">Accessibility guide</a>
|
||||
for more information.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilityviewismodal"></a><span class="platform">ios</span>accessibilityViewIsModal <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#accessibilityviewismodal">#</a></h4><div><p>A value indicating whether VoiceOver should ignore the elements
|
||||
within views that are siblings of the receiver.
|
||||
Default is <code>false</code>.</p><p>See the <a href="docs/accessibility.html#accessibilitytraits-ios" target="_blank">Accessibility guide</a>
|
||||
for more information.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="shouldrasterizeios"></a><span class="platform">ios</span>shouldRasterizeIOS <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#shouldrasterizeios">#</a></h4><div><p>Whether this <code>View</code> should be rendered as a bitmap before compositing.</p><p>On iOS, this is useful for animations and interactions that do not
|
||||
modify this component's dimensions nor its children; for example, when
|
||||
translating the position of a static view, rasterization allows the
|
||||
|
||||
Reference in New Issue
Block a user