React Native 中嵌套元素的辅助功能焦点顺序不正确

Question

我正在开发一个混合匹配应用程序，我们在几个模块中使用 React Native 组件。在本例中，我有一个表格视图，我们在其中的一些单元格中添加 RN 组件。

我能够在这些 React Native 组件中启用嵌套元素的可访问性，但在 UITableView 中添加时焦点顺序似乎不正确。

视图层次结构如下所示：

 <E0>
    <E1 accessible={true}>
       <E11 accessible={true}>
       <E12 accessible={true}>...
    <E2 accessible={true}>
       <E21 accessible={true}>
       <E22 accessible={true}>...

我预计焦点顺序是 E1、E11、E12、E2、E21、E22

但它是按顺序宣布的 E1、E2、E11、E12、E21、E22 即先父元素，然后子元素

在 iOS 中，我们有

accessibilityElements

属性来设置顺序。有没有办法像React Native中那样设置焦点顺序，或者有其他方法可以实现这一点？

P.S.：当我在视图控制器中显示特定组件时，相同的组件按预期工作（即以正确的顺序宣布画外音）。

任何及时的帮助/有用的建议将不胜感激，因为我在这个问题上花了几天多的时间。

Answer 1

假设启用屏幕阅读器的人不会过多使用视觉效果，您可以移动元素，使屏幕阅读器以正确的顺序阅读它们。

在您的情况下，这意味着 if 屏幕阅读器已启用，然后将

marginTop

添加到

50

，例如 

E2

这是一个示例：左侧是启用屏幕阅读器时的情况。

检查屏幕阅读器是否已启用可以通过以下方式完成：AccessibilityInfo

免责声明：我知道这是一个相当嘲笑的答案，因为它只是避免了问题而不是解决问题，但我还是发布了它，因为它确实解决了与你的问题类似的问题，而且 React 似乎没有解决方案本地人。

Answer 2

虽然 Nicolai 的回答可能会达到可接受的结果，但就是否有办法在 React Native 中实际设置屏幕阅读器焦点顺序而言：

• React Native 本身没有，这令人失望。请参阅this讨论的开头。

有一些非核心的潜在解决方案：

• 这个要点适用于 A11y 包装器。
• react-native-a11y 包，截至 2023 年末处于测试阶段，允许您设置屏幕阅读器焦点顺序。

Answer 3

我们将我们的应用程序转换为更多的绿色领域 RN 应用程序，我们不会再遇到这样的问题。 AFAIK 这可能是唯一的解决方案。