javascript - 新的 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>
  )
}