React Native iOS AccessibilityViewModal属性不'；行不通

我正在我的应用程序中使用辅助功能和画外音。 问题是，当我将

accessibilityViewIsModal

属性与

Modal

一起使用时，当打开模式时，VoiceOver会读取模式后面的内容。 根据文件：

在包含同级视图a和B的窗口中，设置 视图B上的AccessibilityViewModal为true会导致忽略画外音 视图A中的图元。另一方面，如果视图B包含 子视图C，并且在视图C上将AccessibilityViewModal设置为true， 画外音不会忽略视图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);

从“React”导入React；
从“反应本机按钮”导入按钮；
从“react native modalbox”导入模态；
从“反应本机滑块”导入滑块；
进口{
评估学，
文本，
样式表，
滚动视图，
看法
尺寸，
文本输入框
}从“反应本机”；
var screen=Dimensions.get（'window'）；
类AccessibilityApp扩展React.Component{
构造函数（）{
超级（）；
此.state={
伊索彭：错，
isDisabled:错误，
swipeToClose：没错，
滑块值：0.3
};
}
onClose（）{
log（'Modal just closed'）；
}
onOpen（）{
log（'Modal just opened'）；
}
onClosingState（状态）{
log（“刚刚更改了swipeToClose的打开/关闭”）；
}
renderList（）{
var列表=[]；
对于（var i=0；iX；
返回(
this.refs.modal3.open（）}style={styles.btn}>positioncentered+background+disable
模态中心
this.setState（{isDisabled:！this.state.isDisabled}）style={styles.btn}>Disable（{this.state.isDisabled？“true”）：“false”}）
);
}
}
const styles=StyleSheet.create({
包装器：{
paddingTop:50，
弹性：1
},
模态：{
为内容辩护：“中心”，
对齐项目：“中心”
},
模式2：{
身高：230，
背景颜色：“3B5998”
},
模式3：{
身高：300，
宽度：300
},
btn:{
差额：10，
背景色：“3B5998”，
颜色：“白色”，
填充：10
},
btnModal：{
位置：“绝对”，
排名：0，
右:0,，
宽度：50，
身高：50，
背景色：“透明”
},
正文：{
颜色：“黑色”，
尺寸：22
}
});
AppRegistry.registerComponent（'AccessibilityApp'，（）=>AccessibilityApp）；

这是截图：

问题是，当我将AccessibilityViewModal属性与模态一起使用时，当模态打开时，VoiceOver读取模态后面的内容

避免画外音检查前台以外其他元素的唯一方法是使用模态视图的iOS属性，就像在React Native中一样

正如我在本例中经常注意到的那样，您遇到的问题可能会在视图层次结构中找到它的来源

当您添加iOS标签时，我想知道您是否了解这种编程，我建议：

• 观看本节内容，了解可能有助于React Native（？？？）的正确iOS实现
• 阅读实现可访问模态视图部分中的内容，通过一个巧妙、交互式和教学性的插图来了解此属性的工作方式
• 看看这里，这里提供了有用的示例和有用的插图（仍然适用于iOS，但可能会从这里得到一些启示）

问题是，当我将AccessibilityViewModal属性与模态一起使用时，当模态打开时，VoiceOver读取模态后面的内容

避免画外音检查前台以外其他元素的唯一方法是使用模态视图的iOS属性，就像在React Native中一样

正如我在本例中经常注意到的那样，您遇到的问题可能会在视图层次结构中找到它的来源

当您添加iOS标签时，我想知道您是否了解这种编程，我建议：

• 观看本节内容，了解可能有助于React Native（？？？）的正确iOS实现
• 阅读实现可访问模态视图部分中的内容，通过一个巧妙、交互式和教学性的插图来了解此属性的工作方式
• 看看这里，这里提供了有用的示例和有用的插图（仍然适用于iOS，但可能会从这里得到一些启示）

---

我以前没有使用过此功能，但它说的是

同级视图A和B

。您的模态是主视图的子视图。因此，您的模态就像示例中的C视图。使用视图将按钮同级包装到模态可能会有所帮助。这只是猜测tho@bennygenel我想你是对的。你应该把它转换成一个答案。谢谢你，但它会的如果你回答你的问题时能说明你是如何让它工作的，那就更好了，因为我对这个主题没有足够的知识。我的只是一个猜测。@bennygenel它不起作用。啊。@Maximtoyberman你有没有试着为下面的视图将

isAccessibilityElement

设置为

false

？我以前没有使用过这个功能，但它说的是 同级视图A和B。您的模式是主视图的子视图。因此，您的模式类似于示例中的C视图。使用视图将按钮同级包装到模式可能会有所帮助。这只是猜测tho@bennygenel我想你是对的。你应该把它转换成一个答案。谢谢你，但如果你回答你的问题时用你的方式会更好由于我对该主题没有足够的知识，我的只是猜测。@bennygenel它不起作用。啊。@Maximtoyberman您是否尝试过将下面的视图的

isAccessibilityElement

设置为

false

？