mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-04-15 12:12:31 +08:00
Finish AccessibilityInfo implementation
Summary: This PR is based on files ericvicenti gave me. Specifically, he gave me: - AccessibilityInfo.android.js - AccessibilityInfo.ios.js - AccessibilityInfoModule.java Before this change, only a native iOS implementation of AccessibilityInfo existed. This change includes: - A native Android implementation of AccessibilityInfo. - JavaScript wrappers for the AccessibilityInfo module for both iOS and Android. - UIExplorer changes to illustrate how to use AccessibilityInfo on iOS and Android. - Documentation for the AccessibilityInfo APIs. **Test plan (required)** Tested the UIExplorer AccessibilityInfo example on iOS and Android with the screen reader both enabled and disabled. Adam Comella Microsoft Corp. Closes https://github.com/facebook/react-native/pull/12273 Reviewed By: mkonicek Differential Revision: D4527224 Pulled By: ericvicenti fbshipit-source-id: d04638465ccbdbb35ecfc9504daaeb8e33aab57a
This commit is contained in:
committed by
Facebook Github Bot
parent
41f1bcc5ac
commit
04790f1a78
@@ -25,6 +25,7 @@
|
||||
var React = require('react');
|
||||
var ReactNative = require('react-native');
|
||||
var {
|
||||
AccessibilityInfo,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
@@ -45,8 +46,34 @@ class AccessibilityAndroidExample extends React.Component {
|
||||
count: 0,
|
||||
backgroundImportantForAcc: 0,
|
||||
forgroundImportantForAcc: 0,
|
||||
screenReaderEnabled: false,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
AccessibilityInfo.addEventListener(
|
||||
'change',
|
||||
this._handleScreenReaderToggled
|
||||
);
|
||||
AccessibilityInfo.fetch().done((isEnabled) => {
|
||||
this.setState({
|
||||
screenReaderEnabled: isEnabled
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
AccessibilityInfo.removeEventListener(
|
||||
'change',
|
||||
this._handleScreenReaderToggled
|
||||
);
|
||||
}
|
||||
|
||||
_handleScreenReaderToggled = (isEnabled) => {
|
||||
this.setState({
|
||||
screenReaderEnabled: isEnabled,
|
||||
});
|
||||
}
|
||||
|
||||
_addOne = () => {
|
||||
this.setState({
|
||||
count: ++this.state.count,
|
||||
@@ -125,6 +152,12 @@ class AccessibilityAndroidExample extends React.Component {
|
||||
</Text>
|
||||
</UIExplorerBlock>
|
||||
|
||||
<UIExplorerBlock title="Check if the screen reader is enabled">
|
||||
<Text>
|
||||
The screen reader is {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}.
|
||||
</Text>
|
||||
</UIExplorerBlock>
|
||||
|
||||
<UIExplorerBlock title="Overlapping views and importantForAccessibility property">
|
||||
<View style={styles.container}>
|
||||
<View
|
||||
|
||||
Reference in New Issue
Block a user