新的反应原生元素不可访问答案

【问题标题】：New react native element is not accessible新的反应原生元素不可访问
【发布时间】：2020-06-08 13:04:42
【问题描述】：

我正在开发 react-native 项目（主要目标是 iPhone 6）并且在可访问性链中包含新元素时遇到了一些问题。由于某些原因，当重新渲染后出现新元素时，旁白不会更新。运行 showButton() 方法后隐藏按钮不会出现在可访问性链中。它变得可见，但 iOS Voice Over 看不到它。仅当应用程序异步执行某些操作时才会出现此问题。这是我的代码：

export default class SmartView extends Component {
  constructor(props) {
    super(props)
    this.state = {
      showButton: false,
    }
  }

  showButton = () => {
    setTimeout(() => {
      this.setState({ showButton: true })
    }, 500)
  }

  render() {
    const { showButton } = this.state
    return (
      <View style={style.root}>
        <Button
          onPress={this.showButton}
          accessibilityRole="button"
          accessibilityTraits="button"
          accessibilityLabel="appeared"
          accessible
          simple
        >
          <Text>Appeared</Text>
        </Button>
        {showButton && (
          <Button
            accessibilityRole="button"
            accessibilityTraits="button"
            accessibilityLabel="appeared"
            accessible
            simple
          >
            <Text>Hidden</Text>
          </Button>
        )}
      </View>
    )
  }
}

所以，如果我删除 setTimeout 并在当前 js 流中进行状态更新，一切正常。有没有可能制作类似VoiceOverReload() 的东西？

我使用：react-native v0.59.9 和 iPhone 6，软件版本 12.4

谢谢。

【问题讨论】：

什么是Voice Over 和VoiceOverReload()？你说这些是问题区域，我在代码中根本看不到？
感谢您的回复。我的意思是在运行showButton() 方法后隐藏按钮不会出现在可访问性链中。它变得可见，但 iOS Voice Over 看不到它。

标签： javascript ios reactjs react-native accessibility

【解决方案1】：

下面的演示工作正常，可能你的自定义Button 组件有问题

import React, { useState } from 'react'
import { View, Text, TouchableOpacity } from 'react-native'

export default function Screen () {
  const [showButton, setShowButton] = useState(false)
  function handleShow () {
    setTimeout(() => {
      setShowButton(true)
    }, 1000)
  }
  return (
    <View style={{ padding: 40 }}>
      <TouchableOpacity
        onPress={handleShow}
        accessibilityRole='button'
        accessibilityTraits='button'
        accessibilityLabel='This button label is long for demo'
        accessible
        >
        <Text>Appeared</Text>
      </TouchableOpacity>
      {showButton && (
        <TouchableOpacity
          accessibilityRole='button'
          accessibilityTraits='button'
          accessibilityLabel='hidden'
          accessible
        >
          <Text>Hidden</Text>
        </TouchableOpacity>
      )}
    </View>
  )
}

【讨论】：

【解决方案2】：

如果您的视图要更新并且您需要配音以更快地检测到更改，您可以将以下特征添加到父视图：frequentUpdates。这相当于在 XCode 中的可访问性属性上设置“经常更新”，如以下答案中所述：Making dynamically updating content in a UITableView accessible for VoiceOver

这适用于 ReactNative 0.59，尽管它已被弃用，我不知道如何在较新版本的 RN 中做到这一点。

【讨论】：

感谢您的回答。不幸的是，它没有帮助，我将accessibilityTraits="frequentUpdates" 添加到位于render() 方法（上面的代码）中的父View 元素，但一切都保持不变。