如何让React-Native通过AccessibiliyManager宣布特定的辅助功能消息?

时间:2017-10-20 02:44:21

标签: android react-native accessibility react-native-android

您如何通过Android(或iOS等效版本)上的TalkBack宣布可访问性消息?现有的ReactNative版本可以实现吗?我只是找不到任何信息而且看起来非常有限,特别是对于Android客户端(即“按钮”,“单选按钮已选中/未选中”是我可以看到的任何视图的唯一两种状态。

想知道这是否可能是ootb,还是我需要创建一个从本机公开的桥梁?

2 个答案:

答案 0 :(得分:2)

我最终创建了一个辅助功能模块(目前仅适用于Android,以后必须在iOS上实现相同的功能)。以下是步骤:

创建了AccessibilityModule.java:

public class AccessibilityModule extends ReactContextBaseJavaModule {

    private final ReactApplicationContext mContext;

    public AccessibilityModule(ReactApplicationContext reactContext) {
        super(reactContext);
        mContext = reactContext;
    }

    @Override
    public String getName() {
        return "A11yModule";
    }

    @ReactMethod
    void announce(String message) {
        final AccessibilityManager a11yManager = (AccessibilityManager) mContext.getSystemService(Context.ACCESSIBILITY_SERVICE);
        if (a11yManager == null || !a11yManager.isEnabled()) {
            return;
        }

        final int eventType = AccessibilityEventCompat.TYPE_ANNOUNCEMENT;
        final AccessibilityEvent event = AccessibilityEvent.obtain(eventType);
        event.getText().add(message);
        event.setClassName(AccessibilityModule.class.getName());
        event.setPackageName(mContext.getPackageName());

        a11yManager.sendAccessibilityEvent(event);
    }
}

然后,在我的ReactPackage类中,我注册了模块:

@Override
public List<NativeModule> createNativeModules(
        ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();

    modules.add(new AccessibilityModule(reactContext));

    return modules;
}

然后,导入NativeModules并在javascript中使用它:

import { NativeModules } from 'react-native'
const A11yModule = NativeModules.A11yModule; // this matches getName()
A11yModule.announce("Hello World");

答案 1 :(得分:2)

@DustinB您可以使用我写的这个库:

https://github.com/MaxToyberman/react-native-accessibility

按照以下步骤操作:

1)npm install react-native-accessibility --save

2)react-native link react-native-accessibility

3)从'react-native-accessibility'

导入{announceForAccessibility}

4)announceForAccessibility('有些消息要宣布')