الواجهة AccessibilityInfo في React Native

من المفيد في بعض الأحيان معرفة ما إذا كان الجهاز يحتوي على قارئ شاشةٍ نشطٍ حاليًا أو لا، وقد صُمِّمَت واجهة برمجة التطبيقات ‎‎AccessibilityInfo‎‎ لهذا الغرض. يمكنك استخدامها للاستعلام عن الحالة الحالية لقارئ الشاشة وكذلك للتسجيل ليتم إعلامك عند تغيّر حالة قارئ الشاشة.

مثال

ما يلي مثال صغير يوضح كيفية استخدام ‎‎AccessibilityInfo‎‎:

• مثال لمكون دالة (Function Component)

import React, { useState, useEffect } from "react";
import { AccessibilityInfo, View, Text, StyleSheet } from "react-native";

const App = () => {
  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);

  useEffect(() => {
    const reduceMotionChangedSubscription = AccessibilityInfo.addEventListener(
      "reduceMotionChanged",
      reduceMotionEnabled => {
        setReduceMotionEnabled(reduceMotionEnabled);
      }
    );
    const screenReaderChangedSubscription = AccessibilityInfo.addEventListener(
      "screenReaderChanged",
      screenReaderEnabled => {
        setScreenReaderEnabled(screenReaderEnabled);
      }
    );

    AccessibilityInfo.isReduceMotionEnabled().then(
      reduceMotionEnabled => {
        setReduceMotionEnabled(reduceMotionEnabled);
      }
    );
    AccessibilityInfo.isScreenReaderEnabled().then(
      screenReaderEnabled => {
        setScreenReaderEnabled(screenReaderEnabled);
      }
    );

    return () => {
      reduceMotionChangedSubscription.remove();
      screenReaderChangedSubscription.remove();
    };
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.status}>
        The reduce motion is {reduceMotionEnabled ? "enabled" : "disabled"}.
      </Text>
      <Text style={styles.status}>
        The screen reader is {screenReaderEnabled ? "enabled" : "disabled"}.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  status: {
    margin: 30
  }
});

export default App;

• مثال لمكون صنف (Function Component)

import React, { Component } from 'react';
import { AccessibilityInfo, View, Text, StyleSheet } from 'react-native';

class AccessibilityStatusExample extends Component {
  state = {
    reduceMotionEnabled: false,
    screenReaderEnabled: false,
  };

  componentDidMount() {
    this.reduceMotionChangedSubscription = AccessibilityInfo.addEventListener(
      'reduceMotionChanged',
      reduceMotionEnabled => {
        this.setState({ reduceMotionEnabled });
      }
    );
    this.screenReaderChangedSubscription = AccessibilityInfo.addEventListener(
      'screenReaderChanged',
      screenReaderEnabled => {
        this.setState({ screenReaderEnabled });
      }
    );

    AccessibilityInfo.isReduceMotionEnabled().then(reduceMotionEnabled => {
      this.setState({ reduceMotionEnabled });
    });
    AccessibilityInfo.isScreenReaderEnabled().then(screenReaderEnabled => {
      this.setState({ screenReaderEnabled });
    });
  }

  componentWillUnmount() {
    this.reduceMotionChangedSubscription.remove();
    this.screenReaderChangedSubscription.remove();
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.status}>
          The reduce motion is{' '}
          {this.state.reduceMotionEnabled ? 'enabled' : 'disabled'}.
        </Text>
        <Text style={styles.status}>
          The screen reader is{' '}
          {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}.
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  status: {
    margin: 30,
  },
});

export default AccessibilityStatusExample;

التوابع

‎‎addEventListener()‎‎

static addEventListener(eventName, handler)

أضف معالج أحداث. الأحداث المدعومة:

• ‎‎announcementFinished‎‎: حدث iOS فقط. يُطلَق عندما ينتهي قارئ الشاشة من إصدار إعلان. المعامل المُمرَّر إلى معالج الأحداث هو قاموس يحتوي على المفاتيح التاليّة:
  • ‎‎announcement‎‎: السلسلة النصيّة التي أعلنها قارئ الشاشة.
  • ‎‎success‎‎: قيمة منطقيّة تُشير إلى ما إذا تمّ الإعلان بنجاح.
• ‎‎boldTextChanged‎‎: حدث iOS فقط. يُطلَق عندما تتغير حالة تبديل النص الغامق (bold text toggle). تُمرَّر قيمةٌ منطقيّة إلى معالج الأحداث كمعامل. تكون القيمة المنطقيّةُ القيمةَ ‎‎true‎‎ عند تمكين النص الغامق والقيمة ‎‎ ‎‎false‎‎ في غير ذلك.
• ‎‎grayscaleChanged‎‎: حدث iOS فقط. يُطلَق عندما تتغير حالة تبديل التدرّج الرمادي. تُمرَّر قيمةٌ منطقيّة إلى معالج الأحداث كمعامل. تكون القيمة المنطقيّةُ القيمةَ ‎‎true‎‎ عند تمكين التدرّج الرمادي والقيمة ‎‎ ‎‎false‎‎ في غير ذلك.
• ‎‎invertColorsChanged‎‎: حدث iOS فقط. يُطلَق عندما تتغير حالة تبديل قلب الألوان. تُمرَّر قيمةٌ منطقيّة إلى معالج الأحداث كمعامل. تكون القيمة المنطقيّةُ القيمةَ ‎‎true‎‎ عند تمكين قلب الألوان والقيمة ‎‎ ‎‎false‎‎ في غير ذلك.
• ‎‎reduceMotionChanged‎‎: يُطلَق عندما تتغير حالة تبديل تقليل الحركة، تُمرَّر قيمةٌ منطقيّة إلى معالج الأحداث كمعامل. تكون القيمة المنطقيّةُ القيمةَ ‎‎true‎‎ عند تمكين تقليل الحركة (أو عندما يكون "مقياس الحركة الانتقالية (Transition Animation Scale)" في "خيارات المطور" مضبوطًا على "Animation off") والقيمة ‎‎ ‎‎false‎‎ في غير ذلك.
• ‎‎reduceTransparencyChanged‎‎: حدث iOS فقط. يُطلَق عندما تتغير حالة تبديل تقليل الشفافية. تُمرَّر قيمةٌ منطقيّة إلى معالج الأحداث كمعامل. تكون القيمة المنطقيّةُ القيمةَ ‎‎true‎‎ عند تمكين تقليل الشفافية والقيمة ‎‎ ‎‎false‎‎ في غير ذلك.
• ‎‎screenReaderChanged‎‎: يُطلَق عندما تتغير حالة تبديل قارئ الشاشة. تُمرَّر قيمةٌ منطقيّة إلى معالج الأحداث كمعامل. تكون القيمة المنطقيّةُ القيمةَ ‎‎true‎‎ عند تمكين قارئ الشاشة والقيمة ‎‎ ‎‎false‎‎ في غير ذلك.

‎‎announceForAccessibility()‎‎

static announceForAccessibility(announcement)

اكتب سلسلة نصيّةً ليُعلِنَها قارئ الشاشة.

()getRecommendedTimeoutMillis

static getRecommendedTimeoutMillis(originalTimeout)

اجلب المهلة التي يحتاج إليها المستخدم بالميلي ثانية.

تضبط هذه القيمة في خيار "Time to take action (Accessibility timeout)" (الوقت المطلوب لتنفيذ إجراء (مهلة تساعد في تطبيق سهولة الوصول) وذلك من خيارات سهولة الوصول (إمكانية الوصول Accessibility).

المعاملات:

الاسم	النوع	مطلوب	الوصف
originalTimeout	عدد	نعم	المهلة المراد إعادتها إن لم يكن خيار "Accessibility timeout" (مهلة تساعد في تطبيق سهولة الوصول) مضبوطًا بعد، وتكون بواحدة الميلي ثانية.

‎‎isBoldTextEnabled()‎‎

static isBoldTextEnabled()

نظام iOS فقط. الاستعلام عمّا إذا كان نصٌّ غامقٌ ممكّنًا حاليًا. تُعيد وعدًا يُقرِّر (resolve) قيمة منطقية. تكون النتيجةُ القيمةَ ‎‎true‎‎ عند تمكين النص الغامق، والقيمة ‎‎false‎‎ في غير ذلك.

‎‎isGrayscaleEnabled()‎‎

static isGrayscaleEnabled()

نظام iOS فقط. الاستعلام عمّا إذا كان التدرج الرمادي (grayscale) مُمكَّنًا حاليًا. تُعيد وعدًا يُقرِّر (resolve) قيمة منطقية. تكون النتيجةُ القيمةَ ‎‎true‎‎ عند تمكين التدرج الرمادي، والقيمة ‎‎false‎‎ في غير ذلك.

‎‎isInvertColorsEnabled()‎‎

static isInvertColorsEnabled()

نظام iOS فقط. الاستعلام عمّا إذا كان قلب الألوان مُمكَّنًا حاليًا. تُعيد وعدًا يُقرِّر (resolve) قيمة منطقية. تكون النتيجةُ القيمةَ ‎‎true‎‎ عند تمكين قلب الألوان، والقيمة ‎‎false‎‎ في غير ذلك.

‎‎isReduceMotionEnabled()‎‎

static isReduceMotionEnabled()

الاستعلام عمّا إذا كان خيار تقليل الحركة مُمكَّنًا حاليًا. تُعيد وعدًا يُقرِّر (resolve) قيمة منطقية. تكون النتيجةُ القيمةَ ‎‎true‎‎ عند تمكين تقليل الحركة، والقيمة ‎‎false‎‎ في غير ذلك.

‎‎isReduceTransparencyEnabled()‎‎

static isReduceTransparencyEnabled()

نظام iOS فقط. الاستعلام عمّا إذا كان خيار تقليل الشفافية مُمكَّنًا حاليًا. تُعيد وعدًا يُقرِّر (resolve) قيمة منطقية. تكون النتيجةُ القيمةَ ‎‎true‎‎ عند تمكين تقليل الشفافية، والقيمة ‎‎false‎‎ في غير ذلك.

‎‎isScreenReaderEnabled()‎‎

static isScreenReaderEnabled()

الاستعلام عمّا إذا كان قارئ شاشةٍ مُمكَّنًا حاليًا. تُعيد وعدًا يُقرِّر (resolve) قيمة منطقية. تكون النتيجةُ القيمةَ ‎‎true‎‎ عند تمكين قارئ الشاشة، والقيمة ‎‎false‎‎ في غير ذلك.

‎‎setAccessibilityFocus()‎‎

static setAccessibilityFocus(reactTag)

اضبط تركيز إمكانية الوصول على مكوّن React. على Android، هذا يستدعي التابع UIManager.sendAccessibilityEvent مع تمرير الوسيط reactTag والوسيط UIManager.AccessibilityEventTypes.typeViewFocused إليه:

UIManager.sendAccessibilityEvent(reactTag, UIManager.AccessibilityEventTypes.typeViewFocused);

‎‎removeEventListener()‎‎

static removeEventListener(eventName, handler)

إزالة معالج أحداثٍ.

مهمل: استعمل التابع remove()‎ عند الاشتراك بالحدث الذي يعيده AddEventListener()‎.

مصادر

• صفحة AccessibilityInfo في توثيق React Native الرسمي.