Я использую специальные возможности с 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);
а это скриншот:
sibling views A and B
. Ваш Modal является дочерним элементом основного вида. Так что ваш Modal - это представление C из примера. Может помочь обертывание родственного элемента Button в Modal с представлением. Это просто предположение - person bennygenel   schedule 26.09.2017isAccessibilityElement
наfalse
для вида внизу? - person Justin   schedule 26.09.2017