讲述人相关

<View></View>//标签不会被选为可读取层级
<TouchableOpacity ></TouchableOpacity>//内所有内容为一个整体 若有<Text>则会直接读出文本信息
//当你想修改讲述人读出的信息时使用 accessibilityLabel 属性
<TouchableOpacity accessibilityLabel="设置为xxxx" ></TouchableOpacity>
<Text accessibilityLabel="设置为张三" >张三</Text>

大部分第三方弹窗组件是不会被讲述人聚焦和读取的 只能自己封装一个 Rn的Modal

不可被聚焦例如 ant-design 和 teaset

//@ant-design/react-native 的 Toast 组件
Toast.success('登录成功') //这个语句不会被讲述人聚焦和读取
//@ant-design/react-native 的 Modal 组件
<Modal visible={true} ></Modal>  //Modal 的 visible 属性为 true 时 也不会被 讲述人聚焦
//teaset 的这两个组件同理 包括 ActionSheet

//可被讲述人聚焦的原生弹窗类组件 react-native

// Alert最多问3个按钮 且布局丑陋
Alert.alert('提示', '内容', [  {text: '取消',  onPress: () => {},  },  ]);
//Modal 最为自由但是会覆盖整个页面 需自己封装

下面提供一个 简陋的弹窗组件

//使用方法
<RnModal
          clostTime={800}
          visible={visible}
          onRequestClose={() => {
            this.setState({
              visible: false,
           
              clostTime: 0,
            });
          }}>
          <View></View>
  </RnModal>

//RnModal.tsx

type IProps = {
  visible: boolean;
  content?: any;
  footer?: any[];
  onRequestClose: () => void;
  children?: any;
  clostTime?: number;//关闭时间毫秒
};

export const RnModal: React.FC<IProps> = props => {
  const [modalTime, setModalTime] = useState<number>(5);
  const time = useRef<number>(modalTime);
  let modalInterval: any = null;

  useEffect(() => {
    if (props.clostTime) {
      modalInterval = setInterval(() => {
        setModalTime(time.current - 1);
        console.log('modalTime', time.current - 1);
        if (time.current - 1 < 0) {
          time.current = time.current - 1;

          props.onRequestClose();

          if (modalInterval) {
            clearInterval(modalInterval);
          }
        }
        time.current = time.current - 1;
      }, 1000);
    }
    return () => {
      if (modalInterval) {
        clearInterval(modalInterval);
      }
    };
  }, []);

  return (
    <Modal
      visible={props.visible}
      animationType={'fade'}
      transparent={true}
      onRequestClose={() => props.onRequestClose()}>
      <View
        style={{
          flex: 1,
          padding: s(10),
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: 'rgba(0, 0, 0, 0.3)',
        }}>
        <View
          style={{
            borderColor: '#e0e0e0',
          }}>
          {/* 内容 */}
          <View style={{height: 'auto'}}>
            <View
              style={{
                alignItems: 'flex-end',
                justifyContent: 'center',
                marginBottom: s(5),
              }}></View>

            <View
              style={{
                width: s(343),
                maxHeight: s(600),
                backgroundColor: '#fff',
                borderRadius: s(8),
                overflow: 'hidden',
              }}>
              {props.children ? props.children : null}
            </View>
          </View>
        </View>
      </View>
    </Modal>
  );
};

原文链接 reactNative 盲人模式/弹窗无法聚焦/无障碍模式踩坑 - 简书 (jianshu.com)