الواجهة AccessibilityInfo في React Native
من المفيد في بعض الأحيان معرفة ما إذا كان الجهاز يحتوي على قارئ شاشةٍ نشطٍ حاليًا أو لا، وقد صُمِّمَت واجهة برمجة التطبيقات AccessibilityInfo
لهذا الغرض. يمكنك استخدامها للاستعلام عن الحالة الحالية لقارئ الشاشة وكذلك للتسجيل ليتم إعلامك عند تغيّر حالة قارئ الشاشة.
مثال
ما يلي مثال صغير يوضح كيفية استخدام AccessibilityInfo
:
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;
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()
.