講述人相關(guān)

<View></View>//標簽不會被選為可讀取層級
<TouchableOpacity ></TouchableOpacity>//內(nèi)所有內(nèi)容為一個整體 若有<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('提示', '內(nèi)容', [  {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;//關(guān)閉時間毫秒
};

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',
          }}>
          {/* 內(nèi)容 */}
          <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)