Как программно обновить метку доступности в React Native? - PullRequest
Новая
       17

Как программно обновить метку доступности в React Native?

0 голосов
/ 26 февраля 2020

Я новичок в React Native и кроссплатформенном программировании, поэтому, пожалуйста, потерпите меня. Я постараюсь изложить это как можно более логично.

Что я пытаюсь сделать: У меня есть пользовательский компонент с именем TextDisplay, который выглядит следующим образом 

const TextDisplay = React.forwardRef((props, ref) => {
    return (
        <View 
        style={props.style}>
            <Text
            style={styles.textStyle}
            ref={ref}
            accessibilityLabel={props.label}>
                {props.children}
            </Text>
        </View>
    );
});

В основном, в этом Text компоненте отображается одна буква, которая мне нужна, чтобы все время фокусироваться на доступности. Пользователь вводит букву, и напечатанная буква будет отображаться в компоненте TextDisplay. Код, который делает это выглядит следующим образом: 

import React, { useState } from 'react';
import { View, StyleSheet, AccessibilityInfo, findNodeHandle, TextInput } from 'react-native';
import TextDisplay from './TextDisplay';

const PortraitKeyboard = props => {

 const textDisplay = React.createRef();
 const [value, setValue] = useState('');

 const handleKeyPressDelay = (keyPress) => {
        let inputLength = keyPress.nativeEvent.key.length;

        if (inputLength == 1) {
            const letter = keyPress.nativeEvent.key.replace(/[^a-zA-Z]/g, '').toLowerCase();
            setValue(letter);
            textDisplay.current.focus();
            const reactTag = findNodeHandle(textDisplay.current);
            AccessibilityInfo.setAccessibilityFocus(reactTag);
        }
 };

 return (

            <TextDisplay
                style={styles.textInput}
                ref={textDisplay}
                label={value}>
                {value}
            </TextDisplay>

            <TextInput
                onKeyPress={handleKeyPressDelay}
            />
 );

};

Это работает так же, как я хочу это на Android устройствах.

Проблема: Позвольте мне предисловие это говорит о том, что эта проблема существует только на iOS устройствах. Когда новая введенная буква изменяется в компоненте TextDisplay, она не сразу (иногда никогда) не изменяет метку доступности для компонента TextDisplay. Например, компонент TextDisplay пуст, и я набираю букву «а», которая прекрасно работает, но когда я набираю «b», который заменяет «a», который был набран ранее, он будет продолжать говорить «а» и не говорите «б» с VoiceOver. Если я проведу пальцем к одному и тому же компоненту, он просто постоянно говорит не ту букву. Только когда я переключаю фокус на другой компонент и возвращаюсь, он говорит правильную букву, или, если я дважды коснусь компонента, это также будет правильным. Для целей этого приложения мне нужно, чтобы отображаемое письмо произносилось без какого-либо дополнительного взаимодействия с пользователем.

То, что я пробовал: Я пытался найти эту проблему, и как обновить sh метку доступности, но это такая специфическая проблема c, и она касается доступности Я ничего не нахожу. Я попытался изменить метку доступности вручную с помощью Direct Manipulation , но VoiceOver, похоже, не работает, чтобы повторить письмо. Я также попытался переместить фокус доступности с одного компонента на другой, который работает, но в результате получается A: медленно (по некоторым причинам требуется около 2 секунд для перемещения фокуса доступности, что мне нужно будет сделать дважды.) И B : он будет говорить с любым компонентом, который я поменяю, чтобы затем говорить то, что я хочу.

Все, что мне нужно, - это заставить iOS обновить sh метку доступности для компонента, когда я изменю букву внутри. Есть ли способ подделать прикосновение, чтобы я мог выбрать элемент? Или есть какое-то более простое решение, которого я не вижу?

...