新的 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 中執行此操作。