新的 React Native 元素不可访问

Question

我正在开发 react-native 项目（主要目标是 iPhone 6）并且在可访问性链中包含新元素时遇到了一些问题。 由于某些原因，重新渲染后出现新元素时 Voice Over 不会更新。 运行 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

谢谢。

Answer 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>
  )
}

Answer 2

如果您的视图将要更新并且您需要旁白以更快地检测到更改，您可以将以下特征添加到父视图： frequentUpdates 。 这相当于在 XCode 中的辅助功能属性上设置“经常更新”，如以下答案中所述： 使 UITableView 中的动态更新内容可用于 VoiceOver

这适用于 ReactNative 0.59，尽管它已被弃用，我不知道如何在较新版本的 RN 中执行此操作。