React Native Bottom Sheet 在 Android 上的无障碍访问问题解析

问题背景

在 React Native 开发中，使用 @gorhom/bottom-sheet 组件时，Android 平台的 TalkBack 屏幕阅读器存在一个特定的无障碍访问问题。当底部表单中包含多个文本元素时，屏幕阅读器无法单独聚焦每个文本元素，而是将所有文本内容一次性朗读出来，这严重影响了视障用户的使用体验。

问题现象

开发者在使用 BottomSheet 组件时发现：

1. 在 iOS 平台上无障碍功能工作正常
2. 在 Android 平台上，TalkBack 无法单独聚焦和朗读底部表单中的 <Text> 元素
3. 所有文本内容会被合并朗读，导致用户无法区分不同的文本段落

技术分析

这个问题源于 Android 的无障碍服务对视图层次结构的处理方式。当 BottomSheet 的内容直接放在普通 View 中时，Android 的无障碍框架会将整个视图视为一个单一的可访问元素，而不是分别处理其中的各个文本组件。

解决方案

经过深入研究和测试，发现使用 BottomSheetScrollView 作为内容容器可以完美解决这个问题。原因在于：

1. BottomSheetScrollView 内部实现了正确的无障碍属性传播
2. 滚动视图为其中的每个子元素创建了独立的无障碍节点
3. 保持了组件在滚动时的无障碍焦点管理

实现示例

import { BottomSheetScrollView } from '@gorhom/bottom-sheet';

// 修改后的正确用法
<BottomSheet
  index={1}
  snapPoints={snapPoints}
>
  <BottomSheetScrollView>
    <Text>现在可以被单独聚焦的文本1</Text>
    <TouchableOpacity>
      <Text>按钮</Text>
    </TouchableOpacity>
    <Text>现在可以被单独聚焦的文本2</Text>
  </BottomSheetScrollView>
</BottomSheet>

最佳实践建议

1. 在 BottomSheet 中总是使用 BottomSheetScrollView 作为内容容器
2. 为重要的交互元素添加清晰的无障碍标签
3. 在 Android 和 iOS 设备上都进行无障碍测试
4. 避免在 BottomSheet 中直接使用普通 View 作为容器

总结

React Native 应用的无障碍访问是实现包容性设计的重要环节。通过使用 BottomSheetScrollView 替代普通 View 作为容器，开发者可以轻松解决 Android 平台上 TalkBack 无法正确识别文本元素的问题，为所有用户提供一致的无障碍体验。