mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
update website
This commit is contained in:
Travis CI
@@ -5,7 +5,7 @@
|
||||
<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="#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="#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="#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="#accessibilitycomponenttype-android">#</a></h4><p>In some cases, we also want to alert the end user of the type of selected component (ie, 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="#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="#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="#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="#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>
|
||||
|
||||
+1
-1
@@ -41,7 +41,7 @@
|
||||
<span class="token operator">||</span> Image <span class="token operator">||</span> <span class="token operator">||</span>
|
||||
<span class="token operator">||</span> <span class="token operator">||</span> Year <span class="token operator">||</span>
|
||||
<span class="token operator">|</span><span class="token operator">+-</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">++</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">+</span><span class="token operator">|</span>
|
||||
<span class="token operator">+-</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">+</span></div><p>We'll need to add another container in order to vertically lay out components within horizontally layed out components.</p><div class="prism language-javascript"> <span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<span class="token operator">+-</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">+</span></div><p>We'll need to add another container in order to vertically lay out components within horizontally laid out components.</p><div class="prism language-javascript"> <span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Image
|
||||
source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> movie<span class="token punctuation">.</span>posters<span class="token punctuation">.</span>thumbnail<span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||||
|
||||
Reference in New Issue
Block a user