Свойство React-Native iOS accessibilityViewIsModal не работает

Я использую специальные возможности с VoiceOver в своем приложении. Проблема заключается в том, что когда я использую свойство accessibilityViewIsModal с Modal и модальное окно открыто, VoiceOver считывает содержимое за модальным окном. Согласно документации:

в окне, содержащем родственные представления A и B, установка для accessibilityViewIsModal значения true в представлении B приводит к тому, что VoiceOver игнорирует элементы в представлении A. С другой стороны, если представление B содержит дочернее представление C, а вы устанавливаете для accessibilityViewIsModal значение true для представления C, VoiceOver не игнорирует элементы в представлении A.

пытался сделать так, но безуспешно.

Это мой код:

import React from 'react';
import Button from 'react-native-button';
import Modal from 'react-native-modalbox';
import Slider from 'react-native-slider';

import {
  AppRegistry,
  Text,
  StyleSheet,
  ScrollView,
  View,
  Dimensions,
  TextInput
} from 'react-native';

var screen = Dimensions.get('window');

class AccessibilityApp extends React.Component {

  constructor() {
    super();
    this.state = {
      isOpen: false,
      isDisabled: false,
      swipeToClose: true,
      sliderValue: 0.3
    };
  }

  onClose() {
    console.log('Modal just closed');
  }

  onOpen() {
    console.log('Modal just openned');
  }

  onClosingState(state) {
    console.log('the open/close of the swipeToClose just changed');
  }

  renderList() {
    var list = [];

    for (var i=0;i<50;i++) {
      list.push(<Text style={styles.text} key={i}>Elem {i}</Text>);
    }

    return list;
  }

  render() {
    var BContent = <Button onPress={() => this.setState({isOpen: false})} style={[styles.btn, styles.btnModal]}>X</Button>;

    return (
      <View style={styles.wrapper}>
          <Button onPress={() => this.refs.modal3.open()} style={styles.btn}>Position centered + backdrop + disable</Button>
        <Modal accessibilityViewIsModal={true} style={[styles.modal, styles.modal3]} position={"center"} ref={"modal3"} isDisabled={this.state.isDisabled}>
          <Text style={styles.text}>Modal centered</Text>
          <Button onPress={() => this.setState({isDisabled: !this.state.isDisabled})} style={styles.btn}>Disable ({this.state.isDisabled ? "true" : "false"})</Button>
        </Modal>
      </View>
    );
  }

}

const styles = StyleSheet.create({

  wrapper: {
    paddingTop: 50,
    flex: 1
  },

  modal: {
    justifyContent: 'center',
    alignItems: 'center'
  },

  modal2: {
    height: 230,
    backgroundColor: "#3B5998"
  },

  modal3: {
    height: 300,
    width: 300
  },

  btn: {
    margin: 10,
    backgroundColor: "#3B5998",
    color: "white",
    padding: 10
  },

  btnModal: {
    position: "absolute",
    top: 0,
    right: 0,
    width: 50,
    height: 50,
    backgroundColor: "transparent"
  },

  text: {
    color: "black",
    fontSize: 22
  }

});

AppRegistry.registerComponent('AccessibilityApp', () => AccessibilityApp);

а это скриншот:

скриншот моего приложения


person Maxim Toyberman    schedule 26.09.2017    source источник
comment
Я не использовал эту функцию раньше, но она говорит sibling views A and B. Ваш Modal является дочерним элементом основного вида. Так что ваш Modal - это представление C из примера. Может помочь обертывание родственного элемента Button в Modal с представлением. Это просто предположение   -  person bennygenel    schedule 26.09.2017
comment
@bennygenel Я подозреваю, что ты прав. Вы должны преобразовать его в ответ.   -  person Justin    schedule 26.09.2017
comment
Спасибо, но было бы лучше, если бы вы ответили на свой вопрос, как вам удалось заставить его работать, поскольку у меня недостаточно знаний в этой теме. Мое было просто предположением.   -  person bennygenel    schedule 26.09.2017
comment
@bennygenel это не сработало.   -  person Maxim Toyberman    schedule 26.09.2017
comment
Ах. @Maximtoyberman Вы пытались установить isAccessibilityElement на false для вида внизу?   -  person Justin    schedule 26.09.2017
comment
@MaximToyberman, ты когда-нибудь это понимал? Я думаю, что это ошибка с RN. Я также испытываю аналогичные проблемы с RN и реагирующей навигацией, когда после перехода на новый экран закадровый голос по-прежнему читает элементы с предыдущего экрана.   -  person chillpenguin    schedule 22.08.2018
comment
@chillpenguin, в чем именно проблема? вы пытаетесь прочитать текст в модальном режиме?   -  person Maxim Toyberman    schedule 27.08.2018
comment
@MaximToyberman Проблема, с которой я столкнулся, была исправлена ​​в самых последних версиях реактивной навигации.   -  person chillpenguin    schedule 21.09.2018


Ответы (1)


Проблема заключается в том, что когда я использую свойство accessibilityViewIsModal с модальным окном, а модальное окно открыто, VoiceOver считывает содержимое позади модального окна.

Единственный способ избежать проверки VoiceOver других элементов, кроме тех, которые находятся на переднем плане, — это использовать accessibilityViewIsModal свойство iOS вашего модального представления, как вы, по-видимому, делали в React-Native.

Проблема, с которой вы сталкиваетесь, может найти свой источник в самой иерархии представлений, как я всегда замечал в этом случае.

Поскольку вы добавили тег iOS, мне интересно, вы понимаете этот вид программирования, и я предлагаю:

  • Посмотрите этот отрывок из WWDC, чтобы узнать, как правильно реализовать iOS. это может помочь с React-Native (???).
  • Чтобы понять как это свойство работает с умной, интерактивной и педагогической иллюстрацией.
  • Взгляните на этот сайт, где приведены полезные примеры снабжен полезными иллюстрациями (по-прежнему для iOS, но просветление React-Native может быть взято отсюда).
person XLE_22    schedule 17.12.2019