accessibilityState
- React Native kursu
- Uzman
- Ders 28/47
- 5 dk
accessibilityState ile durum öğrenirsin.
accessibilityState nedir?
accessibilityState, bileşenin o anki durumunu screen reader'a bildirir. selected, checked, disabled, busy gibi boolean alanlar taşır. Kullanıcı durumu duymadan bileşeni kullanamaz.
Örnek: bir onay kutusu için accessibilityState={{ checked: true }}. Screen reader "işaretli" der. disabled: true verirsen "devre dışı" ekler. Bu alanlar bileşenin görsel durumunu yansıtmalı; görsel ile söz bir olmalı. State'i güncellemezsen kullanıcı yanlış bilgi duyar. Bu yüzden state her değişimde güncellenir.
Uygulama Onay kutusuna state ekle
Bir TouchableOpacity'a accessibilityRole="checkbox" ve accessibilityState={{ checked: isChecked }} ekle. isChecked bir state değişkeni olsun.
Başlangıç kodu
import React, { useState } from 'react';
import { TouchableOpacity, Text } from 'react-native';
function AcceptBox() {
const [isChecked, setIsChecked] = useState(false);
return (
// rol ve state ekle
<TouchableOpacity onPress={() => setIsChecked(!isChecked)}>
<Text>Kabul</Text>
</TouchableOpacity>
);
}Örnek çözüm
import React, { useState } from 'react';
import { TouchableOpacity, Text } from 'react-native';
function AcceptBox() {
const [isChecked, setIsChecked] = useState(false);
return (
<TouchableOpacity accessibilityRole="checkbox" accessibilityState={{ checked: isChecked }} onPress={() => setIsChecked(!isChecked)}>
<Text>Kabul</Text>
</TouchableOpacity>
);
}State alanları
Yaygın state alanları: checked (onay kutusu işaretli mi), selected (sekme seçili mi), disabled (devre dışı mı), busy (yükleniyor mu). Her biri boolean olur; true/false.
Örnek: bir sekme için accessibilityState={{ selected: true }}. Screen reader "seçili" der. Bir düğme yükleniyorsa busy: true verirsin; kullanıcı "meşgul" duyar ve tekrar dokunmaz. Birden fazla alan aynı anda verilebilir: { selected: true, disabled: false }. Yalnızca doğru olan alanları yaz; her alan ekran okuyucuya ek bilgi katar.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 disabled düğme için ne verilir?
<TouchableOpacity accessibilityState={{ ? }}>- disabled: true Doğru cevap
- busy: false
- selected: false
- checked: true
Açıklama: disabled: true devre dışı olduğunu bildirir.
2 checked alanı
accessibilityState={{ ____: isChecked }}accessibilityState={{ checked: isChecked }}Açıklama: checked alanı onay durumunu taşır.
3 Alanı karşılığına eşle
| Kavram | Anlamı |
|---|---|
checked |
İşaretli |
selected |
Seçili |
disabled |
Devre dışı |
busy |
Meşgul |