AccessibilityInfo في React Native

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

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

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

  componentDidMount() {
    AccessibilityInfo.addEventListener(
      'reduceMotionChanged',
      this._handleReduceMotionToggled,
    );
    AccessibilityInfo.addEventListener(
      'screenReaderChanged',
      this._handleScreenReaderToggled,
    );

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

  componentWillUnmount() {
    AccessibilityInfo.removeEventListener(
      'reduceMotionChanged',
      this._handleReduceMotionToggled,
    );

    AccessibilityInfo.removeEventListener(
      'screenReaderChanged',
      this._handleScreenReaderToggled,
    );
  }

  _handleReduceMotionToggled = (reduceMotionEnabled) => {
    this.setState({reduceMotionEnabled});
  };

  _handleScreenReaderToggled = (screenReaderEnabled) => {
    this.setState({screenReaderEnabled});
  };

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

التوابع

‎‎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‎‎ في غير ذلك.

‎‎addEventListener()‎‎

static addEventListener(eventName, handler)

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

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

‎‎setAccessibilityFocus()‎‎

static setAccessibilityFocus(reactTag)

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

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

‎‎announceForAccessibility()‎‎

static announceForAccessibility(announcement)

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

‎‎removeEventListener()‎‎

static removeEventListener(eventName, handler)

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

مصادر

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