mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-04-08 22:42:05 +08:00
be715ec705
Summary:
Currently, `AccessibilityInfo.setAccessibilityFocus` is only available on iOS. The same behaviour can be achieved on Android by dispatching the proper accessibility event. I implemented the same function for Android, to make life slightly more convenient for the developer.
Today, developers must write something like this:
```
if (Platform.OS === 'ios') {
AccessibilityInfo.setAccessibilityFocus(reactTag)
} else {
UIManager.sendAccessibilityEvent(reactTag, 8)
}
```
With this change, the following is enough for both Android and iOS:
```
AccessibilityInfo.setAccessibilityFocus(reactTag)
```
Pull Request resolved: https://github.com/facebook/react-native/pull/20229
Differential Revision: D8874107
Pulled By: mdvacca
fbshipit-source-id: a6ffd7bb89ce56d6d65b06419633a71dcf3d0733
85 lines
2.1 KiB
JavaScript
85 lines
2.1 KiB
JavaScript
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
* @flow
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
const NativeModules = require('NativeModules');
|
|
const RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
|
|
const UIManager = require('UIManager');
|
|
|
|
const RCTAccessibilityInfo = NativeModules.AccessibilityInfo;
|
|
|
|
const TOUCH_EXPLORATION_EVENT = 'touchExplorationDidChange';
|
|
|
|
type ChangeEventName = $Enum<{
|
|
change: string,
|
|
}>;
|
|
|
|
const _subscriptions = new Map();
|
|
|
|
/**
|
|
* Sometimes it's useful to know whether or not the device has a screen reader
|
|
* that is currently active. The `AccessibilityInfo` API is designed for this
|
|
* purpose. You can use it to query the current state of the screen reader as
|
|
* well as to register to be notified when the state of the screen reader
|
|
* changes.
|
|
*
|
|
* See http://facebook.github.io/react-native/docs/accessibilityinfo.html
|
|
*/
|
|
|
|
const AccessibilityInfo = {
|
|
fetch: function(): Promise {
|
|
return new Promise((resolve, reject) => {
|
|
RCTAccessibilityInfo.isTouchExplorationEnabled(function(resp) {
|
|
resolve(resp);
|
|
});
|
|
});
|
|
},
|
|
|
|
addEventListener: function(
|
|
eventName: ChangeEventName,
|
|
handler: Function,
|
|
): void {
|
|
const listener = RCTDeviceEventEmitter.addListener(
|
|
TOUCH_EXPLORATION_EVENT,
|
|
enabled => {
|
|
handler(enabled);
|
|
},
|
|
);
|
|
_subscriptions.set(handler, listener);
|
|
},
|
|
|
|
removeEventListener: function(
|
|
eventName: ChangeEventName,
|
|
handler: Function,
|
|
): void {
|
|
const listener = _subscriptions.get(handler);
|
|
if (!listener) {
|
|
return;
|
|
}
|
|
listener.remove();
|
|
_subscriptions.delete(handler);
|
|
},
|
|
|
|
/**
|
|
* Set accessibility focus to a react component.
|
|
*
|
|
* See http://facebook.github.io/react-native/docs/accessibilityinfo.html#setaccessibilityfocus
|
|
*/
|
|
setAccessibilityFocus: function(reactTag: number): void {
|
|
UIManager.sendAccessibilityEvent(
|
|
reactTag,
|
|
UIManager.AccessibilityEventTypes.typeViewFocused,
|
|
);
|
|
},
|
|
};
|
|
|
|
module.exports = AccessibilityInfo;
|